Kitchen Sink

A list of Inuit.css component examples cobbled together from the css documention and Inuit.css's JsFiddle examples. The page contains minimal styling so components are pretty much as is from Inuit. Code used from v5.1.0 branch used.

Objects

Base

Generics

Arrows

It is a common design treatment to give an element a triangular points-out arrow, we typically build these with CSS. These following classes allow us to generate these arbitrarily with a mixin

Top

@include arrow(top, {location}, $color)

Left

Center

Right

Right

@include arrow(right, {location}, $color)

Top

Center

Bottom

Bottom

@include arrow(bottom, {location}, $color)

Left

Center

Right

Left

@include arrow(left, {location}, $color)

Top

Center

Bottom

Beautons

Button Test Sizes

Button Small Button Large Button Huge Button Full Button

Font Sizes

Alpha Beta Gamma Natural

Button Functions

Primary Secondary Tertiary

Button Actions

Positive Negative Inactive

Button Styles

Soft Hard

Block List

Default

Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`

  1. Home
  2. About
  3. The Board
  4. Directors

Path

For denoting a path-like structure, GitHub style

  1. inuit.css
  2. inuit.css
  3. partials
  4. objects

Custom

Assign a delimiter on the fly through a data attribute

  1. Home
  2. About
  3. The Board
  4. Directors
  1. Home
  2. About
  3. The Board
  4. Directors

Columns

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

FlexBox

Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate it

FlexBox Default

Welcome to
inuit.css logo

FlexBox with Grids

One Quarter

Three Quarters

Flyout

Flyouts are pieces of content that fly out of a parent when said parent is hovered. They typically appear bottom-left of the parent.

Flyout Regular - From the top, flush left

Hover Me

Lorem

Ipsum

Flyout Alternative - Left, Flush Top

Hover Me

Lorem

Ipsum

GreyBox - For Prototyping

Quickly throw together greybox wireframes. Use in conjunction with other inuit.css objects to create simple greybox prototypes

Generic

Greybox Sizes

Small
Medium
Large
Header
Gigantic

Grids

Fluid and nestable grid system

Regular

1

2

3

4

5

6

7

Reversed

1

2

3

4

5

6

7

Full

1

2

3

4

5

6

7

Center

1

2

3

4

5

6

7

Images

Non-fluid images if you specify `width` and/or `height` attributes.

Round Images

Image placement variations

`.img--right`, `.img--left` and `.img--center`

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Island

Simple, boxed off content

Island

I am boxed off.

Islet

Just like `.island`, only smaller

I am boxed off.

Add hover behaviour to only selected items within links

Log in to your account.

Lozenges

Create pill- and lozenge-like runs of text. Pills have fully rounded ends. lozenges have only their corners rounded

This here is a pill!

This here is also a lozenge!

Marginalia

Marginalia are, per definition, notes in the margin of a document. The `marginalia__body` class can be applied to all kinds of content, like text or images, and is joined by a width class

This is some marginalia content.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit

Matrix

Create a grid of items out of a single list

  • Lorem
  • Ipsum dolor
  • Sit
  • Amet
  • Consectetuer

Media

Place any image- and text-like content side-by-side

Regular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Reversed

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction When used on an `ol` or `ul`, this class throws the list into horizontal mode

Default

Stacked

`.nav--stacked` extends `.nav` and throws the list into vertical mode

Banner

`.nav--banner` extends `.nav` and centres the list

Block

Give nav links a big, blocky hit area. Extends `.nav`

Fit

Force a nav to occupy 100% of the available width of its parent. Extends `.nav`

Keywords

Make a list of keywords. Extends `.nav`

Options

Link-group nav, used for displaying related options. Extends `.nav--block` but could also extend `.nav--fit`. Extend with colours and 'current states' in your theme stylesheet.

Pagination

Basic pagination object, extends `.nav`. Requires some funky commenting to collapse any white-space caused by the `display:inline-block;` rules.

  1. First
  2. Previous
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. Next
  9. Last

Rule

Horizontal rules, extend `hr`.

Default

Dotted

Dashed

Ornamental Rules

Ornamental rules. Places a § over the rule.

Pass in an arbitrary ornament though a data attribute

Split

Simple split item for creating two elements floated away from one another

Burger and fries
£5.99
Fillet steak
£19.99
Ice cream
£2.99
  1. 1st place Bob
  2. 2nd place Lilly
  3. 3rd place Ted
​

Stats

Simple object to display key-value statistic-like information

Tweets
27,740
Following
11,529
Followers
12,105

Tables

We have a lot at our disposal for making very complex table construct

  • `.table--bordered` - bordered table
  • `.table--striped` - striped table
  • `.table--data` - make type smaller to read data
Foo Bar
Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Dolor 32.210 Lorem
Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Dolor 12.117 Lorem

This or This

Simple options object to provide multiple choices. The `.this-or-this__this` and `.this-or-this__or` objects can be sized using the grid-system classes

Free or Pro

Forms

Text Inputs

Instead of a `[type]` selector for each kind of form input, we just use a class to target any/every one

Groups of Form Fields

Group sets of form fields in a list with `.form-fields`

Labels

Define a `.label` class as well as a `label` element. This means we can apply label-like styling to meta-labels for groups of options where a `label` element is not suitable

  • Select an option below:

Label - Extra Help

Extra help text in `label`s

Groups of Checkboxes and Radios

  • How would you like to be contacted?
  • How often would you like to be contacted?

Spoken Forms

Spoken forms are for forms that read like spoken word

  • Hello, my is . My home is

Focus Help

Extra help text displayed after a field when that field is in focus. We leave the help text in the document flow and merely set it to `visibility:hidden;`. This means that it won't interfere with anything once it reappears.

.edu emails only

Typography

Headings

When we define a heading we also define a corresponding class to go with it. This allows us to apply, say, `class="alpha"` to a `h3`; a double-stranded heading hierarchy.

  1. h1 - .alpha

  2. h2 - .beta

  3. h3 - .gamma

  4. h4 - .delta

  5. h5 - .epsilon

  6. h6 - .zeta

Mastheads

  1. .giga

  2. .mega

  3. .kilo

Small Print

  1. .smallprint

  2. .milli

  3. .micro

Paragraphs

Default

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Introductory Text

The `.lede` class is used to make the introductory text (usually a paragraph) of a document slightly larger.

Senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Quotes

Inline quotes

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Blockquotes

Insanity: doing the same thing over and over again and expecting different results.

Albert Einstein

Lists

Ordered List

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Have a numbered `ul` without the semantics implied by using an `ol`.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Code


#header h1 a {
	display: block;
	width: 300px;
	height: 80px;
}

Helper

A series of helper classes to use arbitrarily. Only use a helper class if an element/component doesn’t already have a class to which you could apply this styling, e.g. if you need to float `.main-nav` left then add `float:left;` to that ruleset as opposed to adding the `.float--left` class to the markup.

A lot of these classes carry `!important` as you will always want them to win out over other selectors.

Add/remove Floats

Float none

Float right

Float left

Text aligment

Text left

Text center

Text right

Font weights

Weight light

Weight normal

Weight semibold

Add/Remove margins

Add Full Margins

Adds `$base-spacing-unit` margins

  • .push
  • .push--top
  • .push--right
  • .push--bottom
  • .push--left
  • .push--ends
  • .push--sides
Push Left
Push Sides

Add Half Margins

Adds `$half-spacing-unit` margins

  • .push-half
  • .push-half--top
  • .push-half--right
  • .push-half--bottom
  • .push-half--left
  • .push-half--ends
  • .push-half--sides
Push Half Left
Push Half Sides

Remove Margins

Takes away margins

  • .flush
  • .flush--top
  • .flush--right
  • .flush--bottom
  • .flush--left
  • .flush--ends
  • .flush--sides
Flush Left
Flush Sides

Add/Remove paddings

Add Full Paddings

Adds `$base-spacing-unit` paddings

  • .soft
  • .soft--top
  • .soft--right
  • .soft--bottom
  • .soft--left
  • .soft--ends
  • .soft--sides
Soft Left
Soft Sides

Add Half Padding

Adds `$half-spacing-unit` padding

  • .soft-half
  • .soft-half--top
  • .soft-half--right
  • .soft-half--bottom
  • .soft-half--left
  • .soft-half--ends
  • .soft-half--sides
Soft Half Left
Soft Half Sides

Remove Padding

Takes away padding

  • .hard
  • .hard--top
  • .hard--right
  • .hard--bottom
  • .hard--left
  • .hard--ends
  • .hard--sides
Hard Left
Hard Sides

Full bleed

Pull items full width of `.island` parents.

Pull items full width of `.islet` parents.

Informative

Add a help cursor to any element that gives the user extra information on `:hover`.

Help? (Hover me)

Muted

Mute an object by reducing its opacity.

Without `.muted` With `.muted`

Go

Add a right-angled quote to links that imply movement

Read more

Caps

Apply capital case to an element (usually a `strong`).

CAPITALIZE

Accessibility

Hide content off-screen without resorting to `display:none;`, also provide breakpoint specific hidden elements. Classes include:

  • .accessibility
  • .visuallyhidden
  • .accessibility--palm
  • .visuallyhidden--palm
  • .accessibility--lap
  • .visuallyhidden--lap
  • .accessibility--lap-and-up
  • .visuallyhidden--lap-and-up
  • .accessibility--portable
  • .visuallyhidden--portable
  • .accessibility--desk
  • .visuallyhidden--desk
  • .accessibility--desk-wide
  • .visuallyhidden--desk-wide

Mixins

Typography

Font Size

Create a fully formed type style (sizing and vertical rhythm) by passing in a single value.

@include font-size(10px);
@include font-size(10px, $line-height: false);

Headings

Style any number of headings in one fell swoop

@include headings(1, 3){
    color:#BADA55;
}

CSS3

Vendor

Create vendor-prefixed CSS in one go

@include vendor(border-radius, 4px);

Keyframes

Create CSS keyframe animations for all vendors in one go

.foo{
    @include vendor(animation, shrink 3s);
}

@include keyframe(shrink){
    from{
        font-size:5em;
    }
}

Truncate

Force overly long spans of text to truncate

@include truncate(100%);

Retina

Media query for targetting retina devices

.foo{
    background-image:url(1x.png);
    @include retina(){
        background-image:url(2x.png);
    }
}

CSS Arrows

This mixin creates a CSS arrow on a given element. We can have the arrow appear in one of 12 locations, thus:

      01    02    03
   +------------------+
12 |                  | 04
   |                  |
11 |                  | 05
   |                  |
10 |                  | 06
   +------------------+
      09    08    07

You pass this position in along with a desired arrow color and optional border color, for example:

@include arrow(top, left, red)

for just a single, red arrow, or:

@include arrow(bottom, center, red, black)

which will create a red triangle with a black border which sits at the bottom center of the element. Call the mixin thus:

.foo{
   background-color:#BADA55;
   border:1px solid #ACE;
   @include arrow(top, left, #BADA55, #ACE);
}

Media Query Mixin

It’s not great practice to define solid breakpoints up-front, preferring to modify your design when it needs it, rather than assuming you’ll want a change at ‘mobile’. However, as inuit.css is required to take a hands off approach to design decisions, this is the closest we can get to baked-in responsiveness. It’s flexible enough to allow you to set your own breakpoints but solid enough to be frameworkified.

We define some broad breakpoints in our vars file that are picked up here for use in a simple media query mixin. Our options are:

  • palm
  • lap
  • lap-and-up
  • portable
  • desk
  • desk-wide

Not using a media query will, naturally, serve styles to all devices.

@include media-query(palm){ [styles here] }

This is not an official Inuit.css page. Cobbled together by Pat O'Callaghan at Terabyte Interactive, Auckland, New Zealand. Page created with Docpad, Sass and Inuit.css (obviously!).
Fork me on GitHub