iotaCSS

Architecture

One of the core things of iotaCSS is its sustainable and scalable architecture inspired by ITCSS ( http://itcss.io ). It pays a lot of attention on how specificity evolves so that you don’t have any undesired behavior. Styles are grouped into the following categories:

Introduction to Base

Base styles are the default styles of base elements.

Initialize Base

Initialize is a modern, elegant and minimal combination of Normalize.css and CSS Reset. Compatible with IE10+.

Button Component

Button component gives you a minimal, cross browser version of an html button and a set of options to customize it to your needs.

Introduction to Components

Components are UI elements. They contain cosmetic CSS and they can be directly overwritten to fit your UI Kit style. iotaCSS provides a set of minimalistic components, having the minimum needed styling, all controlled by options, to achieve zero unnecessary CSS property override.

Modal Component

The modal component helps you create a minimal, cross browser and flexible modal window.

Documentation

Add iotaCSS to your project and learn more about how it works and how to configure its settings.

Installation Guide

iotaCSS is a framework built on top of SASS preprocessor. The way it works is that you provide to it a set of settings and it generates the final CSS code for you.

HTML class naming

iotaCSS has adopted some of the best naming techniques to make sure that every HTML class is readable and easily discoverable into your codebase. The main techniques it uses are the BEM methodology, namespacing and breakpoints suffixes.

Container Object

The container object is responsible for creating smart, flexible and responsive containers.

Grid Object

The grid object is responsible for building a smart, flexible and responsive grid.
You should use it together with Size, Push and Pull utilities.

Introduction to Objects

Objects are class-based selectors which define undecorated design patterns like grid or media object. They provide structure to your content, do not contain any cosmetic CSS and they should never been directly overwritten.

List Object

The list object is responsible for creating inline, block and span lists. You can use it to build the structure of UI components like navigations or vertical lists.

Media Object

Media object is responsible for a common design pattern where there is a fixed and a fluid width column next to each other. It's used to build the structure of sidebars, comments, avatar and other similar UI components.

Type Object

The type object is responsible for making responsive typography a piece of cake.

Core Settings

The default settings file contains all the settings that iotaCSS needs to work.

Introduction to Settings

Setting files contain global configurations that are shared by more than one modules. Settings that are connected to one and only module are a part of the module itself.

Breakpoint Tool

Breakpoint tool includes the iota-breakpoint() mixin that generates media queries easily for you.

Core Tool

Core tool includes all the functions and mixins that iota needs to work properly.

Introduction to Tools

Tools are sets of sass mixins and functions.

Modular Scale Tool

The Modular Scale tool contains a function that helps you create sizes based on modular scale.

RTL Tool

RTL Tool includes all the important mixins and functions for developing a right-to-left website.

Type Tool

Type tool contains a mixin that helps you create smart, flexible and responsive typography.

Align Items

The align items utility contains helper classes for the CSS align-items property.

Align Utility

The align utility contains helper classes for the CSS vertical-align property.

Background Color Utility

The background color utility contains helper classes for the background-color CSS property.

Clearfix Utility

The clearfix utility is used on elements that need to automatically clear their child elements.

Color Utility

The color utility contains helper classes for the color CSS property.

Display Utility

The display utility contains helper classes for the CSS display property.

Flex Direction

The flex direction utility contains helper classes for the CSS flex-direction property.

Float Utility

The float utility contains helper classes for the CSS float property.

Introduction to Utilities

Utilities are high-specificity, very explicit classes. They are used as overrides and helper classes. They are usually one line of code and have !important to make sure they override all element styles when used.

Justify Content

The justify content utility contains helper classes for the CSS justify-content property.

Margin Utility

The margin utility contains a set of classes for the CSS margin properties.

Opacity Utility

The opacity utility contains helper classes for the opacity CSS property.

Padding Utility

The padding utility contains a set of classes for the CSS padding properties.

Position Utility

The position utility contains helper classes for the CSS position property.

Pull Utility

The pull utility is responsible for handling grid's column after offset.

Push Utility

The push utility is responsible for handling grid's column before offset.

Size Utility

The size utility contains a set of classes for setting width on grid columns.

Text Utility

The text utility contains helper classes for the CSS text align property.

Transform Utility

The transform utility contains helper classes for the CSS text-transform property.

Weight Utility

The weight utility contains helper classes for the font-weight CSS property.