Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

The helpless developer's guide to InuitCSS

Demystifying the InuitCSS experience.

The official guide makes some big assumptions when it comes to explaining how to use the latest, ultra-modular version of InuitCSS. This document attempts to expose the documentation in a way that is easier to understand.

Philosophy

InuitCSS is based on the Inverted Triangle philiosphy of CSS inheritence, an attempt to express best practice in large-scale web projects. The rules at the top should be extremely generic, while those at the bottom should be ultra-specific overrides.

  • Settings: Global variables, site-wide settings, config switches, etc.
  • Tools: Site-wide mixins and functions.
  • Generic: Low-specificity, far-reaching rulesets (e.g. resets, normalise.css, box-sizing).
  • Base: Unclassed HTML elements (Directly selects element typs e.g. a {}, blockquote {}, address {}).
  • Objects: Objects, abstractions, and design patterns (e.g. .media {}). Cosmetic-free.
  • Components: Discrete, complete chunks of UI (e.g. .carousel {}). Cosmetically-designed components. This is the one layer that inuitcss doesn’t get involved with.
  • Trumps: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .hidden {}).

These links might shed some light on the whole thing:

Practical

InuitCSS isn't like Bootstrap or Zurb Foundation. It won't give you an out-of-the-box layout, or nicely styled buttons. It's a bunch of helper functions, mixins and classes, written in Sass, that will help you to build your own systems.

Modules

InuitCSS is increadibly modular and has all documentation inline. While this means that you only ever pull in what you need, and there's information inline, it means that getting a high-level overview is extremely frustrating. This guide attempts to address that.

The following list breaks things up according to the inverted triangle philosophy, but notice that each module is prefixed with something like inuit-defaults. This is a bower or npm package name. A bower or npm package might contain more than one module. Then after the '/' in each group is the triangle stack level, e.g. settings.xxxxxx, detailing where in the triangle it affects, and, after the '.', the effect name nnnnnn.default, describing what it does.

So, inuit-tools-widths/tools.widths belongs to the inuit-tools-widths package, affects the tools layer of the triangle and provides widths functionality.

Meanwhile, inuit-page/base.page belongs to the inuit-page package, affects the base layer and provides functionality that deals with a page.

Module documentation

Installation

You get an initial install of InuitCSS going via the Inuit Starter Kit:

$ bower install --save-dev inuit-starter-kit

This will install several of the required modules that are essential to any InuitCSS project.

You'll then need to import the following into your build system's main Sass file:

// SETTINGS
// Global variables, site-wide settings, config switches, etc.
@import "bower_components/inuit-defaults/settings.defaults";

// TOOLS
// Site-wide mixins and functions.
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";

// GENERIC
// Low-specificity, far-reaching rulesets (e.g. resets, normalise.css, box-sizing).
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-box-sizing/generic.box-sizing";

// BASE
// Unclassed HTML elements (Directly selects element typs e.g. a {}, blockquote {}, address {}).
@import "bower_components/inuit-page/base.page";

// OBJECTS
// Objects, abstractions, and design patterns (e.g. .media {}). Cosmetic-free.

// COMPONENTS
// Discrete, complete chunks of UI (e.g. .carousel {}). Cosmetically-designed components. This is the one layer that inuitcss doesn’t get involved with.

// TRUMPS
// High-specificity, very explicit selectors. Overrides and helper classes (e.g. .hidden {}).

It's a really great idea to break your components into the ITCSS layers as you go along, as in the above @import example. It will help you realize what layer you're working at, and be a constant reminder as to what each layer does.

About

Demystifying the InuitCSS experience

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.