New grid classes

docs/assets/css/bootstrap.css

@@ -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

@@ -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

@@ -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/customize.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;
 }