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 is from the v5.1.0 branch.

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 Sizes






Font Sizes





Button Functions




Button Actions




Button Styles



Block List

  • Foo
  • Bar
  • Baz
  • Foo

Default

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


Path

For denoting a path-like structure, GitHub style


Custom

Assign a delimiter on the fly through a data attribute



Columns

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


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


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

WARNING!: As Inuit.css grids are positioned using display: inline-block; you must strip whitespace from between .grid__item elements to get the grids to properly line up. See here for more information. The recommended way to do this is to place comments between .grid__item elements.

Regular

1

2

3

4


Reversed

1

2

3

4


Full

1

2

3

4


Center

1

2

3

4


Images

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


Image Sizes

Keep your images on your baseline. Please note, these will not work too nicely with fluid images and will distort when resized below a certain width. Use with caution.

.img--short


.img--medium


.img--tall


Image placement variations

.img--right


.img--left


.img--center


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.


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

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` (or .lead) 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 and .float--left

Float none

Float right

Float left


Text aligment

.text--left, .text--center and .text--right

Text left

Text center

Text right


Font weights

.weight--light, .weight--normal and .weight--semibold

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

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

.informative

Help? (Hover me)

Muted

Mute an object by reducing its opacity.

.muted

Without `.muted` With `.muted`

Go

Add a right-angled quote to links that imply movement

.go

Read more

Caps

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

.caps

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.

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