SMACSS: Is it correct to use a grid inside a module?

Question

I'm using SMACSS (Scalable and Module Architecture for CSS): http://smacss.com/

Specifically, I'm using Yahoo's Pure CSS (SMACSS) framework (just the Grids stylesheet): http://purecss.io/grids/

Is it correct to place a grid inside of a module?

For example, here is a grid inside of a 'foo' module. The foo module should show a row of three items.

<div class="foo">

    <div class="pure-g">

        <div class="pure-u-1-3 foo-thumbnail">Eat</div>
        <div class="pure-u-1-3 foo-title">At</div>
        <div class="pure-u-1-3 foo-description">Joes!</div>

    </div>

</div>

OR, is it more inline with the SMACSS methodology to remove the grid from the module and write my own CSS to achieve the layout (instead of relying on the grid classes). For example:

<div class="foo">

    <div class="foo-thumbnail">Eat</div>
    <div class="foo-title">At</div>
    <div class="foo-description">Joes!</div>

</div>

If you want the content to be on a grid consistent with the rest of the site and it works for you, then use it. If you've already got css that works, don't re-write it just to not use a grid. — brouxhaha, Jan 22 '14 at 19:51

Evgeniy · Accepted Answer · 2014-03-31T09:54:12.473

I faced the same question building one scale project. So the answer is no.

Because it will break the most important rule - its module independency. The right way is to use module-mediator. I had a similar task - to separate grid from modules, so I could arrange modules in columns. I created a module called m-list with elements m-list-cell.

So in your case I would follow same way - inside the module I would use percentage geometry instead of px, and some mediator to set geometry to container with module.

Here is an example:

Lets build LAYOUT. Let it be simple 2 columns page.

<div class="l-container">
    <div class="l-grid l-grid_10">
        <!-- MAIN CONTENT -->
    </div>
    <div class="l-grid l-grid_2">
        <!-- SIDEBAR -->    
    </div>
</div>

So next step - place N-column list inside main content area:

<div class="l-container">
    <div class="l-grid l-grid_10">
        <ul class="m-list m-list_4cols">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>

Now about m-list: Its our magic wand - its task separate area to columns:

.m-list{
    width: 100%;
}

.m-list:after{
    content: "";
    display: block;
    clear: both;
}

.m-list li {
    float: left;
    box-sizing: border-box;
}

/* Lets define 4 columns view. We can scale it in depends of our needs */

.m-list_4cols li {
    width: 25%;
}

/* 
   Also we can use @media rules to reach adaptive behavior 
   you can use additional class like **.m-list_Ncols_onsmall** to change columns number.
   You can also scale modificators set according to your needs.
*/

@media only screen and (max-width: 520px) {

    .m-list .m-list_1col_onsmall li {
        width: 100%;
    }

    .m-list .m-list_2cols_onsmall li {
        width: 50%;
    }

    .m-list .m-list_3cols_onsmall li {
        width: 33.33%;
    }

}

You can checkout Foundation block grid. Its a great example of such mediator module

Looks like a good answer. I have been searching everywhere for more information about module-mediator since it sounds like a well established pattern from how you describe it. I even bought the smacss book, but no luck there. I would love to see some further info/links or code examples if you have the time! — Charlie Rudenstål, Mar 31 '14 at 09:19
@CharlieRudenstål Hi, thanks for your feedback! I've attached some code examples and module description, please let me know if you need some additional information — Evgeniy, Mar 31 '14 at 09:55

score 2 · Answer 2 · answered Jan 30 '14 at 07:55

The grid itself is layout rules - like the l-constrained and l-inline you know from the book, so mixing them with the module itself is not the Smacss way, it should be more like this:

<div class="pure-g">
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
</div>

However! Putting the pure-x-x-x class inside the same markup doesn't really make your module less independent as long as it doesn't rely on it, you could use foo-thumbnails inside a l-constrain-me - but thats my own opinion.

SMACSS: Is it correct to use a grid inside a module?

2 Answers2