Smart opensource SASS based OOCSS framework built for scale.

Create lightweight, fast performant, readable and fully responsive interfaces in no time.

See how it works
Created with Sketch. Watch the tutorials
Created with Sketch.

HOW IT WORKS

A set of separate modules

Iota CSS is a set of independent modules managed through NPM.
They are grouped into the following categories and can be easily configured.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$iota-global-columns: 12;

$iota-global-breakpoints : (
  smo  : "screen and (min-width: 601px)",
  mdo  : "screen and (min-width: 801px)",
  lgo  : "screen and (min-width: 1025px)",
);

$iota-global-gutter-default: 24px;

$iota-global-flex: true;

$iota-global-rtl: false;

@import 'node_modules/iotacss-settings-core/settings.core';
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
@import 'settings/core';
@import 'settings/colors';
@import 'settings/typography';
@import 'settings/border';

@import 'tools/core';
@import 'tools/type';
@import 'tools/breakpoint';

@import 'base/initialize';
@import 'base/type';

@import 'objects/container';
@import 'objects/grid';
@import 'objects/list';
@import 'objects/type';
@import 'objects/media';

@import 'components/button';
@import 'components/link';
@import 'components/sidebar';
@import 'components/input';

@import 'utilities/align';
@import 'utilities/clearfix';
@import 'utilities/color';
@import 'utilities/display';
1
2
3
4
5
6
7
8
9
10
<body>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
1
2
  @import 'node_modules/iotacss-tools-breakpoint/tools.breakpoint';
  
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
@import 'settings/core';
@import 'settings/colors';
@import 'settings/typography';
@import 'settings/border';

@import 'tools/core';
@import 'tools/type';
@import 'tools/breakpoint';

@import 'base/initialize';
@import 'base/type';

@import 'objects/container';
@import 'objects/grid';
@import 'objects/list';
@import 'objects/type';
@import 'objects/media';

@import 'components/button';
@import 'components/link';
@import 'components/sidebar';
@import 'components/input';

@import 'utilities/align';
@import 'utilities/clearfix';
@import 'utilities/color';
@import 'utilities/display';
1
2
3
4
5
6
7
8
9
10
<body>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
$iota-base-initialize-box-sizing           : 'border-box';

$iota-base-initialize-heading-size         : true;
$iota-base-initialize-form-elements        : false;
$iota-base-initialize-html5-form-elements  : false;

@import 'node_modules/iotacss-base-initialize/base.initialize';
  
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
@import 'settings/core';
@import 'settings/colors';
@import 'settings/typography';
@import 'settings/border';

@import 'tools/core';
@import 'tools/type';
@import 'tools/breakpoint';

@import 'base/initialize';
@import 'base/type';

@import 'objects/container';
@import 'objects/grid';
@import 'objects/list';
@import 'objects/type';
@import 'objects/media';

@import 'components/button';
@import 'components/link';
@import 'components/sidebar';
@import 'components/input';

@import 'utilities/align';
@import 'utilities/clearfix';
@import 'utilities/color';
@import 'utilities/display';
1
2
3
4
5
6
7
8
9
10
<body>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$iota-objs-container-gutter-default : (
  null: 12px,
  smo: 24px
);
$iota-objs-container-gutter-extra   : ();

$iota-objs-container-size-default : 1220px;
$iota-objs-container-size-extra: (
  editor: (
    null: 840px
  )
);

@import 'node_modules/iotacss-objs-container/objects.container';
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
@import 'settings/core';
@import 'settings/colors';
@import 'settings/typography';
@import 'settings/border';

@import 'tools/core';
@import 'tools/type';
@import 'tools/breakpoint';

@import 'base/initialize';
@import 'base/type';

@import 'objects/container';
@import 'objects/grid';
@import 'objects/list';
@import 'objects/type';
@import 'objects/media';

@import 'components/button';
@import 'components/link';
@import 'components/sidebar';
@import 'components/input';

@import 'utilities/align';
@import 'utilities/clearfix';
@import 'utilities/color';
@import 'utilities/display';
1
2
3
4
5
6
7
8
9
10
<body>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
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
$iota-components-button-color      : $c_white;
$iota-components-button-margin     : auto;
$iota-components-button-padding    : (
  null: 12px 18px
);
$iota-components-button-border     : none;
$iota-components-button-background : $c_blue;

@import 'node_modules/iotacss-components-button/components.button';


.c-button {
  font-family: $t_ff_primary;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
  border-radius: 3px;
  font-weight: $t_fw_medium;

  @include iota-type((
    null: 16px 18px
  ));

  transition: all 0.3s;
  outline: none;
  white-space: nowrap;
}

.c-button:hover { transform: translateY(-1px) }

.c-button:active { box-shadow: 0 2px 8px 0 rgba(0,0,0,0.25) }
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
@import 'settings/core';
@import 'settings/colors';
@import 'settings/typography';
@import 'settings/border';

@import 'tools/core';
@import 'tools/type';
@import 'tools/breakpoint';

@import 'base/initialize';
@import 'base/type';

@import 'objects/container';
@import 'objects/grid';
@import 'objects/list';
@import 'objects/type';
@import 'objects/media';

@import 'components/button';
@import 'components/link';
@import 'components/sidebar';
@import 'components/input';

@import 'utilities/align';
@import 'utilities/clearfix';
@import 'utilities/color';
@import 'utilities/display';
1
2
3
4
5
6
7
8
9
10
<body>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
1
2
3
4
5
$iota-utils-align-res           : false;
$iota-utils-align-breakpoints   : $iota-global-breakpoints;


@import 'node_modules/iotacss-utils-align/utilities.align';
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
@import 'settings/core';
@import 'settings/colors';
@import 'settings/typography';
@import 'settings/border';

@import 'tools/core';
@import 'tools/type';
@import 'tools/breakpoint';

@import 'base/initialize';
@import 'base/type';

@import 'objects/container';
@import 'objects/grid';
@import 'objects/list';
@import 'objects/type';
@import 'objects/media';

@import 'components/button';
@import 'components/link';
@import 'components/sidebar';
@import 'components/input';

@import 'utilities/align';
@import 'utilities/clearfix';
@import 'utilities/color';
@import 'utilities/display';
1
2
3
4
5
6
7
8
9
10
<body>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
FEATURES

Built for scale

iota CSS is a SASS based Object Oriented CSS framework that fully adapts on your design and gives you all you need to develop it in a fast and clean way.

Fully Responsive

You define a SASS map with your breakpoints and everything adapts on them.

Design agnostic

Instead of forcing you to design in a specific way, it fully adapts on your design.

Native RTL support

You can easilly enable RTL for your CSS. It provides you also a set of mixins to make it easier.

BEM & Native Flexbox support

It’s built on top of SASS, uses BEM syntax with Object Oriented approach and provides optional flexbox support out of the box.

Minimum footprint

It’s built with performance in mind that’s why you have 100% control of what code you include and use.

Fully customizable

You can customize everything from class names to grid gutters and typography sizes.

GETTING STARTED

Get started with iota CSS

Get up and running in 5 mins with following guide. These are the basic concepts you should know before you begin.

  • A set of separate modules

    It’s consisted of settings, tools, objects, components and utilities modules

  • BEM & OOCSS

    Uses BEM and OOCSS for HTML class naming

  • Built on top of SASS

    It uses SASS preprocessor for easy and modular development

  • Installed through NPM

    It uses NPM for managing updates easier.

Quick installation guide

Iota CSS works on top of SASS preprocessor. You provide to it a set of settings and it generates the final CSS code for you.

Step 1: Make sure you have SASS and NPM installed

SASS is used to generate the actual CSS and NPM for pulling new versions and updates.

Step 2: Install the core settings and tools
1
npm install --save iotacss-settings-core iotacss-tools-core
Step 3: Install and configure the modules you want to use

Iota CSS provides you a set of modules (base, tools, objects, components and 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 4: Import styles to your main files and HTML

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 iota CSS architecture is the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// main.scss

// Settings
@import "settings/core";
@import "settings/<setting-name>";

// Tools
@import "tools/core";
@import "tools/<tool-name>";

// Base
@import "base/<base-name>";

// Objects
@import "objects/<object-name>";

// Components
@import "components/<component-name>";

// Utilities
@import "utilities/<utilty-name>";
1
2
3
4
5
6
7
8
9
// index.html
<html>
  <head>
    <link href="<public-assets-path>/main.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

For more information and tips you can check the official installation guide inside the documentation.

Read the documentation

Frequently asked questions

How is it different to Bootstrap or Foundation ?

Bootstrap and Foundation are ready to use UI kits. iota CSS is the way to get from SASS to your custom UI kit. It doesn't have any Javascript code inside and it's design agnostic which means that you don't have to design for the framework but framework adapts on your design.

What should i use it for and why should I care ?

iota CSS is built with performance and scalability in mind. It's a good fit for anyone that needs a solid development workflow, reliable architecture and best practices embeded inside a framework.

What about browser support ?

It generates CSS3 but hasn't included any vendor prefix since it focuses on having minimum footprint. You should use tools like Autoprefixer for older browsers support.

Who is using it ?

Many companies use iota CSS already in their products. Chute a Y combinator backed startup with milion of hits per day, Pressidium one of the most popular managed WordPress hosting providers, Node.io a company built by the youngest Google employee and 6yards a product design and development studio are some of them.