Geek Answers Handbook

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

I am using SMACSS (scalable and modular architecture for CSS): http://smacss.com/

In particular, I use the Yahoo Pure CSS platform (SMACSS) (Grids style sheet only): http://purecss.io/grids/

Is it correct to place the grid inside the module?

For example, here is the grid inside the module 'foo'. The foo module should show a string of three elements.

<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 complicated 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>
+4
source share
2 answers

, . .

- . - module-mediator. - , . m-list m-list-cell.

, - px .

:

LAYOUT. .

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

, - N- :

<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>

m-list: - :

.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%;
    }

}

.

+4

- , l-constrained l-inline, , Smacss, :

<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>

! pure-xxx , , foo-thumbnails l-constrain-me, .

+2

More articles:


All Articles