Pattern Lab for Sustainable Agriculture & Food Systems (SAFS) at MSU

Contact: Katie Fritz

Contents

• Resources
• Stack
• Installing
• Serving in the Browser
• Editing SAFS Pattern Lab
• License

Resources

• MSU Web Standards
• MSU Coding Guidelines
• Pattern Lab

Stack

Pattern Lab Standard Edition for Twig

[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, Packagist
• pattern-lab/patternengine-twig: documentation, GitHub, Packagist
• pattern-lab/styleguidekit-assets-default: GitHub, Packagist
• pattern-lab/styleguidekit-twig-default: GitHub, Packagist

Composer

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

Installing

Make sure Composer is installed globally and Yarn is installed globally (npm install --global yarn).

• download or git clone this 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.

Serving in the Browser

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.

Editing SAFS Pattern Lab

CSS Architecture

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 !important to 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.

Adding Images

Add images to source/images. Reference them with src="../../images/title.jpg.

LICENSE

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: