Contact: Katie Fritz
[The Standard Edition for Twig]((https://github.com/pattern-lab/edition-php-twig-standard) gives developers and designers a clean and stable base from which to develop a Twig-based pattern library.
The Standard Edition for Twig comes with the following components:
pattern-lab/core: GitHub, Packagistpattern-lab/patternengine-twig: documentation, GitHub, Packagistpattern-lab/styleguidekit-assets-default: GitHub, Packagistpattern-lab/styleguidekit-twig-default: GitHub, Packagist
Please note: Pattern Lab uses Composer to manage project dependencies. To upgrade the Standard Edition for Twig or to install plug-ins you'll need to install Composer. We recommend that you install it globally.
Yarn (for Sass and parallel process support): see setup notes
Make sure Composer is installed globally and Yarn is installed globally (npm install --global yarn).
-
download or
git clonethis repository to an install location. -
run the following
cd install/location composer install yarn install
Running composer install from a directory containing a composer.json file will download all dependencies defined within. Running yarn install does the same for the package.json file.
Note: To update Pattern Lab please refer to each component's GitHub repository.
This installation uses Yarn to manage dev processes. For the base commands, view the [Pattern Lab Twig Standard Edition docs] (https://github.com/pattern-lab/edition-php-twig-standard#helpful-commands).
The first time you generate your pattern lab, use the command
yarn deploy
After that, you should be able to use
yarn dev
This will start a php server, watch for changes, and also compile scss on the fly.
Then open http://localhost:8080 in your browser.
The CSS for this project is inspired by Atomic Design principes and these blog posts:
- https://www.lullabot.com/articles/bem-atomic-design-a-css-architecture-worth-loving
- https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/
It uses Sass (see setup notes) for more robust organization.
All scss files can be found in source/css/scss.
- 00_base
- _colors.scss (color variables)
- _reset.scss
- _space.scss (spacing variables)
- _typography.scss (fonts and base typography)
- _utilities.scss (utility or helper classes; use sparingly)
- 01_atoms
- styles applied to atom-level components. Prefix classes with a-.
- 02_molecules
- styles applied to molecule-level components. Prefix classes with m-.
- 03_organisms
- styles applied to organism-level components. Prefix classes with o-.
- 04_templates
All scss files are imported into main.scss, which gets compiled into main.css.
To add new styles:
- First make sure the styles don't exist; use a project-wide search if needed.
- Identify the component you are modifying or adding.
- For new components, add a new scss file in the appropriate folder, with the appropriate prefix.
- Classes should also be given the appropriate prefix.
- Do not use
!importantto override existing styles, unless you are adding a new utility class that can apply to any component.
Do not change pattern-scaffolding.css - it's a Pattern Lab asset.
Add images to source/images. Reference them with src="../../images/title.jpg.
Pattern HTML and CSS copyright © 2017 Katie M Fritz, LLC. Pattern Lab core and MSU graphics and design principles do not belong to me.
Pattern Lab info:
