Small update to grid: more sizes, less media queries
This commit is contained in:
Antoine Boulanger
@@ -344,7 +344,7 @@ td, th {
|
||||
padding: 0; }
|
||||
|
||||
/* ==========================================================================
|
||||
Generic
|
||||
Generic Resets
|
||||
========================================================================== */
|
||||
html {
|
||||
box-sizing: border-box; }
|
||||
@@ -517,19 +517,23 @@ h6, .h6, .zeta {
|
||||
========================================================================== */
|
||||
.grid {
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
margin-left: -20px;
|
||||
letter-spacing: normal; }
|
||||
|
||||
.grid--full {
|
||||
margin-left: 0; }
|
||||
.grid--full > .grid__item, .grid--full > .whole, .grid--full > .half, .grid--full > .third, .grid--full > .two-thirds, .grid--full > .quarter, .grid--full > .three-quarters, .grid--full > .fifth {
|
||||
.grid.-full {
|
||||
margin-left: 0; }
|
||||
.grid.-full > .grid__item, .grid.-full > .whole, .grid.-full > .half, .grid.-full > .third, .grid.-full > .two-thirds, .grid.-full > .quarter, .grid.-full > .two-quarters, .grid.-full > .three-quarters, .grid.-full > .fifth, .grid.-full > .two-fifths, .grid.-full > .three-fifths, .grid.-full > .four-fifths, .grid.-full > .sixth, .grid.-full > .two-sixths, .grid.-full > .three-sixths, .grid.-full > .four-sixths, .grid.-full > .five-sixths {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; }
|
||||
.grid.-list {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; }
|
||||
padding-left: 0;
|
||||
list-style: none; }
|
||||
|
||||
.grid__item, .whole, .half, .third, .two-thirds, .quarter, .three-quarters, .fifth {
|
||||
.grid__item, .whole, .half, .third, .two-thirds, .quarter, .two-quarters, .three-quarters, .fifth, .two-fifths, .three-fifths, .four-fifths, .sixth, .two-sixths, .three-sixths, .four-sixths, .five-sixths {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 20px;
|
||||
vertical-align: top; }
|
||||
@@ -537,7 +541,7 @@ h6, .h6, .zeta {
|
||||
.whole {
|
||||
width: 100%; }
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (min-width: 768px) {
|
||||
.half {
|
||||
width: 50%; } }
|
||||
|
||||
@@ -549,27 +553,54 @@ h6, .h6, .zeta {
|
||||
.two-thirds {
|
||||
width: 66.6666666667%; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.quarter {
|
||||
width: 50%; } }
|
||||
@media (min-width: 1024px) {
|
||||
.quarter {
|
||||
width: 25%; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.three-quarters {
|
||||
@media (min-width: 1024px) {
|
||||
.two-quarters {
|
||||
width: 50%; } }
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.three-quarters {
|
||||
width: 75%; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.fifth {
|
||||
width: 50%; } }
|
||||
@media (min-width: 1024px) {
|
||||
@media (min-width: 1280px) {
|
||||
.fifth {
|
||||
width: 20%; } }
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.two-fifths {
|
||||
width: 40%; } }
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.three-fifths {
|
||||
width: 60%; } }
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.four-fifths {
|
||||
width: 80%; } }
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.sixth {
|
||||
width: 16.6666666667%; } }
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.two-sixths {
|
||||
width: 33.3333333333%; } }
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.three-sixths {
|
||||
width: 50%; } }
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.four-sixths {
|
||||
width: 66.6666666667%; } }
|
||||
|
||||
@media (min-width: 1680px) {
|
||||
.five-sixths {
|
||||
width: 83.3333333333%; } }
|
||||
|
||||
/* ==========================================================================
|
||||
Helpers
|
||||
========================================================================== */
|
||||
|
||||
@@ -4,19 +4,25 @@
|
||||
.grid {
|
||||
font-size: 0;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-left: -$margin;
|
||||
margin-left: -$gutter;
|
||||
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.grid--full {
|
||||
margin-left: 0;
|
||||
&.-full {
|
||||
margin-left: 0;
|
||||
|
||||
> .grid__item {
|
||||
> .grid__item {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.-list {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,8 +31,9 @@
|
||||
|
||||
display: inline-block;
|
||||
|
||||
margin-bottom: $margin;
|
||||
padding-left: $margin;
|
||||
width: 100%;
|
||||
margin-bottom: $gutter;
|
||||
padding-left: $gutter;
|
||||
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -39,15 +46,13 @@
|
||||
|
||||
.half {
|
||||
@extend .grid__item;
|
||||
|
||||
@media (min-width: $from-medium) {
|
||||
width: 50%;
|
||||
@media (min-width: $from-small) {
|
||||
width: span(1/2);
|
||||
}
|
||||
}
|
||||
|
||||
.third {
|
||||
@extend .grid__item;
|
||||
|
||||
@media (min-width: $from-medium) {
|
||||
width: span(1/3);
|
||||
}
|
||||
@@ -55,7 +60,6 @@
|
||||
|
||||
.two-thirds {
|
||||
@extend .grid__item;
|
||||
|
||||
@media (min-width: $from-medium) {
|
||||
width: span(2/3);
|
||||
}
|
||||
@@ -63,23 +67,20 @@
|
||||
|
||||
.quarter {
|
||||
@extend .grid__item;
|
||||
|
||||
@media (min-width: $from-small) and (max-width: $to-medium) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: $from-medium) {
|
||||
width: span(1/4);
|
||||
}
|
||||
}
|
||||
|
||||
.two-quarters {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-medium) {
|
||||
width: span(2/4);
|
||||
}
|
||||
}
|
||||
|
||||
.three-quarters {
|
||||
@extend .grid__item;
|
||||
|
||||
@media (min-width: $from-small) and (max-width: $to-medium) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: $from-medium) {
|
||||
width: span(3/4);
|
||||
}
|
||||
@@ -87,12 +88,63 @@
|
||||
|
||||
.fifth {
|
||||
@extend .grid__item;
|
||||
|
||||
@media (min-width: $from-small) and (max-width: $to-medium) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: $from-medium) {
|
||||
@media (min-width: $from-large) {
|
||||
width: span(1/5);
|
||||
}
|
||||
}
|
||||
|
||||
.two-fifths {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-large) {
|
||||
width: span(2/5);
|
||||
}
|
||||
}
|
||||
|
||||
.three-fifths {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-large) {
|
||||
width: span(3/5);
|
||||
}
|
||||
}
|
||||
|
||||
.four-fifths {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-large) {
|
||||
width: span(4/5);
|
||||
}
|
||||
}
|
||||
|
||||
.sixth {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-huge) {
|
||||
width: span(1/6);
|
||||
}
|
||||
}
|
||||
|
||||
.two-sixths {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-huge) {
|
||||
width: span(2/6);
|
||||
}
|
||||
}
|
||||
|
||||
.three-sixths {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-huge) {
|
||||
width: span(3/6);
|
||||
}
|
||||
}
|
||||
|
||||
.four-sixths {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-huge) {
|
||||
width: span(4/6);
|
||||
}
|
||||
}
|
||||
|
||||
.five-sixths {
|
||||
@extend .grid__item;
|
||||
@media (min-width: $from-huge) {
|
||||
width: span(5/6);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,8 @@ $padding: 0;
|
||||
|
||||
/* Spacings
|
||||
========================================================================== */
|
||||
$margin: 20px;
|
||||
$gutter: 20px;
|
||||
$margin: 40px;
|
||||
|
||||
/* Screen widths
|
||||
========================================================================== */
|
||||
|
||||
Reference in New Issue
Block a user