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

This commit is contained in:
dhg 2014-12-15 15:59:27 -08:00
parent d0008ad160
commit 2992a0be54

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%; }
.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; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.container .one-third.column { width: 30.6666666667%; }
.container .two-thirds.column { width: 65.3333333333%; }
.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-half.column { width: 48%; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.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%; }
}