Eleventy with Forestry CMS, published on Clouflare Pages.

npm start

npm run production

npm run sass:process

npm run sass:tokens

Once the site is imported in Forestry, go to settings/previews to start the preview server.

You'll be able to create drafts and preview the final rendering before publishing.

The whole Sass system is powered by central config file, which lives here: _src/scss/_config.scss.

Before Sass is compiled, a _tokens.scss file is generated from the design tokens config which is required.

Key elements:

• $stalfos-size-scale: A token driven size scale which by default, is a “Major Third” scale
• $stalfos-colors: A token driven map of colours
• $stalfos-util-prefix: All pre-built, framework utilities will have this prefix. Example: the wrapper utility is '.sf-wrapper' because the default prefix is 'sf-'
• $metrics: Various misc metrics to use around the site
• $stalfos-config: This powers everything from utility class generation to breakpoints to enabling/disabling pre-built components/utilities

The utility class generator lets you generate whatever you want, with no opinions on class name or properties affected.

To add a new class, add another item to the exists $stalfos-config map. This example adds a utility for floating elements.

'float':('items':('left':'left','right': 'right'
  ),
  'output': 'responsive',
  'property': 'float'
);

The output is set to responsive which means every breakpoint will generate a prefixed class for itself. If you only wanted elements to float left in the md breakpoint, you’d now be able to add a class of md:float-left to your HTML elements.

If you only want standard utility classes generating, set the output to standard.

Function tries to match the passed $key with the $stalfos-colors map. Returns null if it can’t find a match.

Returns back a 1 dimensional (key value pair) config value if available.

Function tries to match the passed $ratio-key with the $stalfos-size-scale. Returns null if it can’t find a match.

Grabs the property and value of one of the $stalfos-config utilities that the generator will generate a class for.

Pass in the key of one of your breakpoints set in $stalfos-config['breakpoints'] and this mixin will generate the @media query with your configured value.

Genius has Forestry CMS pre-configured. You can customise the configuration by editing .forestry/settings.yml.