/ 07
SCSS Reference
The Sass source behind the compiled template — for developers who want to rebuild from src/ instead of editing the shipped dist/ CSS by hand.
If you just want to change a color, a font, or some copy, everything you need is on
Customizing — it works directly against the compiled
dist/ CSS with no build step. This section is for developers who want to work in the
original Sass source (src/scss/), extend a component, or understand how the stylesheet is
put together before making a larger change.
What this section covers
Fieldcraft's HTML template is authored as Sass under src/scss/ and compiled to the
dist/css/ files every page actually links. The source is organized into five layers —
base, objects, components, settings and utilities — a structural decomposition modeled on
well-known ITCSS-style Sass architectures, so the styles for any one piece of the design live in
exactly one file. This section documents that structure: how to run the build, what each layer is for,
and what every object, component and utility class does — grounded in the real markup from the
template's own 16 pages.
Build System
Installing Node dependencies, the npm scripts that compile Sass to CSS, and the src/ vs dist/ folder split.
Read →SCSS Architecture
The five source layers — base, settings, objects, components, utilities — and Fieldcraft's class-naming convention.
Read →Components
One partial per UI section of the site — all 29 of them, from the header to the footer.
Read →Utilities
The one responsive-overrides partial and what it actually changes at each breakpoint.
Read →