Commit a6fb770e authored by Chris Rebert's avatar Chris Rebert
Browse files

move grid classes cascade explanation into main grid docs section

parent 113fc1de
4 merge requests!28721Hot test,!22103test,!12837move grid classes cascade explanation into main grid docs section,!25326Adjust examples
Showing with 1 addition and 1 deletion
+1 -1
...@@ -79,6 +79,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e ...@@ -79,6 +79,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.</li> <li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.</li>
<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li> <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li> <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
<li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
</ul> </ul>
<p>Look to the examples for applying these principles to your code.</p> <p>Look to the examples for applying these principles to your code.</p>
...@@ -180,7 +181,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e ...@@ -180,7 +181,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
</tbody> </tbody>
</table> </table>
</div> </div>
<p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3> <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p> <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>
......
Supports Markdown
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