A simple starter kit for Eleventy
Hylia is a lightweight Eleventy starter kit with Forestry CMS pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend it for yourself.
Get started now by deploying Hylia to Netlify.
Features
Hylia version 0.4.5 features:
Roadmap
Dark/Light mode toggle Added in 0.4.0
Getting started
Method one: One-Click Deploy to Netlify
You can deploy Hylia to Netlify with one click and you’ll be up and running in minutes!
I recorded a quick start video of me deploying Hylia to Netlify and getting the CMS set up. Check it out here.
Method two: Clone / Fork
- Clone or fork this repo:
git clone https://github.com/andybelldesign/hylia
cd
into the project directory and runnpm install
- Once all the dependencies are installed run
npm start
- Open your browser at
http://localhost:8080
and away you go!
Terminal commands
Serve the site locally
npm start
Build a production version of the site
npm run production
Compile Sass
npm run sass:process
Re-generate design tokens for Sass
npm run sass:tokens
Getting started with the CMS
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.
Design Tokens and Styleguide
Design Tokens
Although Hylia has a pretty simple design, you can configure the core design tokens that control the colours, size ratio and fonts.
Note: Credit must be given to the hard work Jina Anne did in order for the concept of design tokens to even exist. You should watch this video, then read this article and then sign up for this course to expand your knowledge.
To change the design tokens in the CMS, click on “theme settings” in the sidebar.
To change the design tokens directly, edit _src/data/tokens.json
.
The tokens are converted into maps that the Sass uses to compile the front-end CSS, so make sure that you maintain the correct structure of tokens.json
.
Styleguide
Your version of Hylia ships with a Styleguide by default. You can see a demo of the Styleguide at https://hylia.website/styleguide/.
You can edit the Styleguide by opening src/styleguide.njk
. If you don’t want the Styleguide, delete that file and the page will vanish.
Sass
Hylia is based on the WIP v2 version of Stalfos, which currently has no documentation (I know, I’m bad). Here is some very basic documentation for elements of the new framework that you will encounter on this project.
Configuration
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
How to create a new utility class with the generator
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
.
Functions
get-color($key)
Function tries to match the passed $key
with the $stalfos-colors
map. Returns null if it can’t find a match.
get-config-value($key, $group)
Returns back a 1 dimensional (key value pair) config value if available.
get-size($ratio-key)
Function tries to match the passed $ratio-key
with the $stalfos-size-scale
. Returns null if it can’t find a match.
Mixins
apply-utility($key, $value-key)
Grabs the property and value of one of the $stalfos-config utilities
that the generator will generate a class for.
media-query($key)
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.
CMS
Hylia has Forestry CMS pre-configured as standard. You can customise the configuration by editing .forestry/settings.yml
.
Content that you can edit
The basic CMS setup allows you to edit the following:
- Home page: Edit the content on your homepage
- Posts: Create and edit blog posts
- Generic pages: Create generic pages that use a similar layout to posts
- Global site data: Various bits of global site data such as your url, title, posts per page and author details
- Navigation: Edit your primary navigation items
- Theme: Edit the design tokens that power the site’s theme
Get involved
This project is super early and feedback is very much welcome. In order to keep things running smooth, please consult the contribution guide and code of conduct.
The stuff that I need the most help with is:
- Documentation
- Webmentions
- Performance