Smart open source SASS based OOCSS framework built for scale.

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

See how it works
Watch the tutorials

HOW IT WORKS

A set of separate modules

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

_settings.core.scss app.scss index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Generates a 4 and a 6 columns grid
$iota-global-columns: 4, 6;

// Generates 3 different breakpoints
$iota-global-breakpoints : (
  xs : "screen and (max-width: 767px)",
  sm : "screen and (min-width: 768px)",
  md : "screen and (min-width: 1000px)",
);

// Sets the global spacing to 24px
$iota-global-gutter-default: 24px;

// Enables Flex to all modules
$iota-global-flex: true;

// Imports the Core Settings module
@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
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
_tools.breakpoint.scss app.scss index.html 
1
2
3
// Imports the Breakpoint tool so, we have access
// to the iota-breakpoint mixin
@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
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
_base.initialize.scss app.scss index.html 
1
2
3
4
5
$iota-base-initialize-heading-size         : true;

// Imports the Initialize Base module
@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
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
_objects.container.scss app.scss index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Generates a 12 px gutter for all devices and 24px for
// the 'sm' breakpoint
$iota-objs-container-gutter-default : (
  null: 12px,
  sm: 24px
);

// Sets the default container max-width to 1220px
$iota-objs-container-size-default : 1220px;

// Generates a second container size named 'small'
$iota-objs-container-size-extra: (
  small: 500px
);

// Imports the Container Object module
@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
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
_components.button.scss app.scss index.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
// Updates the settings for the default button style
$iota-components-button-color      : $c_white;
$iota-components-button-margin     : auto;
$iota-components-button-padding    : 12px 18px;
$iota-components-button-background : $c_blue;


// Imports the Button Component module
@import 'node_modules/iotacss-components-button/components.button';


// Extending the behavior of the debault button
.c-button {
  font-family: $t_ff_primary;
  font-weight: $t_fw_medium;
  transition: all 0.3s;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
}

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

.c-button:active { box-shadow: 0 2px 8px 0 rgba(0,0,0,0.25) }


// Creates a button variation
.c-button--primary {
  background-color: $c_blue;
}

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
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>
_utilities.align.scss app.scss index.html 
1
2
3
4
5
6
// Enables utility's responsive features
$iota-utils-align-res           : true;


// Imports Align Utility module
@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
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dist/css/app.css">
  </head>
  
  <body>
    <div id="app"></div>
  </body>
</html>

Navigate through the items
to see the examples.

FEATURES

Built for scale

iotaCSS is a SASS based, Object Oriented CSS framework that fully adapts to your design and provides everything you need to develop in a fast and clean way.

Fully Responsive

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

Design agnostic

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

Native RTL support

You can easily enable RTL for your CSS. iotaCSS also provides you with a set of powerful RTL mixins.

BEM & Native Flexbox support

iotaCSS is built on top of SASS, uses BEM syntax with an Object Oriented approach and provides optional flexbox support out of the box.

Minimum footprint

iotaCSS is built with performance in mind, so you have 100% control over the code you include and use.

Fully customizable

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

GETTING STARTED

Get started with iotaCSS

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

    iotaCSS consists of settings, tools, base, objects, components and utilities modules

  • BEM & OOCSS

    Uses BEM and OOCSS for HTML class naming

  • Built on top of SASS

    Uses SASS preprocessor for easy and modular development

  • Installed through NPM

    Uses NPM for easily managing updates

Quick installation guide

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

Step 1: Make sure you have SASS and NPM installed

SASS generates the actual CSS and NPM pulls 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

iotaCSS provides a set of modules (settings, tools, base, objects, components and utilities) and doesn’t force you to use them all. Choose which of them you need and install them easily with NPM.

Step 4: Import styles to your main files and HTML

The final step is to import all the files in your main files that will be compiled into CSS. It’s crucial to note that the order of these imports is really important. The order that is used with iotaCSS 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 in the documentation.

Read the documentation

Frequently asked questions

How is it different than Bootstrap or Foundation ?

Bootstrap and Foundation are ready to use UI kits. iotaCSS 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 and the framework adapts on your design.

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

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

What about browser support ?

iotaCSS generates CSS3 but doesn’t include any vendor prefixes to minimize its footprint. You should use tools like Autoprefixer for older browser support.

Who is using it ?

Many companies already use iotaCSS 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 digital product design studio are just some of the users of iotaCSS.