Responsive Web Design (RWD) framework

These technologies and design patterns include:

• Fluid layouts and grids (Example)
• Column stacking
• Column nesting
• Stacking order

The following code snippet shows a page with a fluid grid:

		<div class="row">
			<div class="col12"></div>
		</div>
		<div class="row">
			<div class="col6"></div>
			<div class="col6"></div>
		</div>
		<div class="row">
			<div class="col4"></div>
			<div class="col4"></div>
			<div class="col4"></div>
		</div>
		<div class="row">
			<div class="col3"></div>
			<div class="col3"></div>
			<div class="col3"></div>
			<div class="col3"></div>
		</div>
		<div class="row">
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
		</div>
		<div class="row">
			<div class="col1"></div>
			<div class="col11"></div>
		</div>
		<div class="row">
			<div class="col2"></div>
			<div class="col10"></div>
		</div>
		<div class="row">
			<div class="col3"></div>
			<div class="col9"></div>
		</div>
		<div class="row">
			<div class="col4"></div>
			<div class="col8"></div>
		</div>
		<div class="row">
			<div class="col5"></div>
			<div class="col7"></div>
		</div>

Note the following considerations when working with fluid layouts and grids:

• A row is always divided into 12 columns, regardless of the breakpoint.
• A row's child element can span 1 to 12 columns, regardless of the breakpoint by using one of the col* classes.
• If a row has child elements spanning a total of more than 12 column, they flow according to how HTML handles float elements.
  For example, for a row containing 3 child elements spanning 8, 8 and 4 columns:

  1. The first child element is positioned at the top left of the row spanning 8 columns. That is, 2/3 of the row's width.
  2. The second child element is positioned under the first child element, also spanning 8 columns.
  3. The third child element is positioned to the right of the second child element, spanning 4 columns. That is, 1/3 of the row's width.
• A row's child element can respond to the RWD-A and RWD-C breakpoints by using the acol* class for RWD-A or ccol* class for RWD-C.

  For example, a row's child element can span 6 columns by default and 12 columns in the RWD-A breakpoint by using class="col6 acol12".

• Rows and their child elements should have a flexible or automatic height, as a fixed row height interferes with column stacking. Fixed child element heights are typically acceptable, but should be avoided since content heights can change as a row's child elements resize horizontally with the viewport.
• The fluid grid system does not have built-in gutters, or margins, between a row's child elements. A separate set of CSS rules is used to define the margins between widgets.
• Do not apply any margin to a row's child elements, as that causes the column width total to exceed 100%.
• Avoid borders or padding to a row's child elements, as that requires box-sizing: border-box tagging. In addition, this rule also applies for rows. However, row margins are acceptable.
• The col* classes contain no breakpoints. Elements with only the col* classes do not stack, regardless of the viewport width.

Column stacking is implemented in the following way: All child elements of a row use acol12. For example, for a row containing 2 child elements with the col4 acol12 classes and col8 acol12 classes respectively. In this scenario, the child elements are side by side by default, spanning 4 and 8 columns respectively. The acol12 class, however, makes the child elements span 12 columns each in the RWD-A breakpoint, so that they are laid out vertically, each spanning the full width of the row.