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>

Answer 1

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

Answer 2

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.