Grease

Getting started

• Clone the Grease repo on Github.
• To start the local dev server, run npm start.
• Grease is all set up for Netlify deployment. You can use the publish:prod script and _public output directory to deploy elsewhere.

Working with CSS

Grease uses a practical, declarative approach to writing modern CSS, using three cascade layers:

1. base is where you define the default presentation characteristics for your project. Tailoring the custom media queries, custom properties, typeface, and base elements alone should get you halfway there.
2. components is where you define commonly repeated objects that live across your project. Components care very little about their position on any given page.
3. utilities is for CSS that manipulates elements and components. Grease aims to cover the small subset of attributes that are highly variable (page position, type characteristics, spacing) as opposed to making every property available. All the page weight and speed benefits utilities afford, none of the tooling complexity.

Syntax, draft specs

Components and utilties in Grease are written using a modfied BEM syntax, which uses a utility-friendly block --modifier1 --modifier2 syntax instead of block--modifier1 block--modifier2.

Lightning is configured to support the nesting and custom media draft specs, but it doesn’t target older browsers out of the box. Adjust as need be for the project at hand.

Breaking up CSS

Grease gives you three options for including CSS:

1. In the main bundle. Global stuff goes here.
2. As route-specific bundles. Add a CSS file to source/css/pages (or any folder not prefixed by an underscore) to create a new entrypoint. Assign the path to stylesheet in template frontmatter to use it.
3. As style tags. For critical CSS or page-specific one-offs, Grease includes a style shortcode that processes CSS with Lightning and adds it to a style tag in the page head.