Buttons

<a href="#" class="btn">
  The button
</a>

<a href="#" class="btn-secondary">
  The Secondary Button
</a>

<a href="#" class="btn-diap">
  The Diap Button
</a>

<a href="#" class="btn-secondary-diap">
  The Alt Button
</a>

Buttons with icons

Button groups

Buttons placed inline need to be spaced and usually the is some extra margin before and/or after the group of button. The .buttons class does this.

<div class="buttons">
  <button class="btn">Primary button</button>
  <button class="btn-secondary">Secondary button</button>
</div>

Buttons in a group get some top/bottom margin.

(also: check here that <a> tag buttons and <button> buttons look similar)

Typography

The typography is based on a scaling font size with a min and max size. By setting the variables $font-size-min and $font-size-max the html font will be the min font until breakpoint-md and the gradualy scale up to max size. This is done with clamp: clamp(#{$font-size-min}, #{$font-size-scaling}, #{$font-size-max}). Try scaling up and down this browser viewport and see the result.

Text styles

There 2 text stylings. UI text is the default. Used for text outside dedicated body copy. When needed, body copy placed inside a .text class can be styled differently from the UI type. By default they are the same.

SCSS Variables

// type settings
$font-family-base: sans-serif !default;
$font-size-base: 18px !default; // px
$font-size-min: round(($font-size-base * 0.777)) !default; // px
$font-size-max: $font-size-base !default; // px

// font size variations
$font-size-sm: .85rem !default;
$font-size-md: 1rem !default;
$font-size-lg: 1.2rem !default;

// line-height
$line-height-base: 1.65 !default;
$line-height-condensed: 1.2 !default;

// headings
// ratio base works out of the box, but change to your needs
$headings-font: $font-family-base !default;
$headings-font-weight: bold !default;
$headings-line-height: $line-height-condensed !default;
$headings__small-size: $font-size-sm !default;
$headings__small-color: $color-primary !default;

// heading sizes can be regular rem sizes
// these defaults are are a ratio based on the line-height
$h1-size: $font-size-md * $line-height-base * $line-height-base !default;
$h2-size: $font-size-md * $line-height-base !default;
$h3-size: $font-size-md * (1 + (($line-height-base - 1) / 2)) !default;
$h4-size: $font-size-md !default;
$h5-size: $font-size-md !default;
$h6-size: $font-size-md !default;
        

Colors

Font colors

The default font color is stored in $color-font and as class available as .color-font

When text is overlayed on images it's sometimes useful to be able to specifically apply dark or light font. $color-font-dark and $color-font-light are the variables for this. These are available as classes .color-font-dark and .color-font-light

Buttons

<a href="#" class="btn">
  The button
</a>

<a href="#" class="btn-secondary">
  The Secondary Button
</a>

<a href="#" class="btn-diap">
  The Diap Button
</a>

<a href="#" class="btn-secondary-diap">
  The Alt Button
</a>

Buttons with icons

Button groups

Buttons placed inline need to be spaced and usually the is some extra margin before and/or after the group of button. The .buttons class does this.

<div class="buttons">
  <button class="btn">Primary button</button>
  <button class="btn-secondary">Secondary button</button>
</div>

Buttons in a group get some top/bottom margin.

(also: check here that <a> tag buttons and <button> buttons look similar)

Text links

Box

Colored boxes to place attention on content. Boxes have some padding and coloring.

Default boxes are .box--soft for content that needs just a bit of attention and .box--loud for content that needs a lot of attention.

Literal box classes

Soft and loud are more flexible to style but for quick markup the literal classes .box--primary and .box--secondary are available.

Box mixin

If you need more box colors create them with the mixin:

// @mixin box($bgcolor, $color) {
.black-box {
  @include box(black, hotpink);
}
        

Spacing

SVG mixin

Place icons before/after/in elements. Common usage example:

Common usage

a.mylink { @include svg--after('arrow-right', 1em, .5em) }

places the image arrow-right.svg in the background of an inline-block element after the a.mylink

svg--before(img, width height) places the icon inline before the element

svg--abs(img, width, height) places it in an absolute positioned after the element.

svg(img, width height) places the icon in the background of the element itself

The icon source

The icon source can either be a base64 encoded string or an icon name. Some default icons are defined in _variables/

The root folder the icons is by default ../images but can be set with the variable $svg__root: '../images';