Responsive Web Design (RWD) framework

These technologies and design patterns include the following features:

• 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 points to consider when you are 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 - 12 columns, regardless of the breakpoint by using one of the col* classes.
• If a row has child elements spans a total of more than 12 column, they flow according to how HTML handles float elements.
  For example, for a row that contains three child elements that spans 8, 8 and 4 columns are as follows:

  1. The first child element is positioned at the top left of the row that spans eight columns. That is, 2/3 of the row's width.
  2. The second child element is positioned under the first child element, also spanning eight columns.
  3. The third child element is positioned to the right of the second child element, spanning four 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 must have a flexible or automatic height, as a fixed row height interferes with column that are stacked. Fixed child element heights are typically acceptable, but must 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 that contains two 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.