Regulations - eleewinroader/mp-ecokaishu GitHub Wiki

Index

1.The grid system

1.The grid system

Basic regulations

  • Basically, a single .container including columns in <article> .
  • Depending on the layout, .container can be multiple.
  • Put .col on every column.
  • Do not include the other columns in a column.
  • Specify the column of right side putting .last to float to the right.
  • The .last triggers jQuery($(".last").after("<div class='clear'></div>");) clearing peroperties of float.

Regulations for bigger screens than 769 pixels

  • A full width (.container) : 1140 pixels
  • A column width (.col) : 75 pixels
  • Margin of a column on the sides : 10 pixels

The column width is converted into percentage. It is because to make the width flexible regardless of its devices.

Regulations for smaller screens than 768 pixels

The .container has 1.0rem padding property on the both sides to have spaces of both sides on the smaller screen.

_common.scss

//PC
@media all and (min-width: $minWidth){

    .container{
        width: 1140px;
        max-width: 100%;
        margin: 0 auto;
    }
    .col{
        @include box-sizing(border-box);
    }
    .onecol{
        float: left;
        width: 6.57894%;
        margin: 0 0.87719%;
    }
    .twocol{
        float: left;
        width: 14.91228%;
        margin: 0 0.87719%;
    }
    .threecol{
        float: left;
        width: 23.24561%;
        margin: 0 0.87719%;
    }
    .fourcol{
        float: left;
        width: 31.57894%;
        margin: 0 0.87719%;
    }
    .fivecol{
        float: left;
        width: 39.91228%;
        margin: 0 0.87719%;
    }
    .sixcol{
        float: left;
        width: 48.24561%;
        margin: 0 0.87719%;
    }
    .sevencol{
        float: left;
        width: 56.57894%;
        margin: 0 0.87719%;
    }
    .eightcol{
        float: left;
        width: 64.91228%;
        margin: 0 0.87719%;
    }
    .ninecol{
        float: left;
        width: 73.24561%;
        margin: 0 0.87719%;
    }
    .tencol{
        float: left;
        width: 81.57894%;
        margin: 0 0.87719%;
    }
    .elevencol{
        float: left;
        width: 89.91228%;
        margin: 0 0.87719%;
    }
    .twelvecol{
        float: left;
        width: 98.24561%;
        margin: 0 0.87719%;
    }
    .last{
        float: right;
    }
    .flRight{
        float: right;
    }

}

//Mobile
@media all and (max-width: $maxWidth){

    .container{
        padding: 0 1.0rem;
    }

}
⚠️ **GitHub.com Fallback** ⚠️