Welcome to the component library for modmore.com.
The library contains a collection of reusable blocks that we can use. Some of these are implemented as ContentBlocks fields or layouts, but they are all available as twig templates for use in the app-side.
We use Trello to manage this project. If you spot an issue, add a card to the Backlog column in the modmore website v2 board.
Components and their variants have been given statuses reflecting their state of completion. The available statuses are listed below.
| Label | Description |
|---|---|
| Do not implement. | |
| Work in progress. Implement with caution. | |
| Ready to implement. |
Through the navigation on the left you can find all the components that have been built. Components may have different variations that can be toggled with a class or slightly different markup.
For app templates, you can use an include to fetch a partial template directly from the library. This is recommended for small components (buttons, feature blocks, etc) which accept contexts. For larger components (e.g. grid or forms), just copy the markup, as including those directly would become limiting (and a mess) fast.
The library is meant to be the “source of truth” for all things front-end design/markup. If you make any tweaks to the CSS, make sure it is reflected in the library first.
After a npm install in the project root, run gulp fractal:start to boot up a local copy of the component library that automatically refreshes.
Done making changes to the library? Run gulp fractal:build to update the static html version of the library, which is included in the deployment to production and served at design.modmore.com.
Read more about how to work with the CSS and JavaScript in the respective docs.