How to create a grid-based layout with inuit.css

inuit.css is incredibly easy to use, even for novices to CSS frameworks like myself. It comes bundled with a handful of CSS objects, such as the media object which takes the following format:

<a class="media">
    <img src="[Image source goes here]" class="img" />
    <p class="body">[Text goes here]</p>
</a>

The island object is a generic class that simply adds padding to an element. The nav abstraction is another generic class that will turn a bulleted list into a horizontal navigation menu.

Additionally, if you use the fluid grid system builder available on the inuit.css website, creating a grid-based layout is a piece of cake. I’m going to walk you through how to do exactly that.

Step 1: Download inuit.css from the inuit.css website. You can do this by clicking on the big “Download now” button on the right side of the page. Extract the zip archive, then get the inuit.css file from the core/css folder and include it in your document.

Step 2: Get the grid.inuit.css file either from the demo/css folder or create a new one using the fluid grid system builder on the inuit.css website. Don’t include this file in your document. Instead, get the igloos.css file from the demo/css folder and include this file in your document. This file should contain the single line:

@import url(grid.inuit.css)

Other include statements can be added to this file as well to add other igloos to your document, but leave it the way it is for now. By keeping the grid.inuit.css file separate from the rest of the inuit.css framework, along with any other igloos (or plugins) we want to add, we are making it easy to change the grid later should the need arise. For the purpose of this article, I’ll assume you’re using a grid that is composed of 12 columns.

Step 3: Apply a class of .wrapper to the body element in your document.

Step 4: Create a div element within the body element of your document. Apply a class of .grids to the div element you just created.

Step 5: Within the div element you just created, create a div element for each column you would like to fill with content. Each div can have one of the following classes:

  • .grid-1 — Spans one column
  • .grid-2 — Spans two columns
  • .grid-12 — Spans 12 columns

For example, you can create two divs that span six columns each, like so:

<div class="grids">
    <div class="grid-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
</div>

I filled the divs I created with lorem ipsum dummy text, but obviously you can do whatever you want. Alternatively, you can create however many divs you like as long as they span 12 columns total. To start a new row of columns, simply start a new div with a class of .grids, like so:

<div class="grids">
    <div class="grid-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
</div>
<div class="grids">
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
</div>

According to the author:

The grids all come with preset widths and therefore their box model properties should not be edited or overridden. If you would like a <div> with a yellow background and a padding of 10px then create a <div> inside a grid container and style that.

So, if you want to fill that last row of divs with a yellow background, you would do it like this:

<div class="grids">
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
</div>

Of course, you can style the .promo class in your stylesheet however you like. Classes such as the media object should also be placed inside a grid container and not applied directly to the grid container, like so:

<div class="grid-6">
    <div class="media promo island">
        <img src="[Image source goes here]" class="img" />
        <p class="body">[Text goes here]</p>
    </div>
    <div class="media promo island">
        <img src="[Image source goes here]" class="img" />
        <p class="body">[Text goes here]</p>
    </div>
</div>

Using a combination of the media object, the island object, the nav abstraction, the keywords igloo, and a 12 column grid, I created the following super awesome website that everyone would want to visit:

One of the coolest features of inuit.css is that it is responsive. All of the columns will stack vertically and fill any remaining horizontal space if the user’s browser is less than 720 pixels wide. I added an extra media query to my own stylesheet to add vertical space between elements that didn’t already have it:

@media (max-width: 720px)
{
    .peninsula
    {
        margin-bottom: 1.5rem;
    }
}

That wraps up my discussion on inuit.css. There are lots more ways it can be used to create great looking websites, so head over to the inuit.css website to check it out for yourself, and be sure to let me know if you found this article helpful!

About these ads

