Replaces grid with container and container-fluid fixes

This commit is contained in:
Kristofer Joseph
2014-12-16 00:28:41 -08:00
parent 1436af664e
commit 62ca898b06
14 changed files with 90 additions and 1122 deletions

View File

@@ -12,7 +12,7 @@ module.exports = function(grunt) {
},
release: {
files: {
'css/flexboxgrid.css': 'src/css/flexboxgrid.css'
'dist/flexboxgrid.css': 'src/css/flexboxgrid.css'
}
}
},
@@ -28,6 +28,13 @@ module.exports = function(grunt) {
src: ['*.css', '!*.min.css'],
dest: 'css',
ext: '.min.css'
},
release: {
expand: true,
cwd: 'dist',
src: ['*.css', '!*.min.css'],
dest: 'dist',
ext: '.min.css'
}
},
uglify: {
@@ -90,6 +97,7 @@ module.exports = function(grunt) {
['cssmin:concat',
'myth',
'cssmin:minify',
'cssmin:release',
'uglify',
'processhtml',
'htmlmin'

File diff suppressed because one or more lines are too long

View File

@@ -73,7 +73,6 @@ dfn {
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
@@ -176,14 +175,12 @@ html input[disabled] {
input[type=checkbox],
input[type=radio] {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
@@ -209,7 +206,6 @@ table {
}
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
@@ -285,7 +281,6 @@ code {
}
.page-nav {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
padding: .5rem;
@@ -302,7 +297,6 @@ code {
}
.wrap {
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 75%;
margin: 0 auto;
@@ -324,7 +318,6 @@ code {
top: .75rem;
right: .75rem;
z-index: 1;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: .45rem;
height: 3rem;
@@ -358,7 +351,6 @@ code {
}
.hero {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 2rem;
background: #FFF;
@@ -391,14 +383,12 @@ code {
}
.menu {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 5rem;
background: #001a33;
}
.menu-header {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 3rem 3rem 0;
color: #eee;
@@ -421,7 +411,6 @@ code {
}
.menu-link {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 3rem;
display: block;
@@ -444,7 +433,6 @@ code {
.button {
position: relative;
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: 11rem;
padding: 0 4rem;
@@ -478,7 +466,6 @@ code {
.box-nested,
.box-row {
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 1rem;
margin-bottom: 0;
@@ -509,13 +496,11 @@ code {
}
.container {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: .5rem;
}
.page-footer {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 3rem;
}
@@ -586,13 +571,14 @@ code {
}
}
.grid {
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
.row {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -657,7 +643,6 @@ code {
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -890,7 +875,11 @@ code {
order: 1;
}
@media only screen and (min-width:48em) {
@media only screen and (min-width:var(--screen-sm-min,48em)) {
.container {
width: 46rem;
}
.col-sm,
.col-sm-1,
.col-sm-10,
@@ -916,7 +905,6 @@ code {
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -1035,12 +1023,10 @@ code {
.col-sm-offset-1 {
margin-left: 8.333333333%;
max-width: 8.333333333%;
}
.col-sm-offset-2 {
margin-left: 16.666666667%;
max-width: 16.666666667%;
}
.col-sm-offset-3 {
@@ -1152,7 +1138,11 @@ code {
}
}
@media only screen and (min-width:62em) {
@media only screen and (min-width:var(--screen-md-min,62em)) {
.container {
width: 61rem;
}
.col-md,
.col-md-1,
.col-md-10,
@@ -1178,7 +1168,6 @@ code {
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -1412,7 +1401,11 @@ code {
}
}
@media only screen and (min-width:75em) {
@media only screen and (min-width:var(--screen-lg-min,75em)) {
.container {
width: 71rem;
}
.col-lg,
.col-lg-1,
.col-lg-10,
@@ -1438,7 +1431,6 @@ code {
.col-lg-offset-7,
.col-lg-offset-8,
.col-lg-offset-9 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;

2
css/index.min.css vendored

File diff suppressed because one or more lines are too long

View File

@@ -1,379 +0,0 @@
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 18px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: normal;
background: #EEE;
line-height: 1.4rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "bree", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #001A33;
}
h2 {
font-size: 2rem;
margin: 1rem 0;
}
:focus {
outline-color: transparent;
outline-style: none;
}
h2 + p {
margin: 0 0 2rem 0;
}
a {
text-decoration: none;
color: #007FFF;
padding: 0 0 0.2rem 0;
font-weight: bold;
}
a:hover {
border-bottom: 1px solid #007FFF;
color: #007FFF;
}
pre {
overflow-x: auto;
padding: 1.25em;
border: 1px solid #e6e6e6;
border-left-width: 5px;
margin: 1.6em 0;
font-size: 0.875em;
background: #fcfcfc;
white-space: pre;
word-wrap: normal;
}
code {
color: #007FFF;
}
.inline-anchor {
padding: 1rem;
font-size: 1.5rem;
}
.layout {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.page-nav {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
padding: 0.5rem;
width: 100%;
background: transparent;
}
.page {
z-index: 0;
background: #EEE;
width: 100%;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.wrap {
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 75%;
margin: 0 auto;
}
.page-section {
padding-top: 3rem;
margin-bottom: 3rem;
}
.page-features {
width: 100%;
background: hsl(209, 100%, 10%);
overflow: scroll;
}
.menu-button {
position: fixed;
top: 0.75rem;
right: 0.75rem;
z-index: 1;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.45rem;
height: 3rem;
width: 3rem;
background: #FFF;
border: 1px solid transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.menu-button:hover {
border: 1px solid #007FFF;
border-radius: 2px;
}
.menu-button:active {
background: #EEE;
border: 1px solid transparent;
}
.open {
-webkit-transform: translate3d(-15rem, 0, 0);
transform: translate3d(-15rem, 0, 0);
}
.menu-button-icon {
width: 2rem;
height: 2rem;
}
.hero {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 2rem 2rem 2rem 2rem;
background: #FFF;
border: 1px solid #FFF;
border-radius: 2px;
}
.hero-headline {
font-size: 3rem;
white-space: nowrap;
margin-bottom: 0;
}
.hero-copy {
font-size: 1rem;
margin-bottom: 0;
padding: 0 2rem;
text-align: center;
}
.slide-menu {
display: block;
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 250px;
}
.menu {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 5rem;
background: hsl(209, 100%, 10%);
}
.menu-header {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 3rem 3rem 0 3rem;
color: #eee;
}
.menu-list {
margin: 0;
padding: 0;
list-style: none;
}
.menu-list-item {
height: 3rem;
line-height: 3rem;
font-size: 1.25rem;
color: #007FFF;
background: transparent;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.menu-link {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 3rem;
display: block;
color: #007FFF;
-webkit-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
.menu-link:hover {
color: hsl(210, 100%, 60%);
border-bottom: none;
}
.button {
position: relative;
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: 11rem;
padding: 0 4rem;
margin: 1rem;
height: 3rem;
line-height: 3rem;
border: 1px solid #007FFF;
border-radius: 2px;
color: #007FFF;
font-size: 1.25rem;
-webkit-transition: background-color, 0.15s;
transition: background-color, 0.15s;
}
.button:hover {
background: #3399FF;
border-color: #3399FF;
color: #FFF;
text-shadow: 0 1px #007FFF;
}
.button:active {
background: #007FFF;
color: #FFF;
border-top: 2px solid #0066CC;
}
.box-row,
.box-first,
.box-nested,
.box-large,
.box {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 1rem;
margin-bottom: 0;
background: #007FFF;
border: 1px solid #FFF;
border-radius: 2px;
overflow: hidden;
text-align: center;
color: white;
}
.box-row {
margin-bottom: 1rem;
}
.box-first {
background: #0066CC;
border-color: #007FFF;
}
.box-nested {
background: #003366;
border-color: #007FFF;
}
.box-large {
height: 8rem;
}
.container {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5rem;
}
.page-footer {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 3rem;
}
.tag {
color: #000;
font-weight: normal;
}
.end {
text-align: end;
}
.invisible-xs {
display: none;
visibility: hidden;
}
.visible-xs {
display: block;
visibility: visible;
}
@media only screen and (min-width: 48rem) {
body {
font-size: 16px;
}
.page {
width: 75%;
}
.slide-menu {
width: 25%;
}
.open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hero-headline {
font-size: 6rem;
margin-bottom: 2rem;
}
.hero-copy {
font-size: 1.25rem;
margin-bottom: 2rem;
}
.box-row,
.box-first,
.box-nested,
.box-large,
.box {
padding: 1rem;
}
.invisible-md {
display: none;
visibility: hidden;
}
.visible-md {
display: block;
visibility: visible;
}
}

1
css/style.min.css vendored
View File

@@ -1 +0,0 @@
body{-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#EEE;line-height:1.4rem}h1,h2,h3,h4,h5,h6{font-family:bree,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#001A33}h2{font-size:2rem;margin:1rem 0}:focus{outline-color:transparent;outline-style:none}h2+p{margin:0 0 2rem}a{text-decoration:none;color:#007FFF;padding:0 0 .2rem;font-weight:700}a:hover{border-bottom:1px solid #007FFF;color:#007FFF}pre{overflow-x:auto;padding:1.25em;border:1px solid #e6e6e6;border-left-width:5px;margin:1.6em 0;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal}code{color:#007FFF}.inline-anchor{padding:1rem;font-size:1.5rem}.layout{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.page-nav{-moz-box-sizing:border-box;box-sizing:border-box;position:fixed;padding:.5rem;width:100%;background:0 0}.page{z-index:0;background:#EEE;width:100%;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.wrap{-moz-box-sizing:border-box;box-sizing:border-box;max-width:75%;margin:0 auto}.page-section{padding-top:3rem;margin-bottom:3rem}.page-features{width:100%;background:#001a33;overflow:scroll}.menu-button{position:fixed;top:.75rem;right:.75rem;z-index:1;-moz-box-sizing:border-box;box-sizing:border-box;padding:.45rem;height:3rem;width:3rem;background:#FFF;border:1px solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-button:hover{border:1px solid #007FFF;border-radius:2px}.menu-button:active{background:#EEE;border:1px solid transparent}.open{-webkit-transform:translate3d(-15rem,0,0);transform:translate3d(-15rem,0,0)}.menu-button-icon{width:2rem;height:2rem}.hero{-moz-box-sizing:border-box;box-sizing:border-box;padding:2rem;background:#FFF;border:1px solid #FFF;border-radius:2px}.hero-headline{font-size:3rem;white-space:nowrap;margin-bottom:0}.hero-copy{font-size:1rem;margin-bottom:0;padding:0 2rem;text-align:center}.slide-menu{display:block;position:fixed;overflow:auto;top:0;right:0;bottom:0;height:100%;width:250px}.menu{-moz-box-sizing:border-box;box-sizing:border-box;padding-bottom:5rem;background:#001a33}.menu-header{-moz-box-sizing:border-box;box-sizing:border-box;padding:3rem 3rem 0;color:#eee}.menu-list{margin:0;padding:0;list-style:none}.menu-list-item{height:3rem;line-height:3rem;font-size:1.25rem;color:#007FFF;background:0 0;-webkit-transition:all .2s ease-in;transition:all .2s ease-in}.menu-link{-moz-box-sizing:border-box;box-sizing:border-box;padding-left:3rem;display:block;color:#007FFF;-webkit-transition:color .2s ease-in;transition:color .2s ease-in}.menu-link:hover{color:#3298ff;border-bottom:0}.button{position:relative;display:inline-block;-moz-box-sizing:border-box;box-sizing:border-box;min-width:11rem;padding:0 4rem;margin:1rem;height:3rem;line-height:3rem;border:1px solid #007FFF;border-radius:2px;color:#007FFF;font-size:1.25rem;-webkit-transition:background-color,.15s;transition:background-color,.15s}.button:hover{background:#39F;border-color:#39F;color:#FFF;text-shadow:0 1px #007FFF}.button:active{background:#007FFF;color:#FFF;border-top:2px solid #06C}.box,.box-first,.box-large,.box-nested,.box-row{position:relative;-moz-box-sizing:border-box;box-sizing:border-box;min-height:1rem;margin-bottom:0;background:#007FFF;border:1px solid #FFF;border-radius:2px;overflow:hidden;text-align:center;color:#fff}.box-row{margin-bottom:1rem}.box-first{background:#06C;border-color:#007FFF}.box-nested{background:#036;border-color:#007FFF}.box-large{height:8rem}.container{-moz-box-sizing:border-box;box-sizing:border-box;padding:.5rem}.page-footer{-moz-box-sizing:border-box;box-sizing:border-box;padding-bottom:3rem}.tag{color:#000;font-weight:400}.end{text-align:end}.invisible-xs{display:none;visibility:hidden}.visible-xs{display:block;visibility:visible}@media only screen and (min-width:48rem){body{font-size:16px}.page{width:75%}.slide-menu{width:25%}.open{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.hero-headline{font-size:6rem;margin-bottom:2rem}.hero-copy{font-size:1.25rem;margin-bottom:2rem}.box,.box-first,.box-large,.box-nested,.box-row{padding:1rem}.invisible-md{display:none;visibility:hidden}.visible-md{display:block;visibility:visible}}

View File

@@ -3,19 +3,29 @@
* Uncomment and set these variables to customize the grid.
*
* :root {
* --half-gutter-width: 0.5rem;
* --gutter-compensation: -0.5rem;
* --gutter-width: 1rem;
* --outer-margin: 2rem;
* --gutter-compensation: calc( var( --gutter-width / 2 ) * -1 );
* --half-gutter-width: calc( var( --gutter-width / 2 ) );
* --screen-xs-min: 30em;
* --screen-sm-min: 48em;
* --screen-md-min: 62em;
* --screen-lg-min: 75em;
* --container-sm: calc( 45rem + var( --gutter-width ) );
* --container-md: calc( 60rem + var( --gutter-width ) );
* --container-lg: calc( 70rem + var( --gutter-width ) );
* }
*
*/
.grid {
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
.row {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -80,7 +90,6 @@
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -313,7 +322,11 @@
order: 1;
}
@media only screen and (min-width: 48em) {
@media only screen and ( min-width: var( --screen-sm-min, 48em ) ) {
.container {
width: 46rem;
}
.col-sm,
.col-sm-1,
.col-sm-2,
@@ -339,7 +352,6 @@
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -458,12 +470,10 @@
.col-sm-offset-1 {
margin-left: 8.333333333%;
max-width: 8.333333333%;
}
.col-sm-offset-2 {
margin-left: 16.666666667%;
max-width: 16.666666667%;
}
.col-sm-offset-3 {
@@ -575,7 +585,11 @@
}
}
@media only screen and (min-width: 62em) {
@media only screen and ( min-width: var( --screen-md-min, 62em ) ) {
.container {
width: 61rem;
}
.col-md,
.col-md-1,
.col-md-2,
@@ -601,7 +615,6 @@
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -835,7 +848,11 @@
}
}
@media only screen and (min-width: 75em) {
@media only screen and ( min-width: var( --screen-lg-min, 75em ) ) {
.container {
width: 71rem;
}
.col-lg,
.col-lg-1,
.col-lg-2,
@@ -861,7 +878,6 @@
.col-lg-offset-10,
.col-lg-offset-11,
.col-lg-offset-12 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;

1
dist/flexboxgrid.min.css vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

File diff suppressed because one or more lines are too long

View File

@@ -3,12 +3,23 @@
* Uncomment and set these variables to customize the grid.
*
* :root {
* --half-gutter-width: 0.5rem;
* --gutter-compensation: -0.5rem;
* --gutter-width: 1rem;
* --outer-margin: 2rem;
* --gutter-compensation: calc( var( --gutter-width / 2 ) * -1 );
* --half-gutter-width: calc( var( --gutter-width / 2 ) );
* --screen-xs-min: 30em;
* --screen-sm-min: 48em;
* --screen-md-min: 62em;
* --screen-lg-min: 75em;
* --container-sm: calc( 45rem + var( --gutter-width ) );
* --container-md: calc( 60rem + var( --gutter-width ) );
* --container-lg: calc( 70rem + var( --gutter-width ) );
* }
*
*/
.grid {
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: var( --outer-margin, 2rem );
padding-left: var( --outer-margin, 2rem );
}
@@ -180,7 +191,10 @@
.last-xs {
order: 1;
}
@media only screen and (min-width: 48em) {
@media only screen and ( min-width: var( --screen-sm-min, 48em ) ) {
.container {
width: var( --container-sm, 46rem );
}
.col-sm,
.col-sm-1,
.col-sm-2,
@@ -269,11 +283,9 @@
}
.col-sm-offset-1 {
margin-left: 8.333333333%;
max-width: 8.333333333%;
}
.col-sm-offset-2 {
margin-left: 16.666666667%;
max-width: 16.666666667%;
}
.col-sm-offset-3 {
margin-left: 25%;
@@ -336,7 +348,10 @@
order: 1;
}
}
@media only screen and (min-width: 62em) {
@media only screen and ( min-width: var( --screen-md-min, 62em ) ) {
.container {
width: var( --container-md, 61rem );
}
.col-md,
.col-md-1,
.col-md-2,
@@ -490,7 +505,10 @@
order: 1;
}
}
@media only screen and (min-width: 75em) {
@media only screen and ( min-width: var( --screen-lg-min, 75em ) ) {
.container {
width: var( --container-lg, 71rem );
}
.col-lg,
.col-lg-1,
.col-lg-2,

View File

@@ -113,7 +113,7 @@ code {
}
.hero {
box-sizing: border-box;
padding: 2rem 2rem 2rem 2rem;
padding: 2rem;
background: #FFF;
border: 1px solid #FFF;
border-radius: 2px;

View File

@@ -53,7 +53,7 @@
</ul>
</section>
<button class="menu-button js-menu-button visible-xs invisible-md">
<img class="menu-button-icon" src="img/menu.svg" alt="">
<img class="menu-button-icon" src="img/menu.svg" alt="menu">
</button>
<div class="page js-page">
@@ -79,7 +79,7 @@
<h2>Responsive</h2>
<p>Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs,
sm, md & lg viewport widths.</p>
sm, md &amp; lg viewport widths.</p>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
@@ -603,7 +603,7 @@
<h2>Reordering</h2>
<p>Add classes to reorder columns.</p>
<h3><code>.first-*<code></h3>
<h3><code>.first-*</code></h3>
<div class="row">
<div class="col-xs-12">

View File

@@ -1,686 +0,0 @@
/*!
* Bootstrap v3.0.3
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666666666666%;
}
.col-xs-10 {
width: 83.33333333333334%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666666666666%;
}
.col-xs-7 {
width: 58.333333333333336%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666666666667%;
}
.col-xs-4 {
width: 33.33333333333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.666666666666664%;
}
.col-xs-1 {
width: 8.333333333333332%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666666666666%;
}
.col-xs-pull-10 {
right: 83.33333333333334%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666666666666%;
}
.col-xs-pull-7 {
right: 58.333333333333336%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666666666667%;
}
.col-xs-pull-4 {
right: 33.33333333333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.666666666666664%;
}
.col-xs-pull-1 {
right: 8.333333333333332%;
}
.col-xs-pull-0 {
right: 0%;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666666666666%;
}
.col-xs-push-10 {
left: 83.33333333333334%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666666666666%;
}
.col-xs-push-7 {
left: 58.333333333333336%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666666666667%;
}
.col-xs-push-4 {
left: 33.33333333333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.666666666666664%;
}
.col-xs-push-1 {
left: 8.333333333333332%;
}
.col-xs-push-0 {
left: 0%;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
margin-left: 0%;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666666666666%;
}
.col-sm-pull-10 {
right: 83.33333333333334%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666666666666%;
}
.col-sm-pull-7 {
right: 58.333333333333336%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666666666667%;
}
.col-sm-pull-4 {
right: 33.33333333333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.666666666666664%;
}
.col-sm-pull-1 {
right: 8.333333333333332%;
}
.col-sm-pull-0 {
right: 0%;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666666666666%;
}
.col-sm-push-10 {
left: 83.33333333333334%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666666666666%;
}
.col-sm-push-7 {
left: 58.333333333333336%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666666666667%;
}
.col-sm-push-4 {
left: 33.33333333333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.666666666666664%;
}
.col-sm-push-1 {
left: 8.333333333333332%;
}
.col-sm-push-0 {
left: 0%;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666666666666%;
}
.col-sm-offset-10 {
margin-left: 83.33333333333334%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666666666666%;
}
.col-sm-offset-7 {
margin-left: 58.333333333333336%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666666666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.666666666666664%;
}
.col-sm-offset-1 {
margin-left: 8.333333333333332%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-1 {
width: 8.333333333333332%;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666666666666%;
}
.col-md-pull-10 {
right: 83.33333333333334%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666666666666%;
}
.col-md-pull-7 {
right: 58.333333333333336%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666666666667%;
}
.col-md-pull-4 {
right: 33.33333333333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.666666666666664%;
}
.col-md-pull-1 {
right: 8.333333333333332%;
}
.col-md-pull-0 {
right: 0%;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666666666666%;
}
.col-md-push-10 {
left: 83.33333333333334%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666666666666%;
}
.col-md-push-7 {
left: 58.333333333333336%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666666666667%;
}
.col-md-push-4 {
left: 33.33333333333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.666666666666664%;
}
.col-md-push-1 {
left: 8.333333333333332%;
}
.col-md-push-0 {
left: 0%;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666666666666%;
}
.col-md-offset-10 {
margin-left: 83.33333333333334%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666666666666%;
}
.col-md-offset-7 {
margin-left: 58.333333333333336%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666666666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.666666666666664%;
}
.col-md-offset-1 {
margin-left: 8.333333333333332%;
}
.col-md-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666666666666%;
}
.col-lg-10 {
width: 83.33333333333334%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666666666666%;
}
.col-lg-7 {
width: 58.333333333333336%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666666666667%;
}
.col-lg-4 {
width: 33.33333333333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.666666666666664%;
}
.col-lg-1 {
width: 8.333333333333332%;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666666666666%;
}
.col-lg-pull-10 {
right: 83.33333333333334%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666666666666%;
}
.col-lg-pull-7 {
right: 58.333333333333336%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666666666667%;
}
.col-lg-pull-4 {
right: 33.33333333333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.666666666666664%;
}
.col-lg-pull-1 {
right: 8.333333333333332%;
}
.col-lg-pull-0 {
right: 0%;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666666666666%;
}
.col-lg-push-10 {
left: 83.33333333333334%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666666666666%;
}
.col-lg-push-7 {
left: 58.333333333333336%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666666666667%;
}
.col-lg-push-4 {
left: 33.33333333333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.666666666666664%;
}
.col-lg-push-1 {
left: 8.333333333333332%;
}
.col-lg-push-0 {
left: 0%;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666666666666%;
}
.col-lg-offset-10 {
margin-left: 83.33333333333334%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666666666666%;
}
.col-lg-offset-7 {
margin-left: 58.333333333333336%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666666666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.666666666666664%;
}
.col-lg-offset-1 {
margin-left: 8.333333333333332%;
}
.col-lg-offset-0 {
margin-left: 0%;
}
}