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

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

Foo

Bar

Baz

Foo

Breadcrumb

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

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

Lorem Ipsum Hover Me

Flyout Alternative - Left, Flush Top

Lorem Ipsum Hover Me

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

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.

Link Complex

Add hover behaviour to only selected items within links

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

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

Foo

Bar

Baz

Boo

Stacked

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

Foo

Bar

Baz

Boo

Banner

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

Foo

Bar

Baz

Boo

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`

Foo

Bar

Baz

Boo

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.

First Previous 1 2 3 4 5 Next 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

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`

test

UK US Other test

test

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

test

Select an option below: test test test test



Label - Extra Help

Extra help text in `label`s

Card number No spaces

Groups of Checkboxes and Radios

How would you like to be contacted? By email By post By carrier pigeon

How often would you like to be contacted? Weekly Daily



Spoken Forms

Spoken forms are for forms that read like spoken word

Hello, my name is . My home country is UK US Other

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.

Email: .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.

h1 - .alpha h2 - .beta h3 - .gamma h4 - .delta h5 - .epsilon h6 - .zeta

Mastheads

.giga .mega .kilo

Small Print .smallprint .milli .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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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

Muted

Mute an object by reducing its opacity.

.muted

Go

Add a right-angled quote to links that imply movement

.go

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

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

Keyframes

### CSS3 #### Vendor Create vendor-prefixed CSS in one go

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!).