SCSS reference / Objects

Objects

Class-based selectors that define undecorated, reusable layout patterns — no color, no imagery, no identity of their own.

An object gives a piece of markup its structure and spacing rhythm without deciding what it looks like. Fieldcraft has two: section, which sets the rhythm every page section shares and the two skins (dark, paper) a section can wear, and .btn/.tert, the button and link treatments reused by every component that needs a call to action. Everything with a visible identity — a hero, a review card, the footer — is a component built on top of one or both of these objects.

Format

Object classes are named plainly for what they structure, with child elements as ordinary nested descendant selectors rather than a separate naming layer:

.object-name {}
.object-name .child {}
.object-name.modifier {}

/* Example */

section {}
.paper {}
.welds-up {}

Example

Every <section> on the site inherits the base object's vertical rhythm; adding .paper swaps it to the light skin without touching any other rule:

<section class="paper on-paper" id="rules">
  <h2 class="kicker">The house rules</h2>
  <p>…</p>
</section>

See Section for the full rundown of both skins, and Buttons for every button and tertiary-link variant.