Exemples de pattern dans Inuit

Sources fiddle Autres sources

Arrow : pour assigner une flèche à un objet

Block-list : liste de contenu

http://jsfiddle.net/inuitcss/hR57q

Breadcrumb : fil d'ariane

http://jsfiddle.net/inuitcss/rkAY9

Standard

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

Chemin

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

En modifiant le séparateur

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

Columns : pour afficher du texte en plusieurs colonnes

http://jsfiddle.net/inuitcss/E26Yd

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 : flex box

http://jsfiddle.net/inuitcss/ufUh2

Welcome to
kitten

Possible de fixer la taille : ici 3/4

Tandis que là il y a seulement 1/4 pour écrire

Flyout : contenu qui s'affiche en popup

http://jsfiddle.net/inuitcss/B52HG

Flyout vers le bas

Foo

Lorem

Ipsum

Flyout de côté

Hover Me

Lorem

Ipsum

Graybox

http://jsfiddle.net/inuitcss/qCXfh

Header
Masthead
Content
Ad
Ad
Sub content
Ad
Footer

Icon-text : espace devant ou après une icône dans un lien

http://jsfiddle.net/inuitcss/Q6Lbf

Foo bar

Foo bar

Island : une zone délimitée

http://jsfiddle.net/inuitcss/u8pV3

http://csswizardry.com/2011/10/the-island-object

Contenu isolé dans une boîte avec un padding de largeur basic-spacing-unit

I am boxed off.

Contenu isolé dans une boîte avec un padding plus réduit de largeur half-spacing-unit

I am boxed off.

Link-complex : pour un effet hover sur une partie seulement d'un lien

http://jsfiddle.net/inuitcss/rt9M3

Log in to your account.

Log in

Lozenges : pill and lozenge

http://jsfiddle.net/inuitcss/N3pGm

This here is a pill!

This here is also a pill!

This here is a lozenge!

This here is also a lozenge!

Marginalia : en marge de document

http://jsfiddle.net/inuitcss/AemkH

Passez à une résolution de desktop pour visualiser la marge

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.

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

Matrix : une grille d'éléments à partir d'une liste

http://jsfiddle.net/inuitcss/Y2zrU

Multi-list : une grille d'éléments à partir d'une liste mais sans padding

Media : objet média

http://jsfiddle.net/inuitcss/cf4Qs

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

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

Nav : list of links

http://jsfiddle.net/inuitcss/Vnph4

Default

Stacked

Banner

Block

Fit

Keywords

Options : group nav

http://jsfiddle.net/inuitcss/vwfaf

Pagination : extends nav for pagination

http://jsfiddle.net/inuitcss/9Y6PU

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

Split : split title/value

http://jsfiddle.net/inuitcss/9gZW7

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 : display key-value

http://jsfiddle.net/inuitcss/Bpwu6

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

This_or_this : option

http://jsfiddle.net/inuitcss/R3sks

Free or Pro

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.

or

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.

or

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.