The default grid system is a 950px-wide, 12-column grid.
As shown here, a basic layout can be created with two columns each spanning a number of the 12 foundational columns defined as part of the grid system.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
<div class="row"> <div class="span3">...</div> <div class="span9">...</div> </div>
<div class="row"> <div class="span3">...</div> <div class="span3 offset6">...</div> </div>
Nesting is self-explanatory. To nest content, just add a new .row and set of .span* columns within an existing .span* column.
<div class="row"> <div class="span12"> Level 1 of column <div class="row"> <div class="span6">Level 2</div> <div class="span6">Level 2</div> </div> </div> </div>
Colour definitions are configured in our variables.less file as @color and can be suffixed with Light, Lighter and Lightest to acheive a lightness variation, for example @blue and @blueLight with @blueLightest being the last in the chain.
We can also store a darker range, by simply following the same principle as the lightness but in reverse, for example @blueDark and @blueDarker with @blueDarkest being the last in the chain.
These variations must exist if you plan to use the #color > .mixins
On the right is an example of how to use the #color mixin. You can apply the mixin directly to any element with the required property style.
Though these are nifty shortcuts
a { #color > .text(#555); #color > .border(#000); #color > .bg(#fff); } a { color: #555; border-color: #000; background-color: #fff; } Using the #theme > .generateCommon(str) mixin allows us to create a batch of common elements and their respective coloured properties with a single call. This helps to deter a repeatitive process for common styles. The str parameter is compiled in to a string which is translated in our variables.less file with coordinated colour variables as described above.
To generate a common set of elements and properties defined in the #theme mixin, you need to make sure the parameter and compiled strings exist as variables. In our example, we pass the orange string which may generate a @orangeLighter variable which is passed through to an individual #color mixin such as color.
section#page { #theme > .generateCommon('orange'); } section#page { a { color: @orange; &:hover { color: @orangeLight; } } .pod { border-color: @orangeDark; background-color: @orangeLightest; } } The entire typographic grid is based on two Less variables in our variables.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.
We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
<ul>
<ul class="unstyled">
<ol>
<dl>