adding in the offsets and a few other small things
This commit is contained in:
parent
c63d4b7a02
commit
a3208cfa39
52
css/skeleton.css
vendored
52
css/skeleton.css
vendored
@ -4,7 +4,7 @@
|
|||||||
* www.getskeleton.com
|
* www.getskeleton.com
|
||||||
* Free to use under the MIT license.
|
* Free to use under the MIT license.
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
* 11/25/2014
|
* 12/9/2014
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
@ -28,7 +28,6 @@
|
|||||||
|
|
||||||
/* Grid
|
/* Grid
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
@ -41,7 +40,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box; }
|
box-sizing: border-box; }
|
||||||
.row {
|
.row {
|
||||||
margin-bottom: 20px; }
|
margin-bottom: 2rem; }
|
||||||
.row .column:first-child,
|
.row .column:first-child,
|
||||||
.row .columns:first-child {
|
.row .columns:first-child {
|
||||||
margin-left: 0; }
|
margin-left: 0; }
|
||||||
@ -72,6 +71,25 @@
|
|||||||
|
|
||||||
.container .one-half.column { width: 48%; }
|
.container .one-half.column { width: 48%; }
|
||||||
|
|
||||||
|
/* Offsets */
|
||||||
|
.container .offset-by-one.column,
|
||||||
|
.container .offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||||
|
.container .offset-by-two.column { margin-left: 17.3333333333%; }
|
||||||
|
.container .offset-by-three.column { margin-left: 26%; }
|
||||||
|
.container .offset-by-four.column { margin-left: 34.6666666667%; }
|
||||||
|
.container .offset-by-five.column { margin-left: 43.3333333333%; }
|
||||||
|
.container .offset-by-six.column { margin-left: 52%; }
|
||||||
|
.container .offset-by-seven.column { margin-left: 60.6666666667%; }
|
||||||
|
.container .offset-by-eight.column { margin-left: 69.3333333333%; }
|
||||||
|
.container .offset-by-nine.column { margin-left: 78.0%; }
|
||||||
|
.container .offset-by-ten.column { margin-left: 86.6666666667%; }
|
||||||
|
.container .offset-by-eleven.column { margin-left: 95.3333333333%; }
|
||||||
|
|
||||||
|
.container .offset-by-one-third.column { margin-left: 34.6666666667%; }
|
||||||
|
.container .offset-by-two-thirds.column { margin-left: 69.3333333333%; }
|
||||||
|
|
||||||
|
.container .offset-by-one-half.column { margin-left: 52%; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -83,7 +101,6 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
|
|||||||
html {
|
html {
|
||||||
font-size: 62.5%; }
|
font-size: 62.5%; }
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
|
||||||
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -114,6 +131,9 @@ h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
|||||||
h6 { font-size: 1.5rem; }
|
h6 { font-size: 1.5rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0; }
|
||||||
|
|
||||||
|
|
||||||
/* Links
|
/* Links
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
@ -230,9 +250,9 @@ input[type="checkbox"],
|
|||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
display: inline; }
|
display: inline; }
|
||||||
label > .label-body {
|
label > .label-body {
|
||||||
|
display: inline-block;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin-left: .5rem;
|
margin-left: .5rem; }
|
||||||
display: inline-block; }
|
|
||||||
|
|
||||||
|
|
||||||
/* Lists
|
/* Lists
|
||||||
@ -295,7 +315,6 @@ textarea,
|
|||||||
select,
|
select,
|
||||||
fieldset {
|
fieldset {
|
||||||
margin-bottom: 1.5rem; }
|
margin-bottom: 1.5rem; }
|
||||||
p,
|
|
||||||
pre,
|
pre,
|
||||||
blockquote,
|
blockquote,
|
||||||
form,
|
form,
|
||||||
@ -307,6 +326,8 @@ ul,
|
|||||||
ol,
|
ol,
|
||||||
form {
|
form {
|
||||||
margin-bottom: 2.5rem; }
|
margin-bottom: 2.5rem; }
|
||||||
|
p {
|
||||||
|
margin-top: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -358,7 +379,7 @@ there.
|
|||||||
/* Larger than mobile */
|
/* Larger than mobile */
|
||||||
@media (min-width: 400px) {}
|
@media (min-width: 400px) {}
|
||||||
|
|
||||||
/* Larger than phablet */
|
/* Larger than phablet (also point when grid becomes active) */
|
||||||
@media (min-width: 550px) {}
|
@media (min-width: 550px) {}
|
||||||
|
|
||||||
/* Larger than tablet */
|
/* Larger than tablet */
|
||||||
@ -369,18 +390,3 @@ there.
|
|||||||
|
|
||||||
/* Larger than Desktop HD */
|
/* Larger than Desktop HD */
|
||||||
@media (min-width: 1200px) {}
|
@media (min-width: 1200px) {}
|
||||||
|
|
||||||
/* Smaller than Desktop HD */
|
|
||||||
@media (max-width: 1199px) {}
|
|
||||||
|
|
||||||
/* Smaller than desktop */
|
|
||||||
@media (max-width: 999px) {}
|
|
||||||
|
|
||||||
/* Smaller than tablet */
|
|
||||||
@media (max-width: 749px) {}
|
|
||||||
|
|
||||||
/* Smaller than phablet */
|
|
||||||
@media (max-width: 549px) {}
|
|
||||||
|
|
||||||
/* Smaller than mobile */
|
|
||||||
@media (max-width: 399px) {}
|
|
Loading…
Reference in New Issue
Block a user