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

decreasing the specificity of all grid items, changing small grid sizes to rely on container padding so it flexes to near full width of viewport sub-550px

Browse Source
This commit is contained in:
dhg 2014-12-15 15:59:27 -08:00
parent d0008ad160
commit 2992a0be54
1 changed files with 55 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
css/skeleton.css vendored
View File

@ -30,64 +30,78 @@
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 80%;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0; }
.container .column,
.container .columns {
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
float: left;
width: 100%;
box-sizing: border-box; }
.row {
margin-bottom: 2rem; }
.row .column:first-child,
.row .columns:first-child {
margin-left: 0; }
/* For devices larger than 550px */
@media (min-width: 550px) {
.container .column,
.container .columns {
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.container .one.column,
.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; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.container .one-third.column { width: 30.6666666667%; }
.container .two-thirds.column { width: 65.3333333333%; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.container .one-half.column { width: 48%; }
.one-half.column { width: 48%; }
/* Offsets */
.container .row .offset-by-one { margin-left: 8.66666666667%; }
.container .row .offset-by-two { margin-left: 17.3333333333%; }
.container .row .offset-by-three { margin-left: 26%; }
.container .row .offset-by-four { margin-left: 34.6666666667%; }
.container .row .offset-by-five { margin-left: 43.3333333333%; }
.container .row .offset-by-six { margin-left: 52%; }
.container .row .offset-by-seven { margin-left: 60.6666666667%; }
.container .row .offset-by-eight { margin-left: 69.3333333333%; }
.container .row .offset-by-nine { margin-left: 78.0%; }
.container .row .offset-by-ten { margin-left: 86.6666666667%; }
.container .row .offset-by-eleven { margin-left: 95.3333333333%; }
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.container .row .offset-by-one-third { margin-left: 34.6666666667%; }
.container .row .offset-by-two-thirds { margin-left: 69.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.container .row .offset-by-one-half { margin-left: 52%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}