16 thoughts on “How to create a grid-based layout with inuit.css

  1. Dave Post author

    david, do you mean the dropdown igloo you can download separately from the inuit.css website? After downloading the .zip archive, extract dropdown.inuit.css to your css directory. Make sure you also place a copy of igloos.css in your css directory. Include igloos.css in your document like this:

    <link href="css/igloos.css" rel="stylesheet" />
    

    igloos.css should look like this:

    @import url(grid.inuit.css);
    @import url(dropdown.inuit.css);
    

    Next, in your document, apply a class of “dropdown” to a list element like this:

    <ul id="nav" class="dropdown cf"> <!-- Apply the clearfix so we can remove the overflow:hidden; later on. -->
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">About</a>
            <ul>
                <li><a href="#">About us</a></li>
                <li><a href="#">The board</a></li>
            </ul>
        </li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    

    The markup above is included in the dropdown.inuit.css file as a comment. You can follow the same basic procedure for using other igloos.

    Reply
  2. david

    Yes indeed I mean the igloo. I copied the markup into the demo index.html and included the dropdown.inuit.css but its still wrong. “About us and The board” is still over “About”. I tried it in different browsers but nothing.

    Reply
  3. Dave Post author

    david, it sounds like the plugin is working but you need additional styling on the nested list. When I tried using the markup above, I noticed the links to “About us” and “The board” displayed correctly when I hovered over the “About” link, but they overlapped the other list items. I placed the following properties in my stylesheet to make the links easier to read:

    #nav ul
    {
        background-color: #ccc;
        border: 1px solid #000;
        z-index: 99;
    }
    

    Also, make sure your document can find the inuit.css file. When I opened the demo/index.html file, it was referencing the inuit.css file in “../core/css,” which wasn’t available to my document.

    Let me know if that solves your problem.

    Reply
  4. thinkingsound

    Hello Dave, thanks for the article. I wanted to know why classes are use extensively and not id’s?

    Surely header should have an id… (div id=”header”)? This would allow you to create sub elements like div id=”navigation” class=”grid-7″

    Is the fact that it needs to be a class when re-sizing as the element ‘header’ needs to be re-referenced?

    Cheers
    Anthony

    Reply
  5. Dave Post author

    Anthony, the only reason you would use a class of header rather than an id is if you wanted to apply the same style properties to several elements on one page. There’s nothing stopping you from doing this in the framework itself. However, if you’re applying style properties such as background-color, padding, etc. to an element inside of a grid container, Roberts suggests you do it like so:

    <div class="grid-12">
        <div id="header">
    

    … as opposed to:

    <div id="header" class="grid-12">
    

    The reason he gives is:

    … you should think of grids as a set of shelves; they literally only hold things and are not styled themselves. This brings the benefit of fluidity to your builds; if your grid constrains the widths of objects then the objects themselves can be fluid, meaning you could move a promo from inside a .grid-4 parent into a .grid-6 parent and it will always occupy the available space.

    Let me know if this answers your question.

    Reply
  6. murph

    Hey! Thanks so much for this tutorial! I’m new to grids and been struggling to figure it out, but you just helped make it a lot more sense!

    Reply
    1. Dave Post author

      John,

      I don’t mind a little self-promotion, but please explain what you find easier to use about it so as to actually contribute to the discussion.

      Reply
      1. John Slegers

        * Inuit has only very little official documentation. For some decent demos, you need to rely on external sources like http://terabytenz.github.io/inuit.css-kitchensink/ .
        * Inuit requires heavy custom styling to be useful for anything. Cascade Framework has a production ready default color scheme and typography similar to Bootstrap. Unlike Bootstrap, however, this color scheme and typography is optional. If you fully custom styling, you can get rid of all the fat.
        * Cascade Framework’s grid is largely based on Stubbornella’s highly flexible grid system, but adds even more flexibility. You can use both semantic and presentational techniques or combine both.
        * Cascade Framework has advanced UI components like panels and shared components (eg. nav) are more generic in Cascade Framework.
        * Cascade Framework does not use BEM, because BEM restricts the cascade which effectively neuters ones of the most useful features of CSS… and also leads to extra bloat.
        * The recommended versions of Cascade Framework are only 3.5Kb and 4Kb after minification and Gzip… or 11.5Kb and 14.5Kb without Gzip.
        * Inuit requires IE8 or higher. Cascade Framework also support IE6-7.
        * Cascade Framework’s CSS is modular. You can pick and choose which features you want without using any pre-processor language
        * If you want just the bare basics, you can opt for a “Light version” of the framework that’s only 2kb (minified + Gzipped) in total. It uses the same syntax as Cascade Framework and is also modular. See http://jslegers.github.io/cascadeframeworklight/
        * …

        Note that Cascade Framework 2 will be SCSS-based and will integrate Cascade Framework with Cascade Framework Light. It is currently in development.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s