This boilerplate uses the following technologies and frameworks:
- Jekyll (4.0.0)
- Sass
- jQuery (3.5.0)
Modular code blocks (sections) can be used to build the layout of the site. The sections are configured in the _config.yml
file and blocks are stored in the _includes/blocks
folder. Editors can use the CloudCannon UI to add, remove or modify positioning of the structural components according to their requirements.
When adding custom sections, configure both the _config.yml
file and the default.html
layout
For more information on configuring array structures, follow this comprehensive documentation from CloudCannon: Managing Complex Array Structures.
Global site variables are stored in the settings.yml
file located inside the _data
folder.
All metadata for Open Graph tags is pulled directly from the settings.yml
file through Liquid syntax. Modification of the settings.yml
arrays must be followed by changes in the og.html
file located inside the _includes/essentials
folder.
Sass
variables are populated by values declared on settings.yml
. These variables are then declared on the main.scss
stylesheet in order to make them available to the whole stylesheet & partials, like so:
$variable-name: {{site.data.settings.the-yaml-array-location}};
Note 1: the Sass
variables pulled from settings.yml
need to be placed before the variable is called (i.e. in any partials) and cannot be placed in Sass
variables located in the _sass
folder.
Note 2: Sass
partials cannot feature empty front matter (double ---
at top of file)
Use the pre-defined classes located on the _padding.scss
partial for uniformity of design. Edit the padding and margin defaults on the same file.
# Default padding classes:
.padding-lg {
padding : 8%;
}
.padding-md {
padding : 5%;
}
.padding-sm {
padding : 2%;
}
Note 1: If using Gridlex flexbox framework, you cannot apply padding to items with class including col
. This can be reset on the _resets
file by using global selectors like [class=*col-]
.