adfab-gulp-boilerplate
Version:
Adfab's boilerplate. Helps you kick-start a front-end project within minutes.
68 lines (58 loc) • 1.3 kB
text/less
.grid {
margin-left: @content-offset;
margin-right: @content-offset;
width: ~"calc(100% - 30px)";
max-width: 1160px;
margin: 0 auto;
}
.grid-full {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 1160px;
margin: 0 auto;
}
.grid,
.grid-full {
[class*="col-"] {
margin-left: @content-offset-inner;
margin-right: @content-offset-inner;
display: inline-block;
vertical-align: top;
}
}
@media @screen-xs-max {
.grid-full-xs {
margin-left: 0;
margin-right: 0;
width: 100%;
[class*="col-"] {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
}
.col-third {
width: calc(33.3333% ~"-" @content-offset-inner * 2);
}
.col-two-third {
width: calc(66.6667% ~"-" @content-offset-inner * 2);
}
.col-half {
width: calc(50% ~"-" @content-offset-inner * 2);
}
.col-quarter {
width: calc(25% ~"-" @content-offset-inner * 2);
}
.col-full {
width: calc(100% ~"-" @content-offset-inner * 2);
}
@media @screen-xs-max {
.col-quarter,
.col-third,
.col-two-third,
.col-half {
width: calc(100% ~"-" @content-offset-inner * 2);
}
}