Orientation

Orientation

• components/_patterns/ - All components are filed here from smallest (atoms) to largest (pages). Each component contains it's own Twig template as well as the asset files for that component. It may also contain sample data (yml/json) as well as a documentation file for annotations (markdown).
• components/_patterns/00-base - For top-level needs such as sass variables/mixins, layout, fundamental styles, etc.
• images/icons/src/ - individual SVGs placed here will be automatically combined into an SVG sprite via a gulp task. See components/_patterns/01-atoms/04-images/icons/icons.md in Pattern Lab for instructions.

CSS

This starterkit automatically compiles SCSS files from anywhere in the components/_patterns directory, so that you can organize your SCSS files by component. There are a few things to keep in mind with this approach:

• Use the _UNDERSCORE-FIRST.scss syntax to make sure Sass files get compiled in the expected order.
• Default patterns use BEM syntax. We even wrote a Twig extension to simplify this process. See the README for that extension for usage or simply look at any of our components built into Emulsify.
• All pattern SCSS is imported into a single file components/_patterns/style.scss and compiled by the Gulp task into dist/style.css (automatically included in Drupal)

JS

• We encourage writing all JavaScript inside its logical component directory (see the Accordion component for an example).
• All JavaScript is compiled/minified automatically into dist/PATH/TO/JS/FILENAME.js (path will mimic the path to the file inside the components directory, e.g. dist/02-molecules/accordion-item/accordion-item.js
• To add the JavaScript to your component, we created a Twig extension for using attach_library inside Pattern Lab. It is not as robust as Drupal's, but it will look for your library definitions in your *.libraries.yml file and load them in your component in Pattern Lab. Again, see the accordion component for an example usage. By using this, Drupal will automatically just work using its own attach_library extension!

Pattern Lab

Components are automatically added to the Pattern Lab styleguide. We highly recommend reading through the Pattern Lab documentation, as it is quick and will speed up your process greatly. Here are some quick notes:

• Twig files starting with an underscore (e.g., _block.twig) are hidden from the Pattern Lab styleguide.
• You can include stock content in a COMPONENT_NAME.yml or COMPONENT_NAME.json file. See components/_data/data.json for default variables that can be used (or you can create your own).
• Pattern Lab also makes it easy to create lists as well. See components/_patterns/01-atoms/03-lists/00-unordered.twig for an example and components/_data/listitems.json for the stock variables that are available.