Zikomo Style Guide

Zikomo Style Guide

Source: src/postcss/Common/Init/_base.css, line 1

2 Common

Classes found in the common postcss directory.

When creating an application's css file, we should select for compilation only the css files require for the app.

This allows us to ensure we are keeping the traget compiled css file as small as possible

For example, an application might be a very small one page splash, and might only require the most basic of class options.

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

2.3 Breadcrumbs

Classes for breadcrumb navigation

Examples

Default styling

.breadcrumbs--dash

Displays a dash instead of the default slash

.breadcrumbs--chevron

Displays a chevron instead of the default slash

.breadcrumbs--comma

Displays a comma instead of the default slash

<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

Optional Header
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.

<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

<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>

Example

<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

<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

<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 Striped content
Zebra Striped content
Zebra Striped content

.zebra--grey-1

Odd: Grey 1, Even: Grey 2

Zebra Striped content
Zebra Striped content
Zebra Striped content
Zebra Striped content

.zebra--grey-2

Odd: Grey 2, Even: Grey 3

Zebra Striped content
Zebra Striped content
Zebra Striped content
Zebra Striped content

.zebra--grey-3

Odd: Grey 3, Even: Grey 4

Zebra Striped content
Zebra Striped content
Zebra Striped content
Zebra Striped content

.zebra--grey-4

Odd: Grey 4, Even: Grey 5

Zebra Striped content
Zebra Striped content
Zebra Striped content
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

.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

.carousel--tn

Thumbnail carousel typically used for Flickity AsNavFor.

<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
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content

.grid--no-gutter

If we want to remove all gaps from the content

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
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

Default styling

.hover--scale

scales entire element slightly

.hover--shift-t

shifts entire element up slightly

.hover--shift-b

shifts entire element up slightly

.hover--shift-l

shifts entire element up slightly

.hover--shift-r

shifts entire element up slightly

.hover--shift-t.hover--xfast

shifts entire element up slightly

.hover--scale-up.hover--shift-t.hover--shift-r

shifts entire element up slightly

<div>
<button class="btn btn--brand-1 hover [modifier class]">
</button>
</div>

Source: src/postcss/Common/Images/_images.css, line 1

2.14 Images

Images come in two flavour, standard html tag based images, and background images.

Examples

Default styling

Image Tag

.img--max-md

base max height

Image Tag

<div>
<div><h4>Image Tag</h4></div>
<div><img src='kss-assets/images/demo.jpg' class="img [modifier class]" / ></div>
</div>

Source: src/postcss/Common/Images/_images.css, line 29

2.14.2 Background Images

Background Image Class Modifier can be combined with additional modifiers to give some basic control.

Examples

Default styling

.img--min-sm

base min height small

.img--min-md

base min height medium

.img--min-lg

base min height large

.img--min-xl

base min height extra large

.img--min-md.img--bg-center

Position center

<div class="img img--bg [modifier class]" style='background-image: url("kss-assets/images/demo.jpg");'>
</div>

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

2.15 Inputs

Base classes for common inputs.

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

2.15.1 Switch

Switch defaults

Example

<div>
<div class="switch">
<input type="checkbox" name="sw" id="sw1" checked>
<label for="sw1">Switch Label</label>
</div>
<div class="switch switch--brand-1">
<input type="checkbox" name="sw" id="sw2" checked>
<label for="sw2">Switch Label</label>
</div>
<div class="switch switch--positive">
<input type="checkbox" name="sw" id="sw3" checked>
<label for="sw3">Switch Label</label>
</div>
<div class="switch switch--negative">
<input type="checkbox" name="sw" id="sw4" checked>
<label for="sw4">Switch Label</label>
</div>
</div>

Source: src/postcss/Common/Inputs/_base.css, line 115

2.15.2 Input Item

This is the preferred method for adding inputs. This allows for modifier classes to control lables and any other elements we want to add.

We wrap them in a custom tag called 'input-item' which helps for more readable code.

For horizontal layout, we wrap everything inside an input-group class. This will make any other elements, such as a button, align to flex end.

Examples

Default styling

.input-item--sm

small inputs

.input-item--lg

large inputs

<div class="input-group">
<div class="input-item [modifier class]">
<label for="text-input">Text Input Label</label>
<input type="text" placeholder="text input" id="text-input"  />
</div>
<div class="input-item [modifier class]">
<label for="number-input">Qty</label>
<input type="number" min="1" max="10" value="2" id="number-input" />
</div>
<div class="input-item [modifier class]">
<label for="date-input">Date</label>
<input type="date" min="1" max="10" value="2" id="date-input" />
</div>
<div class="input-item [modifier class]">
<label for="sel">Date</label>
<div class="select">
 <select id="sel">
        <option value="February 2024" selected>February 2024</option>
        <option value="February 2024">February 2024</option>
        <option value="February 2024">February 2024</option>
    </select>
</div>
</div>
<div>
<button class="btn btn--sm">button</button>
</div>
<div>
<button class="btn">button</button>
</div>
<div>
<button class="btn btn--lg">button</button>
</div>
</div>

Source: src/postcss/Common/Inputs/_base.css, line 10

2.15.3 Defaults

The default inputs should ideally be placed inside wrappers for better layout and control, however, this is how they appear by default.

Example

<div>
<label for="text-input">Text Input Label</label>
<input type="text" placeholder="text input" id="text-input" />
<label for="number-input">Qty</label>
<input type="number" min="1" max="10" value="2" id="number-input" />
<label for="date-input">Date</label>
<input type="date" min="1" max="10" value="2" id="date-input" />
<label for="date-input">Date</label>
 <select>
        <option value="February 2024" selected>February 2024</option>
        <option value="February 2024">February 2024</option>
        <option value="February 2024">February 2024</option>
    </select>
  <button class="btn">a button</button>
</div>

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

2.16 Jumbo

Typically used for full screen hero content.

Examples

Default styling

Jumbo Content Heading

Jumbo content subheading

.jumbo--underlay

Adds a translucent underlay for better text readability.

Jumbo Content Heading

Jumbo content subheading

.jumbo--pad

Adds padding

Jumbo Content Heading

Jumbo content subheading

.jumbo--underlay.jumbo--pad

with repsonsive padding and a translucent underlay for better text readability

Jumbo Content Heading

Jumbo content subheading

.jumbo--underlay.jumbo--underlay-t-b.jumbo--pad

Combined padding and underlay with top to bottom gradient

Jumbo Content Heading

Jumbo content subheading

.jumbo--underlay.jumbo--underlay-l-r.jumbo--pad

Combined padding and underlay with left to right gradient

Jumbo Content Heading

Jumbo content subheading

.jumbo--underlay.jumbo--underlay-b-t.jumbo--pad

Combined padding and underlay with bottom to top gradient

Jumbo Content Heading

Jumbo content subheading

.jumbo--underlay.jumbo--underlay-t-b.jumbo--pad.jumbo--min-xxxl

Combined padding and underlay with top to bottom gradient, min height xxxl

Jumbo Content Heading

Jumbo content subheading

<div class="jumbo [modifier class]" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="jumbo__content">
<h1 class="ts-dark"><strong>Jumbo Content Heading</strong></h1>
<h2 class="ts-dark">Jumbo content subheading</h2>
</div>
</div>

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

2.17 Layout

We have various classes to help control general layouts, featuring the most common CSS parameters.

By combining multiple classes we have a good deal of control building the desired layout directly in our component html.

Source: src/postcss/Common/_layout.css, line 81

2.17.1 Flex

For quick flex layouts.

Examples

Default styling

Flex Item 1
Flex Item 2
Flex Item 3

.flex--no-wrap

forces no wrapping

Flex Item 1
Flex Item 2
Flex Item 3

.flex--is-wrap

adds wrapping

Flex Item 1
Flex Item 2
Flex Item 3

.flex--fill

fills up all available space

Flex Item 1
Flex Item 2
Flex Item 3

.flex--distribute

spaces items equally

