Layout Guide

Responsive Grid

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.

Example
<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.

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
12
11
1
10
2
9
3
8
4
7
5
6
6
3
4
5
2
3
4
2
1

Return to top

Offsets

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.

12
11
10
9
8
7
6
5
4
3
2
1

Return to top

Vertical Rhythm

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.

Return to top

Vertical Sizing Reference
Sizes
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.

Utility Classes

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.

Return to top

Utilities
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.

Selective Display

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.

Demo
  • Mobile Screens: Show This Hide This
  • Tablets: Show This Hide This
  • Small Desktops: Show This Hide This
  • Large Desktops: Show This Hide This

Return to top

Selective Display Classes
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.