Skip to main content

Chassis v5.5.0

Boilerplate

You can request Chassis from our shared asset hosting, or download and include the CSS file in your application's assets. Load it before your app's own CSS file(s).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Chassis boilerplate, for rapid prototyping"
    />
    <title>Chassis Boilerplate Template</title>
    <link
      href="https://www.arnoldclark.com/cdn/css/static/chassis/5.5.0/chassis.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <a class="ch-skip" href="#main">Skip to main content</a>
    <main id="main">
      <h1>Hello World</h1>
    </main>
  </body>
</html>

CSS variables

Variables can be used within your app's custom CSS files to make it easier to write your own styles, as long as you load Chassis first.

Please note that updating the CSS variable --ac-black will not affect any values calculated using $ac-black. such as button variants and ghost button variants.

How to use

color: var(--grey-2); /* color: #f2f2f2; */
padding: var(--v) calc(var(--h) * 2); /* padding: 6px 14px; */
margin-right: calc(var(--h) * -2); /* margin-right: -14px; */

List of variables

:root {
  /* Arnold Clark Black */
  --ac-black: #2d3737;
  --ac-black-1: #ebebeb;
  --ac-black-2: #d5d7d6;
  --ac-black-3: #abafb0;
  --ac-black-4: #818787;
  --ac-black-5: #57605f;
  --ac-black-6: #242d2c;
  --ac-black-7: #1b2121;

  /* Arnold Clark Yellow */
  --ac-yellow: #ffde00;
  --ac-yellow-1: #fefce5;
  --ac-yellow-2: #fff9cb;
  --ac-yellow-3: #fff299;
  --ac-yellow-4: #feec66;
  --ac-yellow-5: #fee533;
  --ac-yellow-6: #ccb100;
  --ac-yellow-7: #998500;

  /* Arnold Clark Blue */
  --ac-blue: #00a1e0;
  --ac-blue-1: #e6f5fc;
  --ac-blue-2: #cdedfa;
  --ac-blue-3: #98daf2;
  --ac-blue-4: #66c8ed;
  --ac-blue-5: #34b5e6;
  --ac-blue-6: #0182b3;
  --ac-blue-7: #006186;

  /* Arnold Clark Teal */
  --ac-teal: #00b4bb;
  --ac-teal-1: #e4f8f9;
  --ac-teal-2: #cceff1;
  --ac-teal-3: #9ae1e5;
  --ac-teal-4: #66d1d7;
  --ac-teal-5: #34c3c9;
  --ac-teal-6: #019096;
  --ac-teal-7: #006c6f;

  /* Arnold Clark Violet */
  --ac-violet: #87189d;
  --ac-violet-1: #f3e8f6;
  --ac-violet-2: #e8d1ed;
  --ac-violet-3: #cfa3d8;
  --ac-violet-4: #b875c5;
  --ac-violet-5: #9e47b0;
  --ac-violet-6: #6c137d;
  --ac-violet-7: #510e5e;

  /* Arnold Clark Magenta */
  --ac-magenta: #d41568;
  --ac-magenta-1: #fce8f1;
  --ac-magenta-2: #f7d1e2;
  --ac-magenta-3: #eda2c3;
  --ac-magenta-4: #e573a6;
  --ac-magenta-5: #dc4487;
  --ac-magenta-6: #a81053;
  --ac-magenta-7: #7e0c3f;

  /* Arnold Clark Bluegrey */
  --ac-bluegrey: #607882;
  --ac-bluegrey-1: #f0f1f3;
  --ac-bluegrey-2: #dfe4e7;
  --ac-bluegrey-3: #bfc8cd;
  --ac-bluegrey-4: #a1aeb4;
  --ac-bluegrey-5: #80939a;
  --ac-bluegrey-6: #4c6067;
  --ac-bluegrey-7: #3b4c53;

  /* Arnold Clark Green */
  --ac-green: #12b447;
  --ac-green-1: #e7f7ec;
  --ac-green-2: #d0f0d9;
  --ac-green-3: #a0e1b5;
  --ac-green-4: #72d292;
  --ac-green-5: #41c36b;
  --ac-green-6: #0e9038;
  --ac-green-7: #096c2b;

  /* Arnold Clark Red */
  --ac-red: #c23131;
  --ac-red-1: #f8eaea;
  --ac-red-2: #f4d6d6;
  --ac-red-3: #e7adac;
  --ac-red-4: #db8382;
  --ac-red-5: #ce5b5a;
  --ac-red-6: #9b2827;
  --ac-red-7: #7d1f1f;

  /* Arnold Clark Orange */
  --ac-orange: #fb8c00;
  --ac-orange-1: #fef3e5;
  --ac-orange-2: #fee8cc;
  --ac-orange-3: #fdd199;
  --ac-orange-4: #fdba66;
  --ac-orange-5: #fca333;
  --ac-orange-6: #c97000;
  --ac-orange-7: #975400;

  /* Solids */
  --white: #fff;
  --black: #000;

  /* Greys */
  --grey-1: #fafafa;
  --grey-2: #f2f2f2;
  --grey-3: #e5e5e5;
  --grey-4: #ccc;
  --grey-5: #999;
  --grey-6: #666;
  --grey-7: #333;

  /* Pricing */
  --ac-pricing: #155991;

  /* Rhythm */
  --v: 6px;
  --h: 7px;

  /* Breakpoints */
  --xs: 480px;
  --sl: 576px;
  --sm: 768px;
  --md: 992px;
  --lg: 1200px;

  /* Scaffolding */
  --link-color: #007fb0;
  --link-color-hover: #004864;

  /* Radius */
  --border-radius-base: 4px;
  --border-radius-sm: 3px;
  --border-radius-lg: 6px;

  /* Containers */
  --container-sl: 540px;
  --container-sm: 720px;
  --container-md: 940px;
  --container-lg: 1200px;

  /* Typography */
  --font-size-base: 16px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-brand: 24px;
  --font-weight-book: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --measure: 548px;

  /* Forms & Buttons */
  --input-bg-focus: #fdfef3;
}

SCSS variables and helpers

Some SCSS variables are used in the construction of CSS rule-sets (e.g., $ac-blue for the construction of the .ch-btn--primary button). These variables and helpers will only be available to use in your app if you copy them into your own SCSS file.

These values will likely remain until the browser support is there for CSS relative colours.

// Colour variables
// Used in the construction of button and ghost button variants
$ac-black: #2d3737;
$ac-blue: #00a1e0;
$ac-bluegrey: #607882;
$ac-green: #12b447;
$ac-red: #c23131;
$white: #fff;
$black: #000;
$grey-2: #f2f2f2;
$grey-4: #ccc;

// Grid system variable
// Used in the construction of the grid system
$grid-columns: 12;

// Breakpoints variables
// Used in the construction of responsive media queries
$xs: 480px;
$sl: 576px;
$sm: 768px;
$md: 992px;
$lg: 1200px;

// Breakpoint utils
@mixin bp($min-width) {
  @media (min-width: $min-width) {
    @content;
  }
}

@mixin bp-max($max-width) {
  @media (max-width: $max-width) {
    @content;
  }
}