Flex Item 1
Flex Item 2
Flex Item 3

.flex--justify-end

justifies items to the end

Flex Item 1
Flex Item 2
Flex Item 3

.flex--has-gap

adds a 16px gap

Flex Item 1
Flex Item 2
Flex Item 3

.flex--has-md-gap

adds a 24px gap

Flex Item 1
Flex Item 2
Flex Item 3

.flex--has-lg-gap

adds a 32px gap

Flex Item 1
Flex Item 2
Flex Item 3

.flex--has-xl-gap

adds a 40px gap

Flex Item 1
Flex Item 2
Flex Item 3

.flex--has-xxl-gap

adds a 48px gap

Flex Item 1
Flex Item 2
Flex Item 3
<div class="flex [modifier class] full-width bg-brand-2">
  <div class="bg-brand-1 color-grey-0 pad">Flex Item 1</div>
  <div class="bg-brand-1 color-grey-0 pad">Flex Item 2</div>
  <div class="bg-brand-1 color-grey-0 pad">Flex Item 3</div>
</div>

Source: src/postcss/Common/_layout.css, line 465

2.17.2 Margins

Full class based non-responsive margin control.

The default size is 16px, with two modifiers to smaller and larger sizes.

Examples

Default styling

Content

.mgn-sm

8px margin - non-responsive

Content

.mgn-lg

24px margin - non-responsive

Content
<div class="bg-grey-3 border--all">
<div class="mgn bg-grey-0 [modifier class]">
Content
</div>
</div>

Source: src/postcss/Common/_layout.css, line 417

2.17.3 Responsive Margins

This class adds fully responsive margin that changes based on a pre-determined breakpoint.

Classes can be combined for full padding control

Examples

Default styling

Content

.Rmgn

Fully responsive margin that will change it's size based on vewport size.

Content

.Rmgn--t

Top margin only that will change it's size based on vewport size

Content

.Rmgn--b

Bottom margin only that will change it's size based on vewport size

Content

.Rmgn--l

Left margin only that will change it's size based on vewport size

Content

.Rmgn--r

Right margin only that will change it's size based on vewport size

Content

.Rmgn--r.Rmgn--l

Combined left and right margin that will change it's size based on vewport size

Content
<div class="bg-grey-3 border--all">
<div class="bg-grey-0 [modifier class]">
Content
</div>
</div>

Source: src/postcss/Common/_layout.css, line 323

2.17.4 Padding

Full class based non-responsive padding control.

The default size is 16px, with two modifiers to smaller and larger sizes.

.pad-sm - 8px padding - non-responsive .pad-lg - 24px padding - non-responsive

Example

Content
<div class="bg-grey-3 border--all">
<div class="pad bg-grey-0 ">
Content
</div>
</div>

Source: src/postcss/Common/_layout.css, line 274

2.17.5 Responsive Padding

This class adds fully responsive padding that changes based on a pre-determined breakpoint.

Classes can be combined for full padding control

Examples

Default styling

Content

.Rpad

Full Padding

Content

.Rpad--t

Top padding only

Content

.Rpad--b

Bottom padding only

Content

.Rpad--l

Left padding only

Content

.Rpad--r

Right padding only

Content

.Rpad--r.Rpad--l

Combined left and right padding

Content
<div class="bg-grey-3 border--all">
<div class="bg-grey-0 [modifier class]">
Content
</div>
</div>

Source: src/postcss/Common/_layout.css, line 564

2.17.6 Absolute Positioning

Absolute positioning classes.

If no modifiers are added, top left is assumed

Examples

Default styling

Absolute

.abs--t

top

Absolute

.abs--r

right

Absolute

.abs--b

bottom

Absolute

.abs--l

left

Absolute

.abs--c

center (horizontal)

Absolute

.abs--cv

center (vertical)

Absolute

.abs--c.abs--cv

Combined center horizontal and vertical

Absolute

.abs--t.abs--b

top and bottom

Absolute

.abs--b.abs--r

combined bottom and right

Absolute

.abs--b.full-width

combined bottom with .full-width class to fill parent content

Absolute
<div class="relative bg-brand-1" style="height:200px">
<div class="abs bg-brand-2 color-grey-0 pad [modifier class]">
Absolute
</div>
</div>

Source: src/postcss/Common/Lists/_text-list.css, line 1

2.19 Lists

Various options for displaying text based lists.

Source: src/postcss/Common/Lists/_text-list.css, line 10

2.19.1 Text Lists

General text List classes.

Examples

Default styling

  • Item 1
  • Item 2
  • Item 3
  • Item 4

.text-list--horizontal

Show left-to-right

  • Item 1
  • Item 2
  • Item 3
  • Item 4

.text-list--checkmark

Adds a font icon psuedo class.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

.text-list--checkmark-round-green

Adds a rounded checkmark

  • Item 1
  • Item 2
  • Item 3
  • Item 4

.text-list--horizontal.text-list--has-divider

Combination to show on one line with a default divider psuedo class.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

.text-list--horizontal.text-list--has-divider-slash

Displays inline with a slash divider psuedo class.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="text-list [modifier class]">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

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

2.20 Loaders

Various loading classes.

Example

<div>
<div class="loading mgn--b ">
    <div class="loading__animation-1">
    </div>
</div>
<div class="loading  mgn--b ">
    <div class="loading__animation-2">
    </div>
</div>
<div class="loading  mgn--b ">
    <div class="loading__animation-3">
    </div>
</div>
<div class="loading  mgn--b ">
    <div class="loading__animation-4">
    </div>
</div>
 </div>

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

2.21 Modal

Basic Modal Example with tabbale focus trap. Modal can be closed via the close button, by clicking outside, or by pressing 'Escape'.

The modal__body is REQUIRED and will auto-size based on the content inside. If the size extends beyond the modal's height, it will auto scroll.

Examples

Default styling

***Important***

for blazor apps, where we add a modal to the DOM on a click, we must ensure that the modal has a class modifier of 'modal--open'. This is because the modal class has been created to allow for content already in the DOM to be 'modalized'

<div>
<div class="modal modal--animate-bottom" id="custom-modal">
    <div class="modal__container">
        <div class="modal__header flex flex--distribute flex--has-gap pad">
        <h4>Modal Optional Header</h4>
        <button class="btn btn--animate-close" data-modal-hide="custom-modal"><i class="icon-cross"></i></button>
        </div>
            <div class="modal__body">
                            <div>
                            <div class="img img--bg img--min-lg" style='background-image: url("kss-assets/images/demo.jpg");'>
                                <div class="abs pad-sm bg-brand-2 color-grey-0">Absolute Tag</div>
                            </div>
                            <article class="article pad">
                                <h2>Content Heading</h2>
                                <div>
                                <input type="Text" class="full-width" placeholder="input 1" />
                                </div>
                                <div>
                                <input type="Text" class="full-width" placeholder="input 2" />
                                </div>
                                <div>
                                <input type="Text" class="full-width" placeholder="input 3" />
                                </div>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </article>
                            </div>
            </div>
        <div class="modal__footer flex flex--distribute pad">
        <h4>Modal Optional Footer</h4>
        </div>
        </div>
    </div>
</div>
<button class="open-modal" data-modal-show="custom-modal">Open Modal</div>
</div>

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

2.22 Radio

Radio Input Variations

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

2.22.1 Radio Defaults

Standard radio implementation with default font icons

Example

<div>
<div class="rad">
<input type="radio" name="rg" id="r1" checked>
<label for="r1">Radio</label>
</div>
<div class="rad rad--brand-1">
<input type="radio" name="rg" id="r2">
<label for="r2">Radio</label>
</div>
<div class="rad rad--positive">
<input type="radio" name="rg" id="r3">
<label for="r3">Radio</label>
</div>
<div class="rad rad--negative">
<input type="radio" name="rg" id="r4">
<label for="r4">Radio</label>
</div>
</div>

Example

<div>
<div class="flex flex--has-gap">
  <div class="rad rad--label-bottom">
  <input type="radio" name="rad-lbl-bottom" id="rad-lbl-bottom-1" checked>
  <label for="rad-lbl-bottom-1">Radio</label>
  </div>
  <div class="rad rad--label-bottom">
  <input type="radio" name="rad-lbl-bottom" id="rad-lbl-bottom-2">
  <label for="rad-lbl-bottom-2">Radio</label>
  </div>
</div>
</div>

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

2.22.3 Radios - Label on Top

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

Example

<div class="flex flex--has-gap">
  <div class="rad rad--label-top">
  <input type="radio" name="rad-lbl-top" id="rad-lbl-top-1" checked>
  <label for="rad-lbl-top-1">Radio</label>
  </div>
  <div class="rad rad--label-top">
  <input type="radio" name="rad-lbl-top" id="rad-lbl-top-2">
  <label for="rad-lbl-top-2">Radio</label>
  </div>
</div>

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

2.22.4 Radios - No Icon

We can display with no icon

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

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

Example

<div>
<div class="flex flex--has-gap">
  <div class="rad rad--no-icon rad--positive">
  <input type="radio" name="rad-no-icon" id="rad-no-icon-1" checked>
  <label for="rad-no-icon-1">Radio</label>
  </div>
  <div class="rad rad--no-icon rad--positive">
  <input type="radio" name="rad-no-icon" id="rad-no-icon-2">
  <label for="rad-no-icon-2">Radio</label>
  </div>
</div>
</div>

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

2.22.5 Radios - Product Select

With the product select modifier we can make out product selections semantic and keyboard navagable

note we have two optional custom tags for use with this modifier class, product-name and product-price which when used will format the items accordingly

Example

<div>
<div class="rad rad--negative rad--product-select">
<input type="radio" name="reg2" id="re1" checked>
<label for="re1">
  <product-name>
   <strong>Not required</strong>
   </product-name>
</label>
</div>
<div class="rad rad--positive rad--product-select">
<input type="radio" name="reg2" id="re2">
<label for="re2">
    <product-name>
        <strong>Product Name</strong>
        <div><small>Product Description</small></div>
    </product-name>
    <product-price>
        $50
    </product-price>
</label>
</div>
<div class="rad rad--brand-1 rad--product-select">
<input type="radio" name="reg2" id="re3">
<label for="re3">
    <product-name>
        <strong>Product Name</strong>
        <div><small>Product Description</small></div>
    </product-name>
    <product-price>
        $50
    </product-price>
</label>
</div>
<div class="rad rad--product-select">
<input type="radio" name="reg2" id="re4">
<label for="re4">
    <product-name>
        <strong>Product Name</strong>
        <div><small>Product Description</small></div>
    </product-name>
    <product-price>
        $50
    </product-price>
</label>
</div>
</div>

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

2.22.6 Radios - Product Select v2

We can offer alternative layouts for product select

note we have two optional custom tags for use with this modifier class, product-name and product-price which when used will format the items accordingly

Example

<div class="flex">
<div class="chk chk--label-top chk--negative chk--product-select">
<input type="radio" name="reg3" id="reb1" checked>
<label for="reb1">
  <product-name>
   <strong>Not required</strong>
   </product-name>
</label>
</div>
<div class="chk chk--label-top chk--positive chk--product-select">
<input type="radio" name="reg3" id="reb2" checked>
<label for="reb2">
 <product-name>
        <strong>Product Name</strong>
        <div><small>Product Description</small></div>
    </product-name>
    <product-price>
        $50
    </product-price>
</label>
</div>
<div class="chk chk--label-top chk--brand-1 chk--product-select">
<input type="radio" name="reg3" id="reb3" checked>
<label for="reb3">
 <product-name>
        <strong>Product Name</strong>
        <div><small>Product Description</small></div>
    </product-name>
    <product-price>
        $50
    </product-price>
</label>
</div>
<div class="chk chk--label-top chk--product-select">
<input type="radio" name="reg3" id="reb4" checked>
<label for="reb4">
 <product-name>
        <strong>Product Name</strong>
        <div><small>Product Description</small></div>
    </product-name>
    <product-price>
        $50
    </product-price>
</label>
</div>
</div>

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

2.22.7 Radios - Star Icon (for rating select)

We can display with no icon

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

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

Example

<div>
<form class="star-rating">
  <input type="radio" id="star5" name="star-input" value="5" />
  <label class for="star5" title="5 stars">5 stars</label>
  <input type="radio" id="star4" name="star-input" value="4" />
  <label for="star4" title="4 stars">4 stars</label>
  <input type="radio" id="star3" name="star-input" value="3" />
  <label for="star3" title="3 stars">3 stars</label>
  <input type="radio" id="star2" name="star-input" value="2" />
  <label for="star2" title="2 stars">2 stars</label>
  <input type="radio" id="star1" name="star-input" value="1" />
  <label for="star1" title="1 star">1 star</label>
</form>
</div>

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

2.23 Ribbon

Usually used over an image

Note We must include a child tag inside of the ribbon class. This allows the ribbon to size based on the content.

Example

Optional Header
Ribbon Content
Ribbon Content
Ribbon Content
Ribbon Content
Ribbon Content
Ribbon Content
Ribbon Content
Ribbon Content
Content
<div class="card">
<div class="card__header">Optional Header</div>
<div class="img card__img img--bg min-h-md" style='background-image: url("kss-assets/images/demo.jpg");'>
    <div class="abs">
    <div class="ribbon"><span>Ribbon Content</span></div>
    <div class="ribbon ribbon--brand-2"><span>Ribbon Content</span></div>
    <div class="ribbon ribbon--grey-0"><span>Ribbon Content</span></div>
    <div class="ribbon ribbon--positive"><span>Ribbon Content</span></div>
    <div class="ribbon ribbon--negative"><span>Ribbon Content</span></div>
    <div class="ribbon ribbon--warning"><span>Ribbon Content</span></div>
    </div>
    <div class="abs abs--r">
    <div class="ribbon ribbon--sm ribbon--positive ribbon--r"><span>Ribbon Content</span></div>
    <div class="ribbon ribbon--r"><span>Ribbon Content</span></div>
    </div>
</div>
<div class="card__body pad">Content</div>
<div class="card__footer">Optional Footer</div>
</div>

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

2.24.1 Box Shadows (Dark)

For quick box shadows we can use.

Note: shadow color is defined in the barnd's color variables file. Like the greyscales, this should be derivative of the darkest brand color, adjusted with a very low saturation, so that it's almost grey, but ratains a very slight hint of the brand color.

Examples

Default styling

Box Shadow

.bs-dark-sm

Small

Box Shadow

.bs-dark-md

Medium

Box Shadow

.bs-dark-lg

Large

Box Shadow

.bs-dark-xl

Xtra Large

Box Shadow
<div class="Rpad bg-grey-1 bs-dark [modifier class]">
Box Shadow
</div>

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

2.24.2 Box Shadows (Medium)

For quick box shadows we can use.

Note: shadow color is defined in the barnd's color variables file. Like the greyscales, this should be derivative of the darkest brand color, adjusted with a very low saturation, so that it's almost grey, but ratains a very slight hint of the brand color.

Examples

Default styling

Box Shadow

.bs-medium-sm

Small

Box Shadow

.bs-medium-md

Medium

Box Shadow

.bs-medium-lg

Large

Box Shadow

.bs-medium-xl

Xtra Large

Box Shadow
<div class="Rpad bg-grey-1 bs-medium [modifier class]">
Box Shadow
</div>

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

2.24.3 Text Shadows

For quick text shadows we can use.

Note: shadow color is defined in the barnd's color variables file. Like the greyscales, this should be derivative of the darkest brand color, adjusted with a very low saturation, so that it's almost grey, but ratains a very slight hint of the brand color.

Examples

Default styling

Text Shadow

.ts-dark-sm

Small

Text Shadow

.ts-dark-md

Medium

Text Shadow

.ts-dark-lg

Large

Text Shadow
<div class="Rpad bg-grey-1">
<strong class="h1 ts-dark color-grey-0 [modifier class]">Text Shadow</strong>
</div>

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

2.25 Sizes

Some preset width and height classes in both sm-xxl and fixed rem based sizes.

These are designed primarily for image content

Source: src/postcss/Common/_size.css, line 12

2.25.1 Min Height

Mainly Used for Image / Backgroun image blocks - see card examples

Examples

Default styling

Content

.min-h-xs

Xtra Small

Content

.min-h-sm

Small

Content

.min-h-md

Medium

Content

.min-h-lg

Large

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

Source: src/postcss/Common/Steppers/_stepper.css, line 1

2.26 Steppers

Step track for form or multi-step based content.

Examples

Default styling

  1. Step Title Completed subititle
  2. Step Title Completed subititle
  3. Step Title Completed subititle
  4. Step Title Completed subititle
  5. Step Title Completed subititle

.stepper--counter

auto numbered icons

  1. Step Title Completed subititle
  2. Step Title Completed subititle
  3. Step Title Completed subititle
  4. Step Title Completed subititle
  5. Step Title Completed subititle

.stepper--squares

square icons

  1. Step Title Completed subititle
  2. Step Title Completed subititle
  3. Step Title Completed subititle
  4. Step Title Completed subititle
  5. Step Title Completed subititle

.stepper--rounded-squares

rounded square icons

  1. Step Title Completed subititle
  2. Step Title Completed subititle
  3. Step Title Completed subititle
  4. Step Title Completed subititle
  5. Step Title Completed subititle

.stepper--sm

smaller icons

  1. Step Title Completed subititle
  2. Step Title Completed subititle
  3. Step Title Completed subititle
  4. Step Title Completed subititle
  5. Step Title Completed subititle

.stepper--responsive

responsively make smaller in mobile: this is useful for a higher amount of steps

  1. Step Title Completed subititle
  2. Step Title Completed subititle
  3. Step Title Completed subititle
  4. Step Title Completed subititle
  5. Step Title Completed subititle
<ol class="stepper stepper--icons [modifier class]">
<li class="stepper__step stepper__step--complete">
    <div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
    <strong>Step Title</strong>
    <small>Completed subititle</small>
</li>
<li class="stepper__step stepper__step--complete">
    <div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
 <strong>Step Title</strong>
    <small>Completed subititle</small>
</li>
<li class="stepper__step stepper__step--active">
     <div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
 <strong>Step Title</strong>
    <small>Completed subititle</small>
</li>
<li class="stepper__step">
    <div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
     <strong>Step Title</strong>
    <small>Completed subititle</small>
</li>
<li class="stepper__step">
    <div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
    <strong>Step Title</strong>
    <small>Completed subititle</small>
</li>
</ol>

Source: src/postcss/Common/Text/_text.css, line 1

2.27 Text

Text control.

Examples

Default styling

Additional Text Sizes

.text-xs

Extra small

Additional Text Sizes

.text-sm

Small, produces the same as using the small tag

Additional Text Sizes

.text-xl

Extra Large, usually used in jumbos or banners

Additional Text Sizes

.text-xxl

XX Large, usually used in jumbos or banners

Additional Text Sizes
<div class="mgn--t mgn--b">
<div class="text [modifier class]">Additional Text Sizes</div>
</div>

Example

Long test string that should not wrap
Long test string that should not wrap
Long test string that should not wrap
Long test string that should not wrap
Long test string that should not wrap
<div class="grid">
<div >
<span class="text-no-wrap h1">Long test string that should not wrap</span>
</div>
<div>
<span class="text-no-wrap h2">Long test string that should not wrap</span>
</div>
<div>
<span class="text-no-wrap h3">Long test string that should not wrap</span>
</div>
<div>
<span class="text-no-wrap h4">Long test string that should not wrap</span>
</div>
<div>
<span class="text-no-wrap">Long test string that should not wrap</span>
</div>
</div>