magic grid with clearfix for scss - rosalsm/TIY-GitHub GitHub Wiki
// Main Styles: main.scss
main.container {
@extend .grid;
margin: 0 auto;
max-width: 60em;
> aside#about {
@media (max-width: 30em){
width: 100%;
}
}
}
// Tabs Helper Classes: _tabs.scss
.tabs {
> * {
background-color: gray;
}
}
// Grid Helper Classes: _grid.scss
.grid {
@extend .clearfix;
// overflow: auto; // Not recommended!
[class*="col-"] {
float: left;
box-sizing: border-box;
padding: 0 1em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
img {
width: 100%;
}
}
.col-1-2 {
width: 100% * (1/2);
}
.col-1-3 {
width: 100% * (1/3);
}
.col-2-3 {
width: 100% * (2/3);
}
.pad-1-3 {
margin-left: 100% * (1/3);
}
}
.clearfix::before,
.clearfix::after {
display: table;
content: ' ';
}
.clearfix::after {
clear: both;
}
.mobile-only {
display: none;
@media (max-width: 30em){
display: inherit;
}
}