A Beginner’s Guide to inuitcss: A CSS Framework

The freedom that one gets while dealing with front-end development through a CSS framework is unbeatable. But one should know that not every framework would give the same grade of flexibility in building websites or web applications.

CSS frameworks provide conceptual structures for a website development and one such framework is inuitcss.

Introduction to inuitcss

An object-oriented, SASS-based framework, Inuitcss is built on a BEM-style naming convention. So what is a BEM? BEM short for Block, element, modifier methodology is a naming convention for classes in HTML and CSS. But what is the need of this convention approach?

As a front-end developer, one needs to efficiently understand the difference between HTML and CSS, and BEM enables to do that.

Deconstructing & Understanding the BEM Entities

• Block-
  • A logically independent component, Block can be easily reused due to its principle nature. In general, a block is a distinct page element that can be either simple or complex. A block is nothing but an object of the website that encapsulates the style & behavior. It is given as below,
    • .menu {/*Styles*/}
    • .search{/*Styles*/}
• Element-
  • An Element is a part of the block that performs some function. Elements are semantically tied to their respective blocks and are written after the block is followed by two underscores.
    • .block__element
  • To give a better understanding of this complex expression, let me give you a simple example. The term menu item and search input field is represented as,
    • .menu__item {/*Styles*/}
    • .search__ input{/*Styles*/}
• Modifier-
  • The action related to the variation in appearance or behavior of an element is the modifier. The size of a button on a block is the best example; an identical button can have varying appearance due to the modifier. A modifier is used by adding a double hyphen after an element or block, and is given by
    • .block–modifier {}
  • The above expression is best understood through these examples,
    • .menu__item–link {/* Styles */}
    • .search__input–icon {/* Styles */}

Inuitcss: Get Access to Solid CSS Architecture

What is the main purpose of inuit.css? And it is specified that this CSS framework is object-oriented. So what are the major benefits that one can attain by going with this framework?

If you are an experienced developer then you will definitely understand the importance of DRY (don’t repeat yourself) concept. Wait! The DRY concept is nothing but a principle used during software development.

Logical contradictions in programs occur due to duplication; hence DRY principle is followed, which also avoids code bloating.

Key Benefits of using inuit.css Framework

• Extensibility-
  • Not every framework has plugins, but inuit.css has and they are known as igloos. IE6 support, breadcrumb navigation, and much more, igloo offers these features to enhance the functionality of a framework.
• Updates-
  • From version 1.0 to 2.5, till now a total of 25 updates have been made to the inuit.css framework to improve its purpose and role.
• Browser Compatibility-
  • Designed for modern browsers, inuit.css is definitely a perfect choice to experience smooth web development process. This CSS framework works better in IE7 and Firefox 4 browsers.

Make your own design choices says inuit.css framework. Designers find this an ideal framework for building websites as its concept revolves solely around modularity and abstractions.