A17 / Boilerplate 7

On this page:

NB. this HTML file has inline styles for styling items relevant to this page (the lists, the code samples, definition lists etc.) but most things are straight Boilerplate utility classes. Inspecting this page will make it clear which is which. You can also see the GIT repo for this page.

Generated Font classes:

f-h1

f-h2

f-body

<p class="f-h1">f-h1</p>
<p class="f-h2">f-h2</p>
<p class="f-body">f-body</p>

As defined in frontend.config.json:

"typography": {
"families": {
  "serif-font": "\"Copernicus, serif\"",
  "sans-serif-font": "\"Helvetica Neue, Helvetica, Arial, sans-serif\""
},
"faces": [
  {
    "family": "Copernicus",
    "weight": "normal",
    "style": "normal",
    "src": {
      "woff2": "\"GalaxieCopernicus-Book.woff2\"",
      "woff": "\"GalaxieCopernicus-Book.woff\""
    }
  }
],
"typesets": {
  "h1": [
    {
      "xs": {
        "font-family": "var(--serif-font)",
        "bold-weight": "500",
        "font-size": "38",
        "line-height": "1.2",
        "letter-spacing": "-0.02em",
        "font-smoothing": "true"
      },
      "lg": {
        "font-size": "60"
      }
    }
  ],
  "h2": [
    {
      "xs": {
        "font-family": "var(--serif-font)",
        "bold-weight": "500",
        "font-size": "20",
        "line-height": "1.2",
        "letter-spacing": "-0.02em",
        "font-smoothing": "true"
      },
      "lg": {
        "font-size": "32"
      }
    }
  ],
  "body": [
    {
      "xs": {
        "font-family": "var(--sans-serif-font)",
        "bold-weight": "600",
        "font-size": "16",
        "line-height": "1.7",
        "font-smoothing": "true"
      },
      "lg": {
        "font-size": "17"
      }
    }
  ]
}
}

Can also be defined in the SCSS:

$font_families: (
  serif-font: 'serif',
  sans-serif-font: 'sans-serif'
);

$font_faces: (
  (
    family: 'Copernicus',
    weight: 'normal',
    style: 'normal',
    src: (
      woff2: 'GalaxieCopernicus-Book.woff2',
      woff: 'GalaxieCopernicus-Book.woff'
    )
  )
);

$font_typesets: (
  (
    'sample': (
      (
        'xs': (
          font-family: var(--serif-font),
          bold-weight: 400,
          font-size: 10,
          line-height: 1.7,
          font-smoothing: true
        ),
        'lg': (
          font-size: 12
        )
      )
    )
  )
);

NB: Place before @import '~@area17/a17-boilerplate/scss/a17-boilerplate';

NB: JSON values will override these if both JSON setup and SCSS set up are used.

Colors

Root CSS variables and helper classes will be made out of objects passed through, these examples assume the following config.

Generated root variables:

:root {
    --COLOR-TOKENS: "↓";
    --white: #fff;
    --grey-5: #f2f2f2;
    --grey-10: #e6e6e6;
    --grey-15: #d9d9d9;
    --grey-54: #757575;
    --grey-90: #1a1a1a;
    --black: #000;
    --purple-600: #6621d9;
    --purple-900: #5319ba;
}

:root {
    --COLOR-TEXT: "for usage ↓";
    --text-title: var(--black);
    --text-primary: var(--grey-90);
    --text-secondary: var(--grey-54);
    --text-accent: var(--purple-900);
}

:root {
    --COLOR-BACKGROUND: "for usage ↓";
    --bg-design-grid: rgba(127, 255, 255, 0.25);
    --bg-primary: var(--white);
    --bg-banner: #3d4892;
    --bg-accent: var(--purple-600);
}

:root {
    --COLOR-BORDER: "for usage ↓";
    --border-primary: var(--grey-10);
    --border-secondary: var(--grey-15);
    --border-tertiary: var(--grey-5);
}

Generated text color utilities:

text-title

text-primary

text-secondary

text-accent

<p class="f-body text-title">text-title</p>
<p class="f-body text-primary">text-primary</p>
<p class="f-body text-secondary">text-secondary</p>
<p class="f-body text-accent">text-accent</p>

Generated background color utilities:

<div class="bg-primary"></div>
<div class="bg-banner"></div>
<div class="bg-accent"></div>

Generated border color utilities:

<div class="swatches swatches--no-border">
  <div class="border-primary"></div>
  <div class="border-secondary"></div>
  <div class="border-tertiary"></div>
</div>

Generated CSS variables:

As defined in frontend.config.json:

"color": {
    "tokens": {
      "white": "#fff",
      "grey-5": "#f2f2f2",
      "grey-10": "#e6e6e6",
      "grey-15": "#d9d9d9",
      "grey-54": "#757575",
      "grey-90": "#1a1a1a",
      "black": "#000",
      "purple-600": "#6621d9",
      "purple-900": "#5319ba"
    },
    "borderColor": {
      "primary": "grey-10",
      "secondary": "grey-15",
      "tertiary": "grey-5"
    },
    "textColor": {
      "title": "black",
      "primary": "grey-90",
      "secondary": "grey-54",
      "accent": "purple-900"
    },
    "backgroundColor": {
      "primary": "white",
      "banner": "#3d4892",
      "accent": "purple-600"
    }
  }

Can also be defined in the SCSS:

$color_tokens: (
  'red-900': '#900'
);

$color_textColor: (
  'error': 'red-900',
  'highlight': '#ff0'
);

NB: you can specify hex, rgb, rgba, hsl, transparent, currentColor or a token name in your textColor, backgroundColo or borderColor defs.

NB: Place before @import '~@area17/a17-boilerplate/scss/a17-boilerplate';

NB: JSON values will override these if both JSON setup and SCSS set up are used.

Grid Utilities

Using .grid and .col-x classes

<ul class="grid grid-demo">
  <li class="col-1"></li>
  <li class="col-2"></li>
  <li class="col-3"></li>
  ....
</ul>

One col class per item:

Same col class on every item, wrapping:

Different sizes per breakpoint:

Different sizes per breakpoint, nothing defined at xs:

Indenting a col:

Indenting a col (alt):

Not setting a col width, just start and ends:

Nested:

Need a random 10 column grid?

.grid-demo--10 {
  --grid-columns: 10;
}
<ul class="grid grid-demo grid-demo--10">

Need a random 24 column grid?

.grid-demo--24 {
  --grid-columns: 24;
}
<ul class="grid grid-demo grid-demo--24">

Using .colspan

<div class="colspan-1"></div>
<div class="colspan-2"></div>
<div class="colspan-3"></div>

Nesting:

Different sizes per breakpoint:

Need a random 10 column grid?

.colspan-demo--10 {
  --grid-columns: 10;
}
<div class="colspan-demo colspan-demo--flex colspan-demo--10">

Need a random 24 column grid?

.colspan-demo--24 {
  --grid-columns: 24;
}
<div class="colspan-demo colspan-demo--flex colspan-demo--24">

Nesting .grid/.col-x and .colspan

As defined in frontend.config.json:

"structure": {
  "breakpoints": {
    "xs": "0",
    "sm": "544px",
    "md": "650px",
    "lg": "990px",
    "xl": "1300px",
    "xxl": "1520px"
  },
  "columns": {
    "xs": "6",
    "sm": "6",
    "md": "10",
    "lg": "12",
    "xl": "12",
    "xxl": "12"
  },
  "container": {
    "xs": "auto",
    "sm": "auto",
    "md": "auto",
    "lg": "auto",
    "xl": "auto",
    "xxl": "1440px"
  },
  "gutters": {
    "inner": {
      "xs": "10px",
      "sm": "15px",
      "md": "20px",
      "lg": "30px",
      "xl": "40px",
      "xxl": "40px"
    },
    "outer": {
      "xs": "20px",
      "sm": "30px",
      "md": "40px",
      "lg": "40px",
      "xl": "40px",
      "xxl": "auto"
    }
  }
}

Can also be defined in the SCSS:

// where each breakpoint ends
$structure_breakpoints: (
  xs: 0,
  sm: 544px,
  md: 650px,
  lg: 990px,
  xl: 1300px,
  xxl: 1520px
);
// fluid or fixed value (px, rem, em, vw) per breakpoint
$structure_container-type: (
  xs: 'auto',
  sm: 'auto',
  md: 'auto',
  lg: 'auto',
  xl: 'auto',
  xxl: 1440px
);
// columns are in each breakpoint
$structure_column-count: (
  xs: 6,
  sm: 6,
  md: 8,
  lg: 12,
  xl: 12,
  xxl: 12
);
// in px or vw, of each breakpoint
$structure_gutters: (
  inner: (
    xs: 10px,
    sm: 10px,
    md: 10px,
    lg: 10px,
    xl: 10px,
    xxl: 10px
  ),
  outer: (
    xs: 10px,
    sm: 10px,
    md: 10px,
    lg: 10px,
    xl: 10px,
    xxl: 'auto'
  )
);

NB: Place before @import '~@area17/a17-boilerplate/scss/a17-boilerplate';

NB: JSON values will override these if both JSON setup and SCSS set up are used.

Spacing

Horizontal spacings:

Vertical spacings

.ml-g, .ml-gutter
margin left inner gutter
.mr-g, .mr-gutter
margin right inner gutter
.mt-g, .mt-gutter
margin top inner gutter
.mb-g, .mb-gutter
margin bottom inner gutter
.m-g, .m-gutter
margin all inner gutter
.mx-g, .mx-gutter
margin left and right inner gutter
.my-g, .my-gutter
margin top and bottom inner gutter
.-ml-g, .-ml-gutter
negative margin left inner gutter
.-mr-g, .-mr-gutter
negative margin right inner gutter
.-mt-g, .-mt-gutter
negative margin top inner gutter
.-mb-g, .-mb-gutter
negative margin bottom inner gutter
.-m-g, .-m-gutter
negative margin all inner gutter
.-mx-g, .-mx-gutter
negative margin left and right inner gutter
.-my-g, .-my-gutter
negative margin top and bottom inner gutter
.ml-og, .ml-outer-gutter
margin left outer gutter
.mr-og, .mr-outer-gutter
margin right outer gutter
.mt-og, .mt-outer-gutter
margin top outer gutter
.mb-og, .mb-outer-gutter
margin bottom outer gutter
.m-og, .m-outer-gutter
margin all outer gutter
.mx-og, .mx-outer-gutter
margin left and right outer gutter
.my-og, .my-outer-gutter
margin top and bottom outer gutter
.-ml-og, .-ml-outer-gutter
negative margin left outer gutter
.-mr-og, .-mr-outer-gutter
negative margin right outer gutter
.-mt-og, .-mt-outer-gutter
negative margin top outer gutter
.-mb-og, .-mb-outer-gutter
negative margin bottom outer gutter
.-m-og, .-m-outer-gutter
negative margin all outer gutter
.-mx-og, .-mx-outer-gutter
negative margin left and right outer gutter
.-my-og, .-my-outer-gutter
negative margin top and bottom outer gutter
.ml-a, .ml-auto
margin left auto
.mr-a, .mr-auto
margin right auto
.m-a, .m-auto
margin all auto
.mx-a, .mx-auto
margin left and right auto
.my-a, .my-auto
margin left and right auto
.pl-g, .pl-gutter
padding left inner gutter
.pr-g, .pr-gutter
padding right inner gutter
.pt-g, .pt-gutter
padding top inner gutter
.pb-g, .pb-gutter
padding bottom inner gutter
.p-g, .p-gutter
padding all inner gutter
.px-g, .px-gutter
padding left and right inner gutter
.py-g, .py-gutter
padding top and bottom inner gutter
.pl-og, .pl-outer-gutter
padding left outer gutter
.pr-og, .pr-outer-gutter
padding right outer gutter
.pt-og, .pt-outer-gutter
padding top outer gutter
.pb-og, .pb-outer-gutter
padding bottom outer gutter
.p-og, .p-outer-gutter
padding all outer gutter
.px-og, .px-outer-gutter
padding left and right outer gutter
.py-og, .py-outer-gutter
padding top and bottom outer gutter

Responsive spacing classes

Responsive spacing classes:

.mt-small
margin top "small" for this breakpoint
.mb-small
margin bottom "small" for this breakpoint
.pt-small
padding top "small" for this breakpoint
.pb-small
padding bottom "small" for this breakpoint
.mt-medium
margin top "medium" for this breakpoint
.mb-medium
margin bottom "medium" for this breakpoint
...
...
.mr-, .ml-, .mt-, .mb-, .m-, .mx-, .my-, .-mr-, .-ml-, .-mt-, .-mb-, .-m-, .-mx-, .-my-, .pr-, .pl-, .pt-, .pb-, .p-, .px-, .py-
Variations for each of your responsive spacing rules

Where "small" and "medium" relates to the spacing group name in the supplied object, not a breakpoint name. Maybe you called yours "inner-1" and "outer-2" etc.

Each of these points to a CSS variable and so you can override per element if required (will affect all its children)

As defined in frontend.config.json. The sets are named and then a distance for each breakpoint is specified:

"spacing": {
  "small": {
    "xs": "28px"
  },
  "medium": {
    "xs": "32px",
    "md": "40px"
  },
  "large": {
    "xs": "48px",
    "md": "60px",
    "lg": "80px"
  },
  "xlarge": {
    "xs": "72px",
    "md": "100px",
    "lg": "120px"
  }
}

Can also be defined in the SCSS:

$spacing_sets: (
  'tiny': (
    'xs': '4px',
    'md': '8px'
  )
);

NB: Place before @import '~@area17/a17-boilerplate/scss/a17-boilerplate';

NB: JSON values will override these if both JSON setup and SCSS set up are used.

Other Utilities:

.visually-hidden
.vh
.sr
Screen reader text
<p class="sr">Screen reader only text</p>

Screen ready only text

.float-clear
.fc
Float clear
.background-fill
.bgf
Background fill
<div style="height: 10px;" class="bg-banner mt-small bgf"></div>
.keyline-full
.klf
Keyline full
<div style="height: 10px;" class="mt-small klf"></div>

data-behavior example:

DummyBehavior:

Counter:

(counts up lg+ breakpoints)

  •  
  •  
  •