Installation Guide

Technical Requirements

First of all make sure you have installed the following:

• SASS (used to generate the actual CSS)
• Node
• NPM (used for the package management so that it’s easy for you to pull new versions and updates)

Installing using iotaPlate

iotaPlate is iotaCSS’s boilerplate CLI. It helps you generate the recommended iotaCSS file structure in less than 1 second. Each module file contains all iotaCSS module options for faster configuration. Also, no need to install iotacss module. iotaPlate does it for you automatically.

Step 1: Install iotaPlate globally

$ npm install -g iotaplate

Step 2: Navigate to the folder you want the boilerplate to generated to and run:

$ iotaplate

Installing all iotaCSS modules with one command

iotacss package helps you install all iotaCSS modules with one command.

Step 1: Install iotacss package

npm install --save iotacss

Step 2: Import iotaCSS modules

@import 'node_modules/iotacss/settings/core';
@import 'node_modules/iotacss/tools/core';
...

Installing iotaCSS modules individually

iotaCSS allows you also to install any module you like individually.

Step 1: Install the core settings and tools

npm install --save-dev iotacss-settings-core iotacss-tools-core

Step 2: Install the modules you want to use

iotaCSS provides you a set of modules (tools, objects, components, utilities) and doesn’t force you to use them all. You can choose which of them you need and install them easily through NPM.

Step 3: Add your settings (optional)

Each iotaCSS module has its own set of settings. For example you can define the gutter size, the number of columns and the breakpoints of the grid object.

In this step you add your own settings files in order to overwrite any settings that don’t fit the needs of your project. You can find all available settings inside the doc page of each module.

Step 4: Import files to your main files

The final step is to import all these files into your main files that will be compiled into actual CSS. It’s crucial to note that the order you import each file is really important. The order that is used with iotaCSS architecture is the following:

1. Settings
2. Tools
3. Base
4. Objects
5. Components
6. Utilities

This is an example of main file where we import our styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// main.scss

// Settings
@import "settings/core";
@import "settings/type";

// Tools
@import "tools/core";
@import "tools/breakpoint";
@import "tools/ms";
@import "tools/rtl";
@import "tools/type";

// Base
@import "base/initialize";
@import "base/type";

// Objects
@import "objects/container";
@import "objects/grid";
@import "objects/list";
@import "objects/type";
@import "objects/media";

// Components
@import "components/button";

// Utilities
@import "utilities/align";
@import "utilities/bgcolor";
@import "utilities/clearfix";
@import "utilities/color";
@import "utilities/display";
@import "utilities/float";
@import "utilities/margin";
@import "utilities/opacity";
@import "utilities/padding";
@import "utilities/pull";
@import "utilities/push";
@import "utilities/size";
@import "utilities/text";
@import "utilities/transform";
@import "utilities/weight";

1
2
3
4
5
6
7
8
// Example file
// objects/_grid.scss

// Grid object settings ovewrite
$iota-grid-aligned : true;
$iota-grid-rev     : true;

@import "node_modules/iotacss-objs-grid/objects.grid";

These are the overall steps to install iotaCSS. We suggest you to read more about each module and its settings and let us know if you have any issue or question.