BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

experimenting with the possibility of a padding based grid with negative margin rows instead of margin always

Browse Source
This commit is contained in:
dhg 2014-12-15 14:39:33 -08:00
parent d0008ad160
commit 0421885726
1 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
css/skeleton.css vendored
View File

@ -30,64 +30,67 @@
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container { .container {
position: relative; position: relative;
width: 80%; width: 100%;
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
padding: 0; } padding: 0 15px;
.container .column,
.container .columns {
float: left;
width: 100%;
box-sizing: border-box; } box-sizing: border-box; }
.row { .row {
margin-bottom: 2rem; } margin: 0 -15px 2rem; }
.row .column:first-child, .row .column,
.row .columns:first-child { .row .columns {
margin-left: 0; } float: left;
width: 100%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box; }
/* For devices larger than 550px */ /* For devices larger than 550px */
@media (min-width: 550px) { @media (min-width: 550px) {
.container .column, .column,
.container .columns { .columns {
margin-left: 4%; } border: 1px solid red;
}
.container .one.column, .container { width: 90%; }
.container .one.columns { width: 4.66666666667%; }
.container .two.columns { width: 13.3333333333%; }
.container .three.columns { width: 22%; }
.container .four.columns { width: 30.6666666667%; }
.container .five.columns { width: 39.3333333333%; }
.container .six.columns { width: 48%; }
.container .seven.columns { width: 56.6666666667%; }
.container .eight.columns { width: 65.3333333333%; }
.container .nine.columns { width: 74.0%; }
.container .ten.columns { width: 82.6666666667%; }
.container .eleven.columns { width: 91.3333333333%; }
.container .twelve.columns { width: 100%; margin-left: 0; }
.container .one-third.column { width: 30.6666666667%; } .row .one.column,
.container .two-thirds.column { width: 65.3333333333%; } .row .one.columns { width: 8.33333333334%; }
.row .two.columns { width: 16.6666666667%; }
.row .three.columns { width: 25%; }
.row .four.columns { width: 33.3333333334%; }
.row .five.columns { width: 41.6666666667%; }
.row .six.columns { width: 50%; }
.row .seven.columns { width: 58.3333333334%; }
.row .eight.columns { width: 66.6666666667%; }
.row .nine.columns { width: 75.0%; }
.row .ten.columns { width: 83.3333333334%; }
.row .eleven.columns { width: 91.6666666667%; }
.row .twelve.columns { width: 100%; margin-left: 0; }
.container .one-half.column { width: 48%; } .row .one-third.column { width: 33.3333333334%; }
.row .two-thirds.column { width: 66.6666666667%; }
.row .one-half.column { width: 50%; }
/* Offsets */ /* Offsets */
.container .row .offset-by-one { margin-left: 8.66666666667%; } .row .offset-by-one { margin-left: 8.33333333334%; }
.container .row .offset-by-two { margin-left: 17.3333333333%; } .row .offset-by-two { margin-left: 16.6666666667%; }
.container .row .offset-by-three { margin-left: 26%; } .row .offset-by-three { margin-left: 25%; }
.container .row .offset-by-four { margin-left: 34.6666666667%; } .row .offset-by-four { margin-left: 33.3333333334%; }
.container .row .offset-by-five { margin-left: 43.3333333333%; } .row .offset-by-five { margin-left: 41.6666666667%; }
.container .row .offset-by-six { margin-left: 52%; } .row .offset-by-six { margin-left: 50%; }
.container .row .offset-by-seven { margin-left: 60.6666666667%; } .row .offset-by-seven { margin-left: 58.3333333334%; }
.container .row .offset-by-eight { margin-left: 69.3333333333%; } .row .offset-by-eight { margin-left: 66.6666666667%; }
.container .row .offset-by-nine { margin-left: 78.0%; } .row .offset-by-nine { margin-left: 75.0%; }
.container .row .offset-by-ten { margin-left: 86.6666666667%; } .row .offset-by-ten { margin-left: 83.3333333334%; }
.container .row .offset-by-eleven { margin-left: 95.3333333333%; } .row .offset-by-eleven { margin-left: 91.6666666667%; }
.container .row .offset-by-one-third { margin-left: 34.6666666667%; } .row .offset-by-one-third { margin-left: 33.3333333334%; }
.container .row .offset-by-two-thirds { margin-left: 69.3333333333%; } .row .offset-by-two-thirds { margin-left: 66.6666666667%; }
.container .row .offset-by-one-half { margin-left: 52%; } .row .offset-by-one-half { margin-left: 50%; }
} }