modmore component library

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.

Reporting issues

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.

Component statuses

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.

Using the library

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.

Building the library

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.