The responsive grid system contains 12 columns and is based on a 960 pixel width with 20px margins in
its default size. A grid is constructed with 3 main parts: a container, a row, and a column, with
containers always containing rows and rows always wrapping columns. Containers and rows are given
classes of container
and row
, respectively. Columns are given the class
col
followed by a number, 1-12. For example, a column that takes up the full width of
the row would be given the class col12
. The total width of columns or offsets in a
single row cannot exceed 12. Content should only be placed directly in columns and never in a
container or row.
<div class="container"> <div class="row"> <div class="col5"></div> <div class="col7"></div> </div> </div>
Rows and columns can also be nested into columns, so long as the width of the child columns do not exceed the width of the parent column.
At times, you may want to offset the columns in your grid. To do so, add the class
offset
, followed by a number 1-11, to the column element. At mobile device sizes, the
offsets will disappear as the columns become 100% width.
Vertical rhythm is essential for layout and typographical design elements. VM UI Framework has taken
the guesswork out of vertical rhythm, handling it all for you in a responsive, flexible way. The
base line-height is 1.75em
, meaning that for a base font-size of 16px, the line-height
will be 28px. Each element will also have a bottom-margin of 28px as well.
Remember, however, that because VM UI Framework is responsive, the text size changes depending on the size of the browser, as does the base line-height. See the table to the right for reference.
In practical terms, this means that any new elements you introduce to the layout should have heights in multiples of the base line-height. If possible, make them responsive as well to maintain the vertical rhythm.
Font Size | Line Height | Bottom Margin | Multiples |
---|---|---|---|
14px | 24px | 24px | 24, 48, 72, 96, ... |
15px | 26px | 26px | 26, 52, 78, 104, ... |
16px* | 28px | 28px | 28, 56, 84, 112, ... |
*denotes default
Note Although the values above are given in pixels, you should give preference to em-based measurements in order to maintain maximum flexibility. If you add borders to an element, be sure to subtract the border height from the bottom margin.
VM UI Framework offers a lot of flexibility, but sometimes you'll want to add to, adjust, or override some of the default CSS declarations. This set of utility classes will allow you to do exactly that. Most of the classes should be able to be applied to any element safely.
CSS Class | Description |
---|---|
left |
Floats the element to the left. |
right |
Floats the element to the right. |
alignLeft |
Aligns text to the left. |
alignCenter |
Aligns text to the center. |
alignRight |
Aligns text to the right. |
firstCol |
Removes the left margin for a column in a list and causes it to clear all floats. Useful for when when the total column span exceeds the width of the grid. |
topMargin |
Adds a default em-spacing to the top margin. |
bottomMargin |
Adds a default em-spacing to the top margin. |
primaryMargin |
For use on a column in the first row following a single fixed navbar. |
secondaryMargin |
For use on a column in the first row primary and secondary fixed navbars. |
skipBottom |
Removes the bottom margin. (Useful for rows). |
hidden |
Sets an element to display: none . |
divider |
Creates a full-width divider line with a bottom margin of one line. |
It certain cases, you may wish to show or hide different content at different screen sizes. To do so, add one of the selective display classes to any element. The table shows the break points. Note Only one selective display class can be used per element.
Selective Display Classes | ||||
---|---|---|---|---|
Class | 0-768px | 769-980px | 981-1200px | 1201px+ |
showMobile |
Yes | No | No | No |
hideMobile |
No | Yes | Yes | Yes |
showTablet |
No | Yes | No | No |
hideTablet |
Yes | No | Yes | Yes |
showSmallDesktop |
No | No | Yes | No |
hideSmallDesktop |
Yes | Yes | No | Yes |
showLargeDesktop |
No | No | No | Yes |
hideLargeDesktop |
Yes | Yes | Yes | No |
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.