Skip to content

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

New grid classes

parent 1e9be364
Expand all Show whitespace changes
Inline Side-by-side
Showing with 320 additions and 316 deletions
docs/assets/css/bootstrap.css
View file @ ca31f060
......@@ -288,19 +288,21 @@ html {
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
body,
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 20px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
a {
......@@ -344,7 +346,7 @@ p {
font-size: 21px;
font-size: 2.1rem;
font-weight: 200;
line-height: 1.25;
line-height: 1.3;
}
small {
......@@ -755,7 +757,7 @@ pre code {
clear: both;
}
[class^="span"] {
[class*="col-span-"] {
position: relative;
min-height: 1px;
padding-right: 15px;
......@@ -766,151 +768,151 @@ pre code {
.container {
max-width: 728px;
}
[class^="span"] {
[class*="col-span-"] {
float: left;
}
.span12 {
.col-span-12 {
width: 100%;
}
.span11 {
.col-span-11 {
width: 91.66666666666666%;
}
.span10 {
.col-span-10 {
width: 83.33333333333334%;
}
.span9 {
.col-span-9 {
width: 75%;
}
.span8 {
.col-span-8 {
width: 66.66666666666666%;
}
.span7 {
.col-span-7 {
width: 58.333333333333336%;
}
.span6 {
.col-span-6 {
width: 50%;
}
.span5 {
.col-span-5 {
width: 41.66666666666667%;
}
.span4 {
.col-span-4 {
width: 33.33333333333333%;
}
.span3 {
.col-span-3 {
width: 25%;
}
.span2 {
.col-span-2 {
width: 16.666666666666664%;
}
.span1 {
.col-span-1 {
width: 8.333333333333332%;
}
.offset12 {
.col-offset-12 {
margin-left: 100%;
}
.offset11 {
.col-offset-11 {
margin-left: 91.66666666666666%;
}
.offset10 {
.col-offset-10 {
margin-left: 83.33333333333334%;
}
.offset9 {
.col-offset-9 {
margin-left: 75%;
}
.offset8 {
.col-offset-8 {
margin-left: 66.66666666666666%;
}
.offset7 {
.col-offset-7 {
margin-left: 58.333333333333336%;
}
.offset6 {
.col-offset-6 {
margin-left: 50%;
}
.offset5 {
.col-offset-5 {
margin-left: 41.66666666666667%;
}
.offset4 {
.col-offset-4 {
margin-left: 33.33333333333333%;
}
.offset3 {
.col-offset-3 {
margin-left: 25%;
}
.offset2 {
.col-offset-2 {
margin-left: 16.666666666666664%;
}
.offset1 {
.col-offset-1 {
margin-left: 8.333333333333332%;
}
.push12 {
.col-push-12 {
left: 100%;
}
.push11 {
.col-push-11 {
left: 91.66666666666666%;
}
.push10 {
.col-push-10 {
left: 83.33333333333334%;
}
.push9 {
.col-push-9 {
left: 75%;
}
.push8 {
.col-push-8 {
left: 66.66666666666666%;
}
.push7 {
.col-push-7 {
left: 58.333333333333336%;
}
.push6 {
.col-push-6 {
left: 50%;
}
.push5 {
.col-push-5 {
left: 41.66666666666667%;
}
.push4 {
.col-push-4 {
left: 33.33333333333333%;
}
.push3 {
.col-push-3 {
left: 25%;
}
.push2 {
.col-push-2 {
left: 16.666666666666664%;
}
.push1 {
.col-push-1 {
left: 8.333333333333332%;
}
.pull12 {
.col-pull-12 {
right: 100%;
}
.pull11 {
.col-pull-11 {
right: 91.66666666666666%;
}
.pull10 {
.col-pull-10 {
right: 83.33333333333334%;
}
.pull9 {
.col-pull-9 {
right: 75%;
}
.pull8 {
.col-pull-8 {
right: 66.66666666666666%;
}
.pull7 {
.col-pull-7 {
right: 58.333333333333336%;
}
.pull6 {
.col-pull-6 {
right: 50%;
}
.pull5 {
.col-pull-5 {
right: 41.66666666666667%;
}
.pull4 {
.col-pull-4 {
right: 33.33333333333333%;
}
.pull3 {
.col-pull-3 {
right: 25%;
}
.pull2 {
.col-pull-2 {
right: 16.666666666666664%;
}
.pull1 {
.col-pull-1 {
right: 8.333333333333332%;
}
}
......@@ -927,7 +929,7 @@ pre code {
}
}
[class*="span"].pull-right {
[class*="col-span-"].pull-right {
float: right;
}
......@@ -1065,13 +1067,13 @@ th {
background-color: #f5f5f5;
}
table col[class^="span"] {
table col[class*="col-span-"] {
display: table-column;
float: none;
}
table td[class^="span"],
table th[class^="span"] {
table td[class*="col-span-"],
table th[class*="col-span-"] {
display: table-cell;
float: none;
}
......
docs/assets/css/docs.css
View file @ ca31f060
......@@ -159,13 +159,13 @@ section > ul li {
.show-grid {
margin-bottom: 15px;
}
.show-grid [class^="span"] {
.show-grid [class*="col-span-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
.show-grid [class*="span"]:hover {
.show-grid [class*="col-span-"]:hover {
background-color: #ddd;
}
......
docs/components.html
View file @ ca31f060
......@@ -19,7 +19,7 @@ title: Components
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#dropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Dropdowns</a></li>
<li><a href="#buttonGroups"><i class="glyphicon glyphicon-chevron-right"></i> Button groups</a></li>
......@@ -38,7 +38,7 @@ title: Components
<li><a href="#misc"><i class="glyphicon glyphicon-chevron-right"></i> Misc</a></li>
</ul>
</div>
<div class="span9">
<div class="col-span-9">
......
docs/css.html
View file @ ca31f060
This diff is collapsed.
docs/customize.html
View file @ ca31f060
......@@ -19,7 +19,7 @@ title: Customize and download
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#components"><i class="glyphicon glyphicon-chevron-right"></i> 1. Choose components</a></li>
<li><a href="#plugins"><i class="glyphicon glyphicon-chevron-right"></i> 2. Select jQuery plugins</a></li>
......@@ -27,7 +27,7 @@ title: Customize and download
<li><a href="#download"><i class="glyphicon glyphicon-chevron-right"></i> 4. Download</a></li>
</ul>
</div>
<div class="span9">
<div class="col-span-9">
<!-- Customize form
......
docs/getting-started.html
View file @ ca31f060
......@@ -19,7 +19,7 @@ description: Overview of the project, its contents, and how to get started with
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#download-bootstrap"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
<li><a href="#file-structure"><i class="glyphicon glyphicon-chevron-right"></i> File structure</a></li>
......@@ -29,7 +29,7 @@ description: Overview of the project, its contents, and how to get started with
<li><a href="#what-next"><i class="glyphicon glyphicon-chevron-right"></i> What next?</a></li>
</ul>
</div>
<div class="span9">
<div class="col-span-9">
......
docs/index.html
View file @ ca31f060
......@@ -30,17 +30,17 @@ title: Bootstrap
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
<div class="row">
<div class="span4">
<div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
<h2>By nerds, for nerds.</h2>
<p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
</div>
<div class="span4">
<div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
<h2>Made for everyone.</h2>
<p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
</div>
<div class="span4">
<div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2>
<p>A 12-column responsive <a href="./css/#grid-system">grid</a>, dozens of components, <a href="./javascript/">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
......@@ -50,22 +50,22 @@ title: Bootstrap
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For more sites built with Bootstrap, <a href="http://expo.getbootstrap.com">visit the Expo</a> or <a href="./getting-started/#examples">browse the examples</a>.</p>
<div class="row bs-docs-gallery">
<div class="span3">
<div class="col-span-3">
<a class="thumbnail" href="http://delicious.com" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/delicious.jpg" alt="Delicious">
</a>
</div>
<div class="span3">
<div class="col-span-3">
<a class="thumbnail" href="https://yourkarma.com" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/karma.jpg" alt="Karma">
</a>
</div>
<div class="span3">
<div class="col-span-3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/soundready.jpg" alt="SoundReady">
</a>
</div>
<div class="span3">
<div class="col-span-3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/kippt.jpg" alt="Kippt">
</a>
......
docs/javascript.html
View file @ ca31f060
......@@ -17,7 +17,7 @@ title: JavaScript plugins
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#overview"><i class="glyphicon glyphicon-chevron-right"></i> Overview</a></li>
<li><a href="#transitions"><i class="glyphicon glyphicon-chevron-right"></i> Transitions</a></li>
......@@ -35,7 +35,7 @@ title: JavaScript plugins
<li><a href="#affix"><i class="glyphicon glyphicon-chevron-right"></i> Affix</a></li>
</ul>
</div>
<div class="span9">
<div class="col-span-9">
<!-- Overview
......
less/grid.less
View file @ ca31f060
......@@ -12,7 +12,7 @@
.row {
.make-row();
}
[class^="span"] {
[class*="col-span-"] {
position: relative;
min-height: 1px;
padding-left: (@grid-gutter-width / 2);
......@@ -25,7 +25,7 @@
max-width: 728px;
}
// Generate the grid columns and offsets
[class^="span"] { float: left; }
[class*="col-span-"] { float: left; }
.generate-grid-columns(@grid-columns);
}
......@@ -44,6 +44,6 @@
}
// Reset utility classes due to specificity
[class*="span"].pull-right {
[class*="col-span-"].pull-right {
float: right;
}
less/mixins.less
View file @ ca31f060
......@@ -449,52 +449,52 @@
.generate-grid-columns(@grid-columns) {
// Default columns
.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX((@index - 1));
.col-span-X (@index) when (@index > 0) {
.col-span-@{index} { .col-span-(@index); }
.col-span-X((@index - 1));
}
.spanX(0) {}
.col-span-X(0) {}
// Offsets (gaps between columns)
.offsetX (@index) when (@index > 0) {
.offset@{index} { .offset(@index); }
.offsetX((@index - 1));
.col-offset-X (@index) when (@index > 0) {
.col-offset-@{index} { .col-offset-(@index); }
.col-offset-X((@index - 1));
}
.offsetX (0) {}
.col-offset-X (0) {}
// Source ordering
.pushX (@index) when (@index > 0) {
.push@{index} { .push(@index); }
.pushX((@index - 1));
.col-push-X (@index) when (@index > 0) {
.col-push-@{index} { .col-push-(@index); }
.col-push-X((@index - 1));
}
.pushX (0) {}
.col-push-X (0) {}
// Source ordering
.pullX (@index) when (@index > 0) {
.pull@{index} { .pull(@index); }
.pullX((@index - 1));
.col-pull-X (@index) when (@index > 0) {
.col-pull-@{index} { .col-pull-(@index); }
.col-pull-X((@index - 1));
}
.pullX (0) {}
.col-pull-X (0) {}
// Apply the styles
.span(@columns) {
.col-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
.offset(@columns) {
.col-offset-(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.push(@columns) {
.col-push-(@columns) {
left: percentage((@columns / @grid-columns));
}
.pull(@columns) {
.col-pull-(@columns) {
right: percentage((@columns / @grid-columns));
}
// Generate .spanX and .offsetX
.spanX(@grid-columns);
.offsetX(@grid-columns);
.pushX(@grid-columns);
.pullX(@grid-columns);
.col-span-X(@grid-columns);
.col-offset-X(@grid-columns);
.col-push-X(@grid-columns);
.col-pull-X(@grid-columns);
}
......
less/scaffolding.less
View file @ ca31f060
......@@ -30,19 +30,21 @@ html {
}
body {
font-family: @font-family-base;
.font-size();
line-height: @line-height-base;
color: @text-color;
background-color: @body-background;
}
// Reset fonts for revelant elements
body,
input,
button,
select,
textarea {
font-family: @font-family-base;
.font-size();
line-height: @line-height-base;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
......
less/tables.less
View file @ ca31f060
......@@ -179,12 +179,12 @@ th {
// -----------------
// Reset default table behavior
table col[class^="span"] {
table col[class*="col-span-"] {
float: none;
display: table-column;
}
table td[class^="span"],
table th[class^="span"] {
table td[class*="col-span-"],
table th[class*="col-span-"] {
float: none;
display: table-cell;
}
......
less/type.less
View file @ ca31f060
......@@ -13,7 +13,7 @@ p {
margin-bottom: @line-height-base;
.font-size((@font-size-base * 1.5));
font-weight: 200;
line-height: 1.25;
line-height: 1.3;
}
......
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