AREA 17

On this page:

Font
Color
Grid
Spacing
- Horizontal
- Vertical
Other Utilities
JS behavior

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.

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: