Source: src/postcss/Common/_animation.css, line 1

2.1 Animations

A few starter animations. As we progress the framework, we should add to this.

Examples

Default styling

.animate--spin

spin animation

.animate--call

suitable for telephone iconography

<button class="btn btn--brand-1">
<div class="animate [modifier class]">
<i class="icon-phone" aria-hidden="true"></i>
</div>
</button>

Source: src/postcss/Common/_borders.css, line 1

2.2 Borders

Typically you would set borders within targeted classes for specific UI, however we do have some basic border classes availale for use directly in html elements.

Examples

Default styling

Bordered Content

.border--all

Full border with default settings and color.

Bordered Content

.border--t

Top border.

Bordered Content

.border--r

Right border.

Bordered Content

.border--b

Bottom border.

Bordered Content

.border--l

Left border.

Bordered Content

.border--brand-1.border--all

Combined full border with brand 1 color.

Bordered Content

.border--brand-1.border--all.border--x5

Combined full border, brand 1 color and 5px size.

Bordered Content

<div class="[modifier class] pad">
Bordered Content
</div>

Source: src/postcss/Common/Nav/_breadcrumbs.css, line 1

Examples

Default styling

ItemItemItemItem

.breadcrumbs--dash

Displays a dash instead of the default slash

ItemItemItemItem

.breadcrumbs--chevron

Displays a chevron instead of the default slash

ItemItemItemItem

.breadcrumbs--comma

Displays a comma instead of the default slash

ItemItemItemItem

<div class="breadcrumbs pad-sm bg-grey-2 [modifier class]">
<span><a href="">Item</a></span><span><a href="">Item</a></span><span><a href="">Item</a></span><span>Item</span>
</div>

Source: src/postcss/Common/Inputs/_buttons.css, line 1

2.4 Button

Your standard button suitable for clicking.

The button comes with multiple modifiers to control color and size

Examples

Default styling

.btn--sm

Small

.btn--md

Medium

.btn--lg

Large

.btn--rounded-full

if we want fully rounded left and right edges

.btn--no-border

remove the box shadow created border

<button class="btn [modifier class]">Button</button>
<button class="btn btn--brand-1 [modifier class]">Brand 1</button>
<button class="btn btn--brand-2 [modifier class]">Brand 2</button>
<button class="btn btn--positive [modifier class]">Positive</button>
<button class="btn btn--negative [modifier class]">Negative</button>
<button class="btn btn--transparent [modifier class]">Transparent</button>
<button class="btn btn--disabled [modifier class]">Disabled</button>

Source: src/postcss/Common/Inputs/_buttons.css, line 219

2.4.1 Animated Close Button

Used mainly for closing modals or other dialog-style content

Example

<button class="btn btn--animate-close "><i class="icon-cross"></i></button>

Source: src/postcss/Common/Inputs/_button-group.css, line 1

2.4.2 Button group

Container class for grouing buttons, with a modifier to make them appear as pills

Combine with layout classes for full control.

Examples

Default styling

.button-group--pill

display as pill

.button-group--pill-rounded

display as fully rounded pill

<div class="button-group [modifier class]">
<button class="btn btn--brand-1">Button</button>
<button class="btn btn--brand-2">Button</button>
<button class="btn btn--brand-1">Button</button>
<button class="btn btn--brand-2">Button</button>
</div>

Source: src/postcss/Common/_cards.css, line 1

2.5 Card

Simple border and drop shadow container for anywhere we want to show a card

Combine with layout classes for full control. Here's some examples using outher valable classes to control the card's content

.card__header (optional)

displays a header as a per-determined flexbox with a bottom border and justify space between

.card__body (optional)

This is a flexbox that expands to fill available space. this should normally be used if we want containers above or below (eg header and footer) to fit their own content, and the main card content container (body) will stretch to the remaining height of the card

.card__img (optional)

this is a background image container that only needs to be added if we want to include additional effects when the modifier 'card--is-link' is applied

.card__footer (optional)

displays a footer as a pre-determined flexbox with a top border and justify space between

See Demos. section for advanced card examples .

Examples

Default styling

Content

.card--is-link

if we want our card to be a link we can add this modifier which will make any 'card__img' classs slightly darker, and fully opaque on hover.

Content

<div class="card [modifier class]">
<div class="card__header">Optional Header</div>
<div class="img card__img img--bg img--min-sm" style='background-image: url("kss-assets/images/demo.jpg");'></div>
<div class="card__body pad">Content</div>
<div class="card__footer">Optional Footer</div>
</div>

Source: src/postcss/Common/Inputs/_checkbox-radio.css, line 1

2.6 Checkbox

Checkbox Input Variations

Source: src/postcss/Common/Inputs/_checkbox-radio.css, line 10

2.6.1 Checkboxes

Checkbox defaults

Example

checkbox

Checkbox

<div>
<div class="chk" >
<input type="checkbox" id="c1" checked>
<label for="c1">checkbox</label>
</div>
<div class="chk chk--brand-1">
<input type="checkbox" id="c2">
<label for="c2">Checkbox</label>
</div>
<div class="chk chk--positive">
<input type="checkbox" id="c3">
<label for="c3">Checkbox</label>
</div>
<div class="chk chk--negative">
<input type="checkbox" id="c4">
<label for="c4">Checkbox</label>
</div>
<div>

Source: src/postcss/Common/Inputs/_checkbox-radio.css, line 59

2.6.2 Checkbox - Label on Bottom

With a modifier class "chk--label-bottom" we can display as such

Example

checkbox

<div>
<div class="flex flex--has-gap">
  <div class="chk chk--label-bottom">
  <input type="checkbox" id="chk-lbl-bottom-1" checked>
  <label for="chk-lbl-bottom-1">checkbox</label>
  </div>
  <div class="chk chk--label-bottom">
  <input type="checkbox" id="chk-lbl-bottom-2">
  <label for="chk-lbl-bottom-2">checkbox</label>
  </div>
</div>
</div>

Source: src/postcss/Common/Inputs/_checkbox-radio.css, line 38

2.6.3 Checkbox - Label on Top

With a modifier class "chk--label-top" we can display as such

Example

checkbox

<div class="flex flex--has-gap">
  <div class="chk chk--label-top">
  <input type="checkbox" id="chk-lbl-top-1" checked>
  <label for="chk-lbl-top-1">checkbox</label>
  </div>
  <div class="chk chk--label-top">
  <input type="checkbox" id="chk-lbl-top-2">
  <label for="chk-lbl-top-2">checkbox</label>
  </div>
</div>

Source: src/postcss/Common/Inputs/_checkbox-radio.css, line 81

2.6.4 Checkbox - No Icon

We can display with no icon

Our color mofifiers will alter based on the existence of this modifier class.

For Example, our 'chk--positive' modifier class will fill the radio rather than outline it.

Example

checkbox

<div>
<div class="flex flex--has-gap">
  <div class="chk chk--no-icon bg-grey-1 chk--positive">
  <input type="checkbox" id="chk-no-icon-1" checked>
  <label for="chk-no-icon-1">checkbox</label>
  </div>
  <div class="chk chk--no-icon bg-grey-1 chk--positive">
  <input type="checkbox" id="chk-no-icon-2">
  <label for="chk-no-icon-2">checkbox</label>
  </div>
</div>
</div>

Source: src/postcss/Common/_notifications.css, line 1

2.7 Circle

Base classes for notifications. Combine with .abs classes to position accordingly

Examples

Default styling

.circle--xs

xsmall

.circle--sm

small

.circle--md

medium

.circle--lg

large

<div class="flex flex--has-gap">
<button class="btn btn--negative circle [modifier class]">
<i class="icon-bell"></i>
</button>
<div class="bg-negative circle box-shadow [modifier class]">
<i class="icon-bell color-grey-1"></i>
</div>
</div>

Source: src/postcss/Common/Colors/_color.css, line 2

2.8 Color

Here we have some preset color classes that can be used directly in our front end components.

Source: src/postcss/Common/Colors/_bg.css, line 1

2.8.1 Background Colors

We have some preset background color classes that can be used directly in our front end components.

note This just an example of brand-1 and it's variants.

All colors that are defined as variables in the brand's DIR (eg /brand/colors.css) have been assigned color classes, and so simply use the expected naming convention if you want a different one (EG class="bg-grey-6").

Examples

Default styling

.bg-brand-1--tint-1

tint 1

.bg-brand-1--tint-2

tint 2

.bg-brand-1--shade-1

shade 1

.bg-brand-1--shade-2

shade 2

<div class="flex">
<div class="pad bg-brand-1 [modifier class]">
</div>
</div>

Source: src/postcss/Common/Colors/_color.css, line 12

2.8.2 Color

Here we have some preset color classes that can be used directly in our front end components.

These classes can be used to manipulte text or border colors.

note This just an example of brand-1 and it's variants.

All colors that are defined as variables in the brand's DIR (eg /brand/colors.css) have been assigned color classes, and so simply use the expected naming convention if you want a different one (EG class="color-grey-6").

Examples

Default styling

Text Color

.color-brand-1--tint-1

tint 1

Text Color

.color-brand-1--tint-2

tint 2

Text Color

.color-brand-1--shade-1

shade 1

Text Color

.color-brand-1--shade-2

shade 2

Text Color

<span class="pad color-brand-1 [modifier class]">
Text Color
</span>

Source: src/postcss/Common/Colors/_zebra.css, line 1

2.8.3 Zebra Striping

Classes to allow alternate coloration of sibling elements. Ususally used to break up sections of content for easier reading.

Examples

Default styling

Zebra Striped content

.zebra--grey-1

Odd: Grey 1, Even: Grey 2

Zebra Striped content

.zebra--grey-2

Odd: Grey 2, Even: Grey 3

Zebra Striped content

.zebra--grey-3

Odd: Grey 3, Even: Grey 4

Zebra Striped content

.zebra--grey-4

Odd: Grey 4, Even: Grey 5

Zebra Striped content

<div class="zebra [modifier class]">
<div class="pad">Zebra Striped content</div>
<div class="pad">Zebra Striped content</div>
<div class="pad">Zebra Striped content</div>
<div class="pad">Zebra Striped content</div>
</div>

Source: src/postcss/Common/_drop-shadows.css, line 1

2.9 Drop Shadows

Simple drop shadows.

Source: src/postcss/Common/FlickityCarousel/_carousels.css, line 1

2.10 Carousels (Flickity)

We use Flickity for our carousels / sliders. Here are some base classes to control how many cells are displyed in various viewport sizes.

The following example assumes we have flickity JS enabled and only works with that.

Flickity Documentation.

Examples

Default styling

Cell 1

.carousel--sm-1.carousel--md-2.carousel--lg-3.carousel--xl-4

These modifier classes alter how many cells are shown based on viewport size. 2 cells for medium, 3 for large and 4 for extra large. NOTE the classes are set up to show the next slider partially

Cell 1

Cell 2

Cell 3

Cell 4

.carousel--tn

Thumbnail carousel typically used for Flickity AsNavFor.

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

<ul class="carousel carousel-unique-class-name1 [modifier class]" data-flickity='{ "cellAlign": "left", "contain": true, "groupCells": "100%", "pageDots": false }'>
<li class="carousel-cell mgn--r">
<div class="bg-brand-1 pad min-h-md full-width">
Cell 1
</div>
</li>
<li class="carousel-cell mgn--r">
<div class="bg-brand-1 pad min-h-md full-width">
Cell 2
</div>
</li>
<li class="carousel-cell mgn--r">
<div class="bg-brand-1 pad min-h-md full-width">
Cell 3
</div>
</li>
<li class="carousel-cell mgn--r">
<div class="bg-brand-1 pad min-h-md full-width">
Cell 4
</div>
<li class="carousel-cell mgn--r">
<div class="bg-brand-1 pad min-h-md full-width">
Cell 5
</div>
</li>
</ul>

Source: src/postcss/Common/_css-grid.css, line 2

2.11 Grid

Our base css-grid layout for responsive design.

12-column grid and be used as a layout skeleton for an entire page, or within / combined with other elements for finer content control.

Combining column classes inside the grid container allows us to control the column's span based on pre-determined breakpoints as seup in the mixins file.

If we do not denote a column class, the grid default to a column span of 1.

Examples

Default styling

Content

.grid--no-gutter

If we want to remove all gaps from the content

Content

<div class="mgn--T mgn--B">
<div class="grid [modifier class]">
<div class="grid__col grid__col-lg-3 bg-grey-1 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-2 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-3 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-4 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-5 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-6 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-1 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-2 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-3 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-4 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-5 pad">Content</div>
<div class="grid__col grid__col-lg-3 bg-grey-6 pad">Content</div>
</div>
</div>

Source: src/postcss/Common/_hide.css, line 1

2.12 Hide

Classes to allow us to show or hide block elements at certain pre-defined breakpoints.

NOTE: This assumes display:block - in order to hide a flex or inline-block element, we must either apply the hide class to a wrapper element (either created specifically for this, or a parent element that is already a block element)

Examples

Default styling

.hide--until-sm

button is hidden UNTIL we hit the sm viewport size.

.hide--until-md

button is hidden UNTIL we hit the md viewport size.

.hide--until-lg

button is hidden UNTIL we hit the lg viewport size.

.hide--until-xl

button is hidden UNTIL we hit the xl viewport size.

.hide--after-sm

button is hidden AFTER we hit the sm viewport size.

.hide--after-md

button is hidden AFTER we hit the md viewport size.

.hide--after-lg

button is hidden AFTER we hit the lg viewport size.

.hide--after-xl

button is hidden AFTER we hit the xl viewport size.

<div class="pad bg-grey-4">
<div class="hide [modifier class]">
<button class="btn btn--brand-1">Button</button>
</div>
</div>

Source: src/postcss/Common/_hovers.css, line 2

2.13 Hovers

Our base css-grid layout for responsive design.

12-column grid and be used as a layout skeleton for an entire page, or within / combined with other elements for finer content control.

Combining column classes inside the grid container allows us to control the column's span based on pre-determined breakpoints as seup in the mixins file.

If we do not denote a column class, the grid default to a column span of 1.

Examples