Fast sites built faster


Grease is a website starter that makes building performant, accessible, aesthetic websites fast & frictionless. It uses 11ty, Lightning CSS, and Esbuild, and includes a lightweight, declarative CSS architecture that sets you up for success.

100% pure grease! Speed guaranteed!

Designed for in-browser design

Ultra-fast tools (11ty, Esbuild, Lightning CSS) plus incremental builds makes designing in browser a joy.

Zero-config entrypoints

Import everything into monolithic CSS and JS bundles? Break out page bundles? Inline critical CSS? YES!

No production surprises

CSS and JS are treated the same on dev as on production (bundled, minified, etc). What you see is what you’ll get.

No fillers, no additives

Grease keeps it light so you can focus on building instead of messing around with tools and frameworks.

Fluid, variable type

A straightforward fluid type system pre-loaded for variable fonts keeps your type game on point.

Batteries included

Production-ready odds & ends come in the box. Sitemaps, canonical URLs, search index blocking, etc.

Apply directly to the web platform for best results!

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.

Utility cheatsheet


Rapidly compose responsive layouts with an infinitely nestable 12+2 “bleed” column grid that collapses to 1+2 @small.


  • --start-{1-10/auto} changes the start positon
  • --span-{2-12} changes how many columns the grid__item spans at @medium+
  • --bleed-{left/right/full} makes elements stick to page edges across breakpoints
  • --place-{start/center/end} changes the placement of content within a grid area


Manipulate margin and padding.

  • --{top/bottom}-{flush/xxs-xxl/flex} adds margin
  • --{top/bottom}-pull-{flush/xxs-xxl} inverts margin
  • --pad-{flush/xs-xxl} adds padding to all sides
  • --pad-{top/right/bottom/left}-{flush/xs-xxl} adds padding to one side
  • Append @mto modifiers to apply @medium+


Decouple semantics from presentation.

  • --size-{xxxs-xxxxl} adjusts font size
  • --size-{poster/poster-l} for very large type
  • --weight-{100-800} adjusts font-weight
  • --width-{s-l} adjust variable font width axis
  • --measure-{xs-xl} max width based on character width
  • --align-{left/center/right} changes text alignment
  • --leading-{xs-l/fluid} adjusts line height
  • --spacing-{s-xl} adjusts letter spacing
  • --italic, --uppercase, --unlisted, and --undecorated do what the names suggest

.animate, .flex, .color, .display

Grease includes a few smaller, less frequently used utilties too. Check the source for details.