Gutter must be in Root EM in order to keep same behavior for all areas
This commit is contained in:
Fabien RASSINIER
parent
23e10bac60
commit
b22b7dac43
4 changed files with 65 additions and 65 deletions
|
|
@ -402,18 +402,18 @@ html {
|
|||
body {
|
||||
/* set body font-size in em (1.4em equiv "14px") */
|
||||
font-size: 1.4em;
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a {
|
||||
color: #333333;
|
||||
color: #333;
|
||||
}
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #000000;
|
||||
color: #000;
|
||||
}
|
||||
/* font-sizing for content */
|
||||
p,
|
||||
|
|
@ -718,7 +718,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1em;
|
||||
margin-left: -1rem;
|
||||
/* inline-block fallback for IE9 generation */
|
||||
letter-spacing: -0.31em;
|
||||
text-rendering: optimizespeed;
|
||||
|
|
@ -729,8 +729,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% * 1 / 4 - 1em - .01px);
|
||||
margin-left: 1em;
|
||||
width: calc(100% * 1 / 4 - 1rem - .01px);
|
||||
margin-left: 1rem;
|
||||
/* inline-block fallback for IE9 generation */
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -738,186 +738,186 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
text-rendering: auto;
|
||||
}
|
||||
[class*="grid-2"] > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
width: calc(100% * 1 / 2 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-2"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 2 - 1em - .01px);
|
||||
width: calc(100% * 2 / 2 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-3"] > * {
|
||||
width: calc(100% * 1 / 3 - 1em - .01px);
|
||||
width: calc(100% * 1 / 3 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-3"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 3 - 1em - .01px);
|
||||
width: calc(100% * 2 / 3 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-4"] > * {
|
||||
width: calc(100% * 1 / 4 - 1em - .01px);
|
||||
width: calc(100% * 1 / 4 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-4"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 4 - 1em - .01px);
|
||||
width: calc(100% * 2 / 4 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-5"] > * {
|
||||
width: calc(100% * 1 / 5 - 1em - .01px);
|
||||
width: calc(100% * 1 / 5 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-5"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 5 - 1em - .01px);
|
||||
width: calc(100% * 2 / 5 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-6"] > * {
|
||||
width: calc(100% * 1 / 6 - 1em - .01px);
|
||||
width: calc(100% * 1 / 6 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-6"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 6 - 1em - .01px);
|
||||
width: calc(100% * 2 / 6 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-7"] > * {
|
||||
width: calc(100% * 1 / 7 - 1em - .01px);
|
||||
width: calc(100% * 1 / 7 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-7"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 7 - 1em - .01px);
|
||||
width: calc(100% * 2 / 7 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-8"] > * {
|
||||
width: calc(100% * 1 / 8 - 1em - .01px);
|
||||
width: calc(100% * 1 / 8 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-8"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 8 - 1em - .01px);
|
||||
width: calc(100% * 2 / 8 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-10"] > * {
|
||||
width: calc(100% * 1 / 10 - 1em - .01px);
|
||||
width: calc(100% * 1 / 10 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-10"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 10 - 1em - .01px);
|
||||
width: calc(100% * 2 / 10 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-12"] > * {
|
||||
width: calc(100% * 1 / 12 - 1em - .01px);
|
||||
width: calc(100% * 1 / 12 - 1rem - .01px);
|
||||
}
|
||||
[class*="grid-12"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 12 - 1em - .01px);
|
||||
width: calc(100% * 2 / 12 - 1rem - .01px);
|
||||
}
|
||||
/* Responsive grid */
|
||||
@media (max-width: 640px) {
|
||||
[class*="-small-4"] > * {
|
||||
width: calc(100% * 1 / 4 - 1em - .01px);
|
||||
width: calc(100% * 1 / 4 - 1rem - .01px);
|
||||
}
|
||||
[class*="-small-4"] > .flexitem-double {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
width: calc(100% * 1 / 2 - 1rem - .01px);
|
||||
}
|
||||
[class*="-small-3"] > * {
|
||||
width: calc(100% * 1 / 3 - 1em - .01px);
|
||||
width: calc(100% * 1 / 3 - 1rem - .01px);
|
||||
}
|
||||
[class*="-small-3"] > .flexitem-double {
|
||||
width: calc(100% * 2 / 3 - 1em - .01px);
|
||||
width: calc(100% * 2 / 3 - 1rem - .01px);
|
||||
}
|
||||
[class*="-small-2"] > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
width: calc(100% * 1 / 2 - 1rem - .01px);
|
||||
}
|
||||
[class*="-small-2"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
[class*="-small-1"] > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
[class*="-small-1"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 320px) {
|
||||
[class*="-tiny-2"] > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
width: calc(100% * 1 / 2 - 1rem - .01px);
|
||||
}
|
||||
[class*="-tiny-2"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
[class*="-tiny-1"] > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
[class*="-tiny-1"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-2-1 > *:nth-child(odd) {
|
||||
width: calc(66.66666666666666% - 1em - .01px);
|
||||
width: calc(66.66666666666666% - 1rem - .01px);
|
||||
}
|
||||
.grid-2-1 > *:nth-child(even) {
|
||||
width: calc(33.33333333333333% - 1em - .01px);
|
||||
width: calc(33.33333333333333% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-2-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-1-2 > *:nth-child(odd) {
|
||||
width: calc(33.33333333333333% - 1em - .01px);
|
||||
width: calc(33.33333333333333% - 1rem - .01px);
|
||||
}
|
||||
.grid-1-2 > *:nth-child(even) {
|
||||
width: calc(66.66666666666666% - 1em - .01px);
|
||||
width: calc(66.66666666666666% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-1-2 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-3-1 > *:nth-child(odd) {
|
||||
width: calc(75% - 1em - .01px);
|
||||
width: calc(75% - 1rem - .01px);
|
||||
}
|
||||
.grid-3-1 > *:nth-child(even) {
|
||||
width: calc(25% - 1em - .01px);
|
||||
width: calc(25% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-3-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-1-3 > *:nth-child(odd) {
|
||||
width: calc(25% - 1em - .01px);
|
||||
width: calc(25% - 1rem - .01px);
|
||||
}
|
||||
.grid-1-3 > *:nth-child(even) {
|
||||
width: calc(75% - 1em - .01px);
|
||||
width: calc(75% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-1-3 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-3-2 > *:nth-child(odd) {
|
||||
width: calc(60% - 1em - .01px);
|
||||
width: calc(60% - 1rem - .01px);
|
||||
}
|
||||
.grid-3-2 > *:nth-child(even) {
|
||||
width: calc(40% - 1em - .01px);
|
||||
width: calc(40% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-3-2 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-2-3 > *:nth-child(odd) {
|
||||
width: calc(40% - 1em - .01px);
|
||||
width: calc(40% - 1rem - .01px);
|
||||
}
|
||||
.grid-2-3 > *:nth-child(even) {
|
||||
width: calc(60% - 1em - .01px);
|
||||
width: calc(60% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-2-3 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-4-1 > *:nth-child(odd) {
|
||||
width: calc(80% - 1em - .01px);
|
||||
width: calc(80% - 1rem - .01px);
|
||||
}
|
||||
.grid-4-1 > *:nth-child(even) {
|
||||
width: calc(20% - 1em - .01px);
|
||||
width: calc(20% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-4-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.grid-1-4 > *:nth-child(odd) {
|
||||
width: calc(20% - 1em - .01px);
|
||||
width: calc(20% - 1rem - .01px);
|
||||
}
|
||||
.grid-1-4 > *:nth-child(even) {
|
||||
width: calc(80% - 1em - .01px);
|
||||
width: calc(80% - 1rem - .01px);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-1-4 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
width: calc(100% - 1rem - .01px);
|
||||
}
|
||||
}
|
||||
.pull {
|
||||
|
|
@ -979,7 +979,7 @@ input,
|
|||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: #000000;
|
||||
color: #000;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -64,7 +64,7 @@
|
|||
@ultra-large-screen : 1920px; // ultra large screens
|
||||
|
||||
// grids variables (choose unit you prefer)
|
||||
@gutter: 1em; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
@gutter: 1rem; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
@number: 4; // number of equal columns
|
||||
@left: 2; // left side of uneven columns
|
||||
@right: 1; // right side of uneven columns
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ $extra-large-screen : 1600px !default; // screens between 1441px and 1600px
|
|||
$ultra-large-screen : 1920px !default; // ultra large screens
|
||||
|
||||
// grids variables (choose unit you prefer)
|
||||
$gutter: 1em !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$number: 4 !default; // number of equal columns
|
||||
$left: 2 !default; // left side of uneven columns
|
||||
$right: 1 !default; // right side of uneven columns
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue