Regulations - eleewinroader/mp-ecokaishu GitHub Wiki
1.The grid system
- 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.
- 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.
The .container
has 1.0rem padding property on the both sides
to have spaces of both sides on the smaller screen.
//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;
}
}