Skip to content

B
bootstrap
Commit c814ad18 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Combine separate efforts for grid mixins into one, cleanup and reorganize

parent 969cb04a
Show whitespace changes
Inline Side-by-side
Showing with 582 additions and 601 deletions
_includes/header.html
View file @ c814ad18
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</title> </title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="{{ page.base_url }}dist/css/bootstrap.css" rel="stylesheet"> <link href="{{ page.base_url }}dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="{{ page.base_url }}docs-assets/css/docs.css" rel="stylesheet"> <link href="{{ page.base_url }}docs-assets/css/docs.css" rel="stylesheet">
......
dist/css/bootstrap.css
View file @ c814ad18
...@@ -805,52 +805,52 @@ pre code { ...@@ -805,52 +805,52 @@ pre code {
} }
.col-xs-1, .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,
.col-sm-1, .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,
.col-md-1, .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,
.col-lg-1, .col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2, .col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3, .col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4, .col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5, .col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6, .col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7, .col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8, .col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9, .col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10, .col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11, .col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 { .col-lg-12 {
position: relative; position: relative;
min-height: 1px; min-height: 1px;
...@@ -872,52 +872,196 @@ pre code { ...@@ -872,52 +872,196 @@ pre code {
float: left; float: left;
} }
.col-xs-1 { .col-xs-12 {
width: 8.333333333333332%; width: 100%;
} }
.col-xs-2 { .col-xs-11 {
width: 16.666666666666664%; width: 91.66666666666666%;
} }
.col-xs-3 { .col-xs-10 {
width: 25%; width: 83.33333333333334%;
} }
.col-xs-4 { .col-xs-9 {
width: 33.33333333333333%; width: 75%;
} }
.col-xs-5 { .col-xs-8 {
width: 41.66666666666667%; width: 66.66666666666666%;
}
.col-xs-7 {
width: 58.333333333333336%;
} }
.col-xs-6 { .col-xs-6 {
width: 50%; width: 50%;
} }
.col-xs-7 { .col-xs-5 {
width: 58.333333333333336%; width: 41.66666666666667%;
} }
.col-xs-8 { .col-xs-4 {
width: 66.66666666666666%; width: 33.33333333333333%;
} }
.col-xs-9 { .col-xs-3 {
width: 75%; width: 25%;
} }
.col-xs-10 { .col-xs-2 {
width: 83.33333333333334%; width: 16.666666666666664%;
} }
.col-xs-11 { .col-xs-1 {
width: 91.66666666666666%; width: 8.333333333333332%;
} }
.col-xs-12 { .col-xs-pull-12 {
width: 100%; 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-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-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%;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -937,140 +1081,149 @@ pre code { ...@@ -937,140 +1081,149 @@ pre code {
.col-sm-11 { .col-sm-11 {
float: left; float: left;
} }
.col-sm-1 { .col-sm-12 {
width: 8.333333333333332%; width: 100%;
} }
.col-sm-2 { .col-sm-11 {
width: 16.666666666666664%; width: 91.66666666666666%;
} }
.col-sm-3 { .col-sm-10 {
width: 25%; width: 83.33333333333334%;
} }
.col-sm-4 { .col-sm-9 {
width: 33.33333333333333%; width: 75%;
} }
.col-sm-5 { .col-sm-8 {
width: 41.66666666666667%; width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
} }
.col-sm-6 { .col-sm-6 {
width: 50%; width: 50%;
} }
.col-sm-7 { .col-sm-5 {
width: 58.333333333333336%; width: 41.66666666666667%;
} }
.col-sm-8 { .col-sm-4 {
width: 66.66666666666666%; width: 33.33333333333333%;
} }
.col-sm-9 { .col-sm-3 {
width: 75%; width: 25%;
} }
.col-sm-10 { .col-sm-2 {
width: 83.33333333333334%; width: 16.666666666666664%;
} }
.col-sm-11 { .col-sm-1 {
width: 91.66666666666666%; width: 8.333333333333332%;
} }
.col-sm-12 { .col-sm-pull-12 {
width: 100%; right: 100%;
} }
.col-sm-push-1 { .col-sm-pull-11 {
left: 8.333333333333332%; right: 91.66666666666666%;
} }
.col-sm-push-2 { .col-sm-pull-10 {
left: 16.666666666666664%; right: 83.33333333333334%;
} }
.col-sm-push-3 { .col-sm-pull-9 {
left: 25%; right: 75%;
} }
.col-sm-push-4 { .col-sm-pull-8 {
left: 33.33333333333333%; right: 66.66666666666666%;
} }
.col-sm-push-5 { .col-sm-pull-7 {
left: 41.66666666666667%; right: 58.333333333333336%;
} }
.col-sm-push-6 { .col-sm-pull-6 {
left: 50%; right: 50%;
} }
.col-sm-push-7 { .col-sm-pull-5 {
left: 58.333333333333336%; right: 41.66666666666667%;
} }
.col-sm-push-8 { .col-sm-pull-4 {
left: 66.66666666666666%; right: 33.33333333333333%;
} }
.col-sm-push-9 { .col-sm-pull-3 {
left: 75%; right: 25%;
} }
.col-sm-push-10 { .col-sm-pull-2 {
left: 83.33333333333334%; right: 16.666666666666664%;
}
.col-sm-pull-1 {
right: 8.333333333333332%;
}
.col-sm-push-12 {
left: 100%;
} }
.col-sm-push-11 { .col-sm-push-11 {
left: 91.66666666666666%; left: 91.66666666666666%;
} }
.col-sm-pull-1 { .col-sm-push-10 {
right: 8.333333333333332%; left: 83.33333333333334%;
} }
.col-sm-pull-2 { .col-sm-push-9 {
right: 16.666666666666664%; left: 75%;
} }
.col-sm-pull-3 { .col-sm-push-8 {
right: 25%; left: 66.66666666666666%;
} }
.col-sm-pull-4 { .col-sm-push-7 {
right: 33.33333333333333%; left: 58.333333333333336%;
} }
.col-sm-pull-5 { .col-sm-push-6 {
right: 41.66666666666667%; left: 50%;
} }
.col-sm-pull-6 { .col-sm-push-5 {
right: 50%; left: 41.66666666666667%;
} }
.col-sm-pull-7 { .col-sm-push-4 {
right: 58.333333333333336%; left: 33.33333333333333%;
} }
.col-sm-pull-8 { .col-sm-push-3 {
right: 66.66666666666666%; left: 25%;
} }
.col-sm-pull-9 { .col-sm-push-2 {
right: 75%; left: 16.666666666666664%;
} }
.col-sm-pull-10 { .col-sm-push-1 {
right: 83.33333333333334%; left: 8.333333333333332%;
} }
.col-sm-pull-11 { .col-sm-offset-12 {
right: 91.66666666666666%; margin-left: 100%;
} }
.col-sm-offset-1 { .col-sm-offset-11 {
margin-left: 8.333333333333332%; margin-left: 91.66666666666666%;
} }
.col-sm-offset-2 { .col-sm-offset-10 {
margin-left: 16.666666666666664%; margin-left: 83.33333333333334%;
} }
.col-sm-offset-3 { .col-sm-offset-9 {
margin-left: 25%; margin-left: 75%;
} }
.col-sm-offset-4 { .col-sm-offset-8 {
margin-left: 33.33333333333333%; margin-left: 66.66666666666666%;
} }
.col-sm-offset-5 { .col-sm-offset-7 {
margin-left: 41.66666666666667%; margin-left: 58.333333333333336%;
} }
.col-sm-offset-6 { .col-sm-offset-6 {
margin-left: 50%; margin-left: 50%;
} }
.col-sm-offset-7 { .col-sm-offset-5 {
margin-left: 58.333333333333336%; margin-left: 41.66666666666667%;
} }
.col-sm-offset-8 { .col-sm-offset-4 {
margin-left: 66.66666666666666%; margin-left: 33.33333333333333%;
} }
.col-sm-offset-9 { .col-sm-offset-3 {
margin-left: 75%; margin-left: 25%;
} }
.col-sm-offset-10 { .col-sm-offset-2 {
margin-left: 83.33333333333334%; margin-left: 16.666666666666664%;
} }
.col-sm-offset-11 { .col-sm-offset-1 {
margin-left: 91.66666666666666%; margin-left: 8.333333333333332%;
} }
} }
...@@ -1091,149 +1244,149 @@ pre code { ...@@ -1091,149 +1244,149 @@ pre code {
.col-md-11 { .col-md-11 {
float: left; float: left;
} }
.col-md-1 { .col-md-12 {
width: 8.333333333333332%; width: 100%;
}
.col-md-2 {
width: 16.666666666666664%;
} }
.col-md-3 { .col-md-11 {
width: 25%; width: 91.66666666666666%;
} }
.col-md-4 { .col-md-10 {
width: 33.33333333333333%; width: 83.33333333333334%;
} }
.col-md-5 { .col-md-9 {
width: 41.66666666666667%; width: 75%;
} }
.col-md-6 { .col-md-8 {
width: 50%; width: 66.66666666666666%;
} }
.col-md-7 { .col-md-7 {
width: 58.333333333333336%; width: 58.333333333333336%;
} }
.col-md-8 { .col-md-6 {
width: 66.66666666666666%; width: 50%;
}
.col-md-9 {
width: 75%;
} }
.col-md-10 { .col-md-5 {
width: 83.33333333333334%; width: 41.66666666666667%;
} }
.col-md-11 { .col-md-4 {
width: 91.66666666666666%; width: 33.33333333333333%;
} }
.col-md-12 { .col-md-3 {
width: 100%; width: 25%;
} }
.col-md-push-0 { .col-md-2 {
left: auto; width: 16.666666666666664%;
} }
.col-md-push-1 { .col-md-1 {
left: 8.333333333333332%; width: 8.333333333333332%;
} }
.col-md-push-2 { .col-md-pull-12 {
left: 16.666666666666664%; right: 100%;
} }
.col-md-push-3 { .col-md-pull-11 {
left: 25%; right: 91.66666666666666%;
} }
.col-md-push-4 { .col-md-pull-10 {
left: 33.33333333333333%; right: 83.33333333333334%;
} }
.col-md-push-5 { .col-md-pull-9 {
left: 41.66666666666667%; right: 75%;
} }
.col-md-push-6 { .col-md-pull-8 {
left: 50%; right: 66.66666666666666%;
} }
.col-md-push-7 { .col-md-pull-7 {
left: 58.333333333333336%; right: 58.333333333333336%;
} }
.col-md-push-8 { .col-md-pull-6 {
left: 66.66666666666666%; right: 50%;
} }
.col-md-push-9 { .col-md-pull-5 {
left: 75%; right: 41.66666666666667%;
} }
.col-md-push-10 { .col-md-pull-4 {
left: 83.33333333333334%; right: 33.33333333333333%;
} }
.col-md-push-11 { .col-md-pull-3 {
left: 91.66666666666666%; right: 25%;
} }
.col-md-pull-0 { .col-md-pull-2 {
right: auto; right: 16.666666666666664%;
} }
.col-md-pull-1 { .col-md-pull-1 {
right: 8.333333333333332%; right: 8.333333333333332%;
} }
.col-md-pull-2 { .col-md-push-12 {
right: 16.666666666666664%; left: 100%;
}
.col-md-push-11 {
left: 91.66666666666666%;
}
.col-md-push-10 {
left: 83.33333333333334%;
} }
.col-md-pull-3 { .col-md-push-9 {
right: 25%; left: 75%;
} }
.col-md-pull-4 { .col-md-push-8 {
right: 33.33333333333333%; left: 66.66666666666666%;
} }
.col-md-pull-5 { .col-md-push-7 {
right: 41.66666666666667%; left: 58.333333333333336%;
} }
.col-md-pull-6 { .col-md-push-6 {
right: 50%; left: 50%;
} }
.col-md-pull-7 { .col-md-push-5 {
right: 58.333333333333336%; left: 41.66666666666667%;
} }
.col-md-pull-8 { .col-md-push-4 {
right: 66.66666666666666%; left: 33.33333333333333%;
} }
.col-md-pull-9 { .col-md-push-3 {
right: 75%; left: 25%;
} }
.col-md-pull-10 { .col-md-push-2 {
right: 83.33333333333334%; left: 16.666666666666664%;
} }
.col-md-pull-11 { .col-md-push-1 {
right: 91.66666666666666%; left: 8.333333333333332%;
} }
.col-md-offset-0 { .col-md-offset-12 {
margin-left: 0; margin-left: 100%;
} }
.col-md-offset-1 { .col-md-offset-11 {
margin-left: 8.333333333333332%; margin-left: 91.66666666666666%;
} }
.col-md-offset-2 { .col-md-offset-10 {
margin-left: 16.666666666666664%; margin-left: 83.33333333333334%;
} }
.col-md-offset-3 { .col-md-offset-9 {
margin-left: 25%; margin-left: 75%;
} }
.col-md-offset-4 { .col-md-offset-8 {
margin-left: 33.33333333333333%; margin-left: 66.66666666666666%;
} }
.col-md-offset-5 { .col-md-offset-7 {
margin-left: 41.66666666666667%; margin-left: 58.333333333333336%;
} }
.col-md-offset-6 { .col-md-offset-6 {
margin-left: 50%; margin-left: 50%;
} }
.col-md-offset-7 { .col-md-offset-5 {
margin-left: 58.333333333333336%; margin-left: 41.66666666666667%;
} }
.col-md-offset-8 { .col-md-offset-4 {
margin-left: 66.66666666666666%; margin-left: 33.33333333333333%;
} }
.col-md-offset-9 { .col-md-offset-3 {
margin-left: 75%; margin-left: 25%;
} }
.col-md-offset-10 { .col-md-offset-2 {
margin-left: 83.33333333333334%; margin-left: 16.666666666666664%;
} }
.col-md-offset-11 { .col-md-offset-1 {
margin-left: 91.66666666666666%; margin-left: 8.333333333333332%;
} }
} }
...@@ -1254,149 +1407,149 @@ pre code { ...@@ -1254,149 +1407,149 @@ pre code {
.col-lg-11 { .col-lg-11 {
float: left; float: left;
} }
.col-lg-1 { .col-lg-12 {
width: 8.333333333333332%; width: 100%;
}
.col-lg-2 {
width: 16.666666666666664%;
} }
.col-lg-3 { .col-lg-11 {
width: 25%; width: 91.66666666666666%;
} }
.col-lg-4 { .col-lg-10 {
width: 33.33333333333333%; width: 83.33333333333334%;
} }
.col-lg-5 { .col-lg-9 {
width: 41.66666666666667%; width: 75%;
} }
.col-lg-6 { .col-lg-8 {
width: 50%; width: 66.66666666666666%;
} }
.col-lg-7 { .col-lg-7 {
width: 58.333333333333336%; width: 58.333333333333336%;
} }
.col-lg-8 { .col-lg-6 {
width: 66.66666666666666%; width: 50%;
}
.col-lg-9 {
width: 75%;
} }
.col-lg-10 { .col-lg-5 {
width: 83.33333333333334%; width: 41.66666666666667%;
} }
.col-lg-11 { .col-lg-4 {
width: 91.66666666666666%; width: 33.33333333333333%;
} }
.col-lg-12 { .col-lg-3 {
width: 100%; width: 25%;
} }
.col-lg-push-0 { .col-lg-2 {
left: auto; width: 16.666666666666664%;
} }
.col-lg-push-1 { .col-lg-1 {
left: 8.333333333333332%; width: 8.333333333333332%;
} }
.col-lg-push-2 { .col-lg-pull-12 {
left: 16.666666666666664%; right: 100%;
} }
.col-lg-push-3 { .col-lg-pull-11 {
left: 25%; right: 91.66666666666666%;
} }
.col-lg-push-4 { .col-lg-pull-10 {
left: 33.33333333333333%; right: 83.33333333333334%;
} }
.col-lg-push-5 { .col-lg-pull-9 {
left: 41.66666666666667%; right: 75%;
} }
.col-lg-push-6 { .col-lg-pull-8 {
left: 50%; right: 66.66666666666666%;
} }
.col-lg-push-7 { .col-lg-pull-7 {
left: 58.333333333333336%; right: 58.333333333333336%;
} }
.col-lg-push-8 { .col-lg-pull-6 {
left: 66.66666666666666%; right: 50%;
} }
.col-lg-push-9 { .col-lg-pull-5 {
left: 75%; right: 41.66666666666667%;
} }
.col-lg-push-10 { .col-lg-pull-4 {
left: 83.33333333333334%; right: 33.33333333333333%;
} }
.col-lg-push-11 { .col-lg-pull-3 {
left: 91.66666666666666%; right: 25%;
} }
.col-lg-pull-0 { .col-lg-pull-2 {
right: auto; right: 16.666666666666664%;
} }
.col-lg-pull-1 { .col-lg-pull-1 {
right: 8.333333333333332%; right: 8.333333333333332%;
} }
.col-lg-pull-2 { .col-lg-push-12 {
right: 16.666666666666664%; left: 100%;
} }
.col-lg-pull-3 { .col-lg-push-11 {
right: 25%; left: 91.66666666666666%;
} }
.col-lg-pull-4 { .col-lg-push-10 {
right: 33.33333333333333%; left: 83.33333333333334%;
} }
.col-lg-pull-5 { .col-lg-push-9 {
right: 41.66666666666667%; left: 75%;
} }
.col-lg-pull-6 { .col-lg-push-8 {
right: 50%; left: 66.66666666666666%;
} }
.col-lg-pull-7 { .col-lg-push-7 {
right: 58.333333333333336%; left: 58.333333333333336%;
} }
.col-lg-pull-8 { .col-lg-push-6 {
right: 66.66666666666666%; left: 50%;
} }
.col-lg-pull-9 { .col-lg-push-5 {
right: 75%; left: 41.66666666666667%;
} }
.col-lg-pull-10 { .col-lg-push-4 {
right: 83.33333333333334%; left: 33.33333333333333%;
} }
.col-lg-pull-11 { .col-lg-push-3 {
right: 91.66666666666666%; left: 25%;
} }
.col-lg-offset-0 { .col-lg-push-2 {
margin-left: 0; left: 16.666666666666664%;
} }
.col-lg-offset-1 { .col-lg-push-1 {
margin-left: 8.333333333333332%; left: 8.333333333333332%;
} }
.col-lg-offset-2 { .col-lg-offset-12 {
margin-left: 16.666666666666664%; margin-left: 100%;
} }
.col-lg-offset-3 { .col-lg-offset-11 {
margin-left: 25%; margin-left: 91.66666666666666%;
} }
.col-lg-offset-4 { .col-lg-offset-10 {
margin-left: 33.33333333333333%; margin-left: 83.33333333333334%;
} }
.col-lg-offset-5 { .col-lg-offset-9 {
margin-left: 41.66666666666667%; margin-left: 75%;
} }
.col-lg-offset-6 { .col-lg-offset-8 {
margin-left: 50%; margin-left: 66.66666666666666%;
} }
.col-lg-offset-7 { .col-lg-offset-7 {
margin-left: 58.333333333333336%; margin-left: 58.333333333333336%;
} }
.col-lg-offset-8 { .col-lg-offset-6 {
margin-left: 66.66666666666666%; margin-left: 50%;
} }
.col-lg-offset-9 { .col-lg-offset-5 {
margin-left: 75%; margin-left: 41.66666666666667%;
} }
.col-lg-offset-10 { .col-lg-offset-4 {
margin-left: 83.33333333333334%; margin-left: 33.33333333333333%;
} }
.col-lg-offset-11 { .col-lg-offset-3 {
margin-left: 91.66666666666666%; margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.666666666666664%;
}
.col-lg-offset-1 {
margin-left: 8.333333333333332%;
} }
} }
......
dist/css/bootstrap.min.css
View file @ c814ad18
This source diff could not be displayed because it is too large. You can view the blob instead.
docs-assets/css/docs.css
View file @ c814ad18
...@@ -400,6 +400,12 @@ body { ...@@ -400,6 +400,12 @@ body {
.bs-docs-home .bs-masthead-links { .bs-docs-home .bs-masthead-links {
margin-left: 350px; margin-left: 350px;
} }
.bs-docs-home .bs-social {
margin-bottom: 10px;
}
.bs-docs-home .bs-masthead-links {
margin-top: 10px;
}
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.bs-docs-home .carbonad { .bs-docs-home .carbonad {
......
less/grid.less
View file @ c814ad18
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
// Grid system // Grid system
// -------------------------------------------------- // --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries // Set the container width, and override it for fixed navbars in media queries
.container { .container {
.container-fixed(); .container-fixed();
...@@ -14,61 +13,7 @@ ...@@ -14,61 +13,7 @@
} }
// Common styles for small and large grid columns // Common styles for small and large grid columns
.col-xs-1, .make-grid-columns();
.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,
.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,
.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,
.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 {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
// Extra small grid // Extra small grid
...@@ -79,31 +24,11 @@ ...@@ -79,31 +24,11 @@
// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
// it's full-width. // it's full-width.
.col-xs-1, .make-grid-columns-float(xs);
.col-xs-2, .make-grid(@grid-columns, xs, width);
.col-xs-3, .make-grid(@grid-columns, xs, pull);
.col-xs-4, .make-grid(@grid-columns, xs, push);
.col-xs-5, .make-grid(@grid-columns, xs, offset);
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
float: left;
}
.col-xs-1 { width: percentage((1 / @grid-columns)); }
.col-xs-2 { width: percentage((2 / @grid-columns)); }
.col-xs-3 { width: percentage((3 / @grid-columns)); }
.col-xs-4 { width: percentage((4 / @grid-columns)); }
.col-xs-5 { width: percentage((5 / @grid-columns)); }
.col-xs-6 { width: percentage((6 / @grid-columns)); }
.col-xs-7 { width: percentage((7 / @grid-columns)); }
.col-xs-8 { width: percentage((8 / @grid-columns)); }
.col-xs-9 { width: percentage((9 / @grid-columns)); }
.col-xs-10 { width: percentage((10/ @grid-columns)); }
.col-xs-11 { width: percentage((11/ @grid-columns)); }
.col-xs-12 { width: 100%; }
// Small grid // Small grid
...@@ -119,69 +44,11 @@ ...@@ -119,69 +44,11 @@
width: @container-sm; width: @container-sm;
} }
.col-sm-1, .make-grid-columns-float(sm);
.col-sm-2, .make-grid(@grid-columns, sm, width);
.col-sm-3, .make-grid(@grid-columns, sm, pull);
.col-sm-4, .make-grid(@grid-columns, sm, push);
.col-sm-5, .make-grid(@grid-columns, sm, offset);
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11 {
float: left;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Push and pull columns for source order changes
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
} }
...@@ -196,72 +63,12 @@ ...@@ -196,72 +63,12 @@
.container { .container {
width: @container-md; width: @container-md;
} }
.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 {
float: left;
}
.col-md-1 { width: percentage((1 / @grid-columns)); }
.col-md-2 { width: percentage((2 / @grid-columns)); }
.col-md-3 { width: percentage((3 / @grid-columns)); }
.col-md-4 { width: percentage((4 / @grid-columns)); }
.col-md-5 { width: percentage((5 / @grid-columns)); }
.col-md-6 { width: percentage((6 / @grid-columns)); }
.col-md-7 { width: percentage((7 / @grid-columns)); }
.col-md-8 { width: percentage((8 / @grid-columns)); }
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
.col-md-12 { width: 100%; }
// Push and pull columns for source order changes .make-grid-columns-float(md);
.col-md-push-0 { left: auto; } .make-grid(@grid-columns, md, width);
.col-md-push-1 { left: percentage((1 / @grid-columns)); } .make-grid(@grid-columns, md, pull);
.col-md-push-2 { left: percentage((2 / @grid-columns)); } .make-grid(@grid-columns, md, push);
.col-md-push-3 { left: percentage((3 / @grid-columns)); } .make-grid(@grid-columns, md, offset);
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-0 { right: auto; }
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-md-offset-0 { margin-left: 0; }
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
} }
...@@ -277,70 +84,10 @@ ...@@ -277,70 +84,10 @@
width: @container-lg; width: @container-lg;
} }
.col-lg-1, .make-grid-columns-float(lg);
.col-lg-2, .make-grid(@grid-columns, lg, width);
.col-lg-3, .make-grid(@grid-columns, lg, pull);
.col-lg-4, .make-grid(@grid-columns, lg, push);
.col-lg-5, .make-grid(@grid-columns, lg, offset);
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11 {
float: left;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.col-lg-push-0 { left: auto; }
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-0 { right: auto; }
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-lg-offset-0 { margin-left: 0; }
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
} }
less/mixins.less
View file @ c814ad18
...@@ -565,6 +565,7 @@ ...@@ -565,6 +565,7 @@
td& { display: none !important; } td& { display: none !important; }
} }
// Grid System // Grid System
// ----------- // -----------
...@@ -696,6 +697,80 @@ ...@@ -696,6 +697,80 @@
} }
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.make-grid-columns-float(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col(@index + 1, @item);
}
.col(@index, @list) when (@index < @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
}
.col(@index, @list) when (@index = @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid(@index, @class, @type) when (@type = width) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = push) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = pull) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.make-grid(@index, @class, @type) when (@index > 0) {
.calc-grid(@index, @class, @type);
// next iteration
.make-grid(@index - 1, @class, @type);
}
// Form validation states // Form validation states
// //
// Used in forms.less to generate the form validation CSS for warnings, errors, // Used in forms.less to generate the form validation CSS for warnings, errors,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment