inuitcss-hex v1.0.8

Please note, this is an extension to the great framework inuitcss repo by Harry Roberts et al. It is therefore a pre-requisite of this extension to add that first.

An extension to the extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

inuitcss is a framework in its truest sense: it does not provide you with UI and design out of the box, instead, it provides you with a solid architectural baseline upon which to complete your own work.

This extension is a means of bringing partials that we commonly use into a package that can then be used ontop of inuit.

The following README assumes you have already followed the inuitcss installation and setup guide in thee inuitcss repo.

Installation

You can install inuitcss-hex in your project by using a package manager (we recommend yarn):

yarn:

yarn add inuitcss-hex --dev

npm:

npm install inuitcss-hex --save-dev

Getting Started

Assuming you have got inuitcss-hex into your project using one of the above methods, you can now include the files you need in your existing main.scss file that was setup for inuitcss.

Simply link to it the same way you link to a core inuit file, and you're set!

CSS directory structure

inuitcss follows a specific folder structure, which you should follow as well in your own CSS directory:

• /settings: Global variables, site-wide settings, config switches, etc.
• /tools: Site-wide mixins and functions.
• /generic: Low-specificity, far-reaching rulesets (e.g. resets).
• /elements: Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).
• /objects: Objects, abstractions, and design patterns (e.g. .o-layout {}).
• /components: Discrete, complete chunks of UI (e.g. .c-carousel {}). This is the one layer that inuitcss doesn’t provide code for, as this is completely your terrain.
• /utilities: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-hidden {}).

Following this structure allows you to intersperse inuitcss’ code with your own, so that your main.scss file might look something like this:

// SETTINGS
@import "settings/settings.config";
@import "node_modules/inuitcss/settings/settings.core";
@import "node_modules/inuitcss-hex/settings/settings.global";
@import "settings/settings.colors";
etc...

Interlacing partials like this is one of the real strengths of inuitcss.

Extending inuitcss

To extend inuitcss with your own code, simply create a partial in the <section>.<file> format, put it into the appropriate directory and @import it in your main.scss.

But extending inuitcss does not only mean adding your own partials to the project. Due to inuitcss’ modular nature, you can also omit those partials of inuitcss you don't need. But be aware that there are a few interdependencies between various inuitcss partials. The only partial that is indispensable for the framework to work properly is settings.core, though. But we recommend using all partials from the /settings, /tools and /generic layer.