Layout

Elevation

JDRF websites are primarily flat. Components that require special attention, such as cards and buttons, have subtle elevations to increase contrast with their surroundings and invite interaction.

Elevations are applied using the ds-elevation- class and are numbered 1 to 5. .ds-elevation-1 is the lowest and .ds-elevation-5 is the highest.

Buttons in most cases start with .ds-elevation-1 and raise to .ds-elevation-3 on :hover, :focus and :active states. The .ds-btn-flat style of buttons start with no elevation and raise to .ds-elevation-two on :hover, :focus and :active states.

To remove elevations on a component that isn't flat by default, you can apply the .ds-no-elevation class or override in your project's stylesheet.

Modals, dialogs and menus (coming soon to the Design System) are the rare objects that require higher elevations.

flat

ds-elevation-1

ds-elevation-2

ds-elevation-3

ds-elevation-4

ds-elevation-5

<div class="ds-no-elevation"></div>
<div class="ds-elevation-1"></div>
<div class="ds-elevation-2"></div>
<div class="ds-elevation-3"></div>
<div class="ds-elevation-4"></div>
<div class="ds-elevation-5"></div>

<div class="f-example-inline">
	<div class="f-rectangle ds-no-elevation"></div>

	<p class="f-example-desc">flat</p>
</div>
<div class="f-example-inline">
	<div class="f-rectangle ds-elevation-1"></div>

	<p class="f-example-desc">ds-elevation-1</p>
</div>
<div class="f-example-inline">
	<div class="f-rectangle ds-elevation-2"></div>

	<p class="f-example-desc">ds-elevation-2</p>
</div>
<div class="f-example-inline">
	<div class="f-rectangle ds-elevation-3"></div>

	<p class="f-example-desc">ds-elevation-3</p>
</div>
<div class="f-example-inline">
	<div class="f-rectangle ds-elevation-4"></div>

	<p class="f-example-desc">ds-elevation-4</p>
</div>
<div class="f-example-inline">
	<div class="f-rectangle ds-elevation-5"></div>

	<p class="f-example-desc">ds-elevation-5</p>
</div>
<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-no-elevation&quot;>&lt;/div>
&lt;div class=&quot;ds-elevation-1&quot;>&lt;/div>
&lt;div class=&quot;ds-elevation-2&quot;>&lt;/div>
&lt;div class=&quot;ds-elevation-3&quot;>&lt;/div>
&lt;div class=&quot;ds-elevation-4&quot;>&lt;/div>
&lt;div class=&quot;ds-elevation-5&quot;>&lt;/div>
</code></pre>

Grid

The Design System is using most of the classes and breakpoints from Bootstrap's grid component. The grid is based on a 12 column layout and s using multiple tiers, one for each media query range.

There are the three major components to working with the grid: containers, rows, and columns.

Containers center your site's contents and help align your grid content. There are two types of containers: .ds-container for a fixed width and .ds-container-fluid for full width.
Rows are wrappers for your columns that ensure the columns align properly.
Column classes should indicate the number of columns you'd like to use out of the possible 12 columns per row. E.g. .ds-col-sm-4 for three equal columns from any sizes greater than the small breakpoint.

The Design System uses one different breakpoint and a different max-width for containers than what Bootstrap uses. Our smallest break point (Extra Small) is less than 360px instead of Bootstrap's 375px. Our max width is 1088px instead of Bootstrap's 1140px.

For more examples on how to use the grid, review Bootstrap's documentation.

Three columns

First of three columns

Second of three columns

Third of three columns

<div class="ds-row">
	<div class="ds-col-md-4">
	  First of three columns
	</div>
	<div class="ds-col-md-4">
	  Second of three columns
	</div>
	<div class="ds-col-md-4">
	  Third of three columns
	</div>
</div>

<section class="f-section">
	<h3 class="f-example-title">Three columns</h3>
	<div class="f-example">
		<div class="ds-container">
			<div class="ds-row">
				<div class="ds-col-md-4 f-col one">
					First of three columns
				</div>
				<div class="ds-col-md-4 f-col two">
					Second of three columns
				</div>
				<div class="ds-col-md-4 f-col three">
					Third of three columns
				</div>
			</div>
		</div>
	</div>
	<pre class="language-markup"><code class="language-markup">&lt;div class=&quot;ds-row&quot;>
	&lt;div class=&quot;ds-col-md-4&quot;>
	  First of three columns
	&lt;/div>
	&lt;div class=&quot;ds-col-md-4&quot;>
	  Second of three columns
	&lt;/div>
	&lt;div class=&quot;ds-col-md-4&quot;>
	  Third of three columns
	&lt;/div>
&lt;/div>
</code></pre>
</section>