Grid

DreamHost has multiple options to achieve the layouts we need to create.


Auto grid

CSS Grid is used by the .Grid--auto class. It can be used to evenly distribute child <div> elements in a row & is enacted at the $medium-breakpoint.

<div class="Grid--auto">
	<div>1</div>
	<div>2</div>
</div><!--Grid-->

There are also 2 column layout modifiers for auto grid layouts. .Grid-1-3 (2 column left aligned) .Grid-3-1 (2 column right aligned).

<div class="Grid--auto .Grid-1-3">
	<div>1</div>
	<div>2</div>
</div><!--Grid-->

Auto CSS grid layouts can also be nested.

<div class="Grid--auto Grid-1-3">
	<div>
		<div class="Grid--auto">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</div>
	<div>2</div>
</div>

12 column grid

For more specific grid requirements there is also a 12 column grid layout system.

.g-12-12
.g-6-12
.g-6-12
.g-3-12
.g-3-12
.g-3-12
.g-3-12
.g-2-12
.g-2-12
.g-2-12
.g-2-12
.g-2-12
.g-2-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
.g-1-12
<div class="Grid">
	<div class="g-6-12">1</div>
	<div class="g-6-12">2</div>
</div><!--Grid-->

12 column responsive modifiers

__m - $medium-breakpoint modifier __l - $large-breakpoint modifier

<div class="Grid">
	<div class="g-12-12 g-6-12__m g-1-12__l">1</div>
	<div class="g-12-12 g-6-12__m g-1-12__l">2</div>
</div><!--Grid-->

Legacy grid

DreamHost legacy floated grid uses Bourbon's Neat Sass grid alongside some helper classes from the most common layouts we need to create.

Please note: Each legacy grid row must have a wrapper with the u-clearfix class attached as it is based on a float model.


.g-1_2
.g-1_2
.g-1_3
.g-2_3
.g-1_4
.g-3_4
<div class="u-clearfix">
	<div class="g-1_2">.g-1_2</div>
	<div class="g-1_2">.g-1_2</div>
</div>
<div class="u-clearfix">
	<div class="g-1_3">.g-1_3</div>
	<div class="g-2_3">.g-2_3</div>
</div>
<div class="u-clearfix">
	<div class="g-1_4">.g-1_4</div>
	<div class="g-3_4">.g-3_4</div>
</div>
.g-1_6 {@include span-columns(2)}
.g-1_4 {@include span-columns(3)}
.g-1_3 {@include span-columns(4)}
.g-1_2 {@include span-columns(6)}
.g-2_3 {@include span-columns(8)}
.g-3_4 {@include span-columns(9)}
.g-omega {@include omega()}
.g-shift-1 {@include shift(1)}
.g-shift-2 {@include shift(2)}
.g-shift-3 {@include shift(3)}
.g-shift-4 {@include shift(4)}
.g-shift-5 {@include shift(5)}
.g-shift-6 {@include shift(6)}
.g-shift-7 {@include shift(7)}
.g-shift-8 {@include shift(8)}
.g-shift-9 {@include shift(9)}
.g-shift-10 {@include shift(10)}
.g-shift-11 {@include shift(11)}

See Neat docs for more information on using Neat with Sass if the helper classes aren't enough for your interface.


Responsive

All helper classes are mobile-first responsive and can be modified by adding __m or __l to the end of a class, e.g .g-1_3__medium.

For example, the following will only have columns on screens larger than 750px.

.g-1_2__m Responsive
.g-1_2__m Responsive
<div class="u-clearfix">
	<div class="g-1_2__m">Responsive</div>
	<div class="g-1_2__m">Responsive</div>
</div>