Getting Started

Download

Get started by downloading the latest release on Github and following the outlined options below.

To begin using the Design System, simply add a single css file to your website/application. The CSS file can be found in the master branch.

This file contains all current components and provides support for any needed icons, typography, or styling. We recommend including it in the HEAD html tag.

<link rel="stylesheet" href="/<PATH TO CSS>/design-system.css">

Fonts

Your website's domain will need to be whitelisted by JDRF before Gotham can display properly. Email pmckowen at jdrf dot org for instructions.

If font files are needed for the website/application, copy/download the font files found in the master branch. It's recommended to place the font folder in a similar path to the CSS files.


└── ./
 ├── css/
  └──  design-system.css
 └── fonts/
  └──  gotham/

After downloading the fonts and setting up a folder structure, you will need to connect the fonts to your site using @fontface.

/* Replace [path to fonts] with your path */

@font-face {
	font-family: 'Gotham Thin';
	src: url('[path to fonts]/gotham/thin/gotham-thin-webfont.eot');
	src: url('[path to fonts]/gotham/thin/gotham-thin-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/thin/gotham-thin-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/thin/gotham-thin-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/thin/gotham-thin-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/thin/gotham-thin-webfont.svg#gothamthin') format('svg');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Light';
	src: url('[path to fonts]/gotham/light/gotham-light-webfont.eot');
	src: url('[path to fonts]/gotham/light/gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/light/gotham-light-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/light/gotham-light-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/light/gotham-light-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/light/gotham-light-webfont.svg#gothamlight') format('svg');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Light Italic';
	src: url('[path to fonts]/gotham/light/gotham-lightitalic-webfont.eot');
	src: url('[path to fonts]/gotham/light/gotham-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/light/gotham-lightitalic-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/light/gotham-lightitalic-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/light/gotham-lightitalic-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/light/gotham-lightitalic-webfont.svg#gothamlight_italic') format('svg');
	font-weight: 200;
	font-style: italic;
}

@font-face {
	font-family: 'Gotham Book';
	src: url('[path to fonts]/gotham/book/gotham-book-webfont.eot');
	src: url('[path to fonts]/gotham/book/gotham-book-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/book/gotham-book-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/book/gotham-book-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/book/gotham-book-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/book/gotham-book-webfont.svg#gothambook') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Book Italic';
	src: url('[path to fonts]/gotham/book/gotham-bookitalic-webfont.eot');
	src: url('[path to fonts]/gotham/book/gotham-bookitalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/book/gotham-bookitalic-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/book/gotham-bookitalic-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/book/gotham-bookitalic-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/book/gotham-bookitalic-webfont.svg#gothambook_italic') format('svg');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Gotham Medium';
	src: url('[path to fonts]/gotham/medium/gotham-medium-webfont.eot');
	src: url('[path to fonts]/gotham/medium/gotham-medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/medium/gotham-medium-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/medium/gotham-medium-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/medium/gotham-medium-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/medium/gotham-medium-webfont.svg#gothammedium') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Medium Italic';
	src: url('[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.eot');
	src: url('[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.svg#gothammedium_italic') format('svg');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'Gotham Bold';
	src: url('[path to fonts]/gotham/bold/gotham-bold-webfont.eot');
	src: url('[path to fonts]/gotham/bold/gotham-bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/bold/gotham-bold-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/bold/gotham-bold-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/bold/gotham-bold-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/bold/gotham-bold-webfont.svg#gothambold') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Bold Italic';
	src: url('[path to fonts]/gotham/bold/gotham-bolditalic-webfont.eot');
	src: url('[path to fonts]/gotham/bold/gotham-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
		url('[path to fonts]/gotham/bold/gotham-bolditalic-webfont.woff2') format('woff2'),
		url('[path to fonts]/gotham/bold/gotham-bolditalic-webfont.woff') format('woff'),
		url('[path to fonts]/gotham/bold/gotham-bolditalic-webfont.ttf')  format('truetype'),
		url('[path to fonts]/gotham/bold/gotham-bolditalic-webfont.svg#gothambold_italic') format('svg');
	font-weight: 700;
	font-style: italic;
}

Button and Link Colors

By default, button are set to $jdrf-blue. However if your site aligns with a specific JDRF program color — (for example the JDRF One Walk® brand aligns with $jdrf-orange) — you must override the default color. Learn more about color options on the Colors Page.

Since the Design System is meant to be used as a compiled file, these colors can be overwritten on a per project basis with inline style in the HEAD html tag. We recommend that these colors are overwritten immediately after including the Design System in your project. See below for an example written in css.

/* Change button colors to $jdrf-green */

.ds-btn-primary,
.ds-btn-flat {
	background-color: #00a862;
	border-color: #00a862;
}

.ds-btn-primary-outline {
	color: #00a862;
	border-color: #00a862;

	&:hover,
	&:active,
	&:focus {
		color: #ffffff;
		background-color: #00a862;
	}
}

.ds-btn-link {
	color: #00a862;
}

Icons

If icons are a requirement, Design System already includes all necessary styles, but requires the font file from Google's CDN. Include this in the `HEAD` html tag right before the Design System css file.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="/<PATH TO CSS>/design-system.css">

<p class="ds-lead">Get started by downloading the <a href="https://github.com/JDRF/design-system/tree/master" target="_blank">latest release on Github</a> and following the outlined options below.</p>

<p><a class="ds-btn ds-btn-primary href=" href="https://github.com/JDRF/design-system/archive/master.zip" target="_blank">Download v0.0.1</a></p>


<p>To begin using the Design System, simply add a single css file to your website/application. The <a href="https://github.com/JDRF/design-system/tree/master/dist/css" target="_blank">CSS file</a> can be found in the master branch.</p>

<p>This file contains all current components and provides support for any needed icons, typography, or styling. We recommend including it in the HEAD html tag.</p>

<pre class="language-markup"><code class="language-markup">&lt;link rel=&quot;stylesheet&quot; href=&quot;/&lt;PATH TO CSS>/design-system.css&quot;></code></pre>

<h3>Fonts</h3>

<p>Your website's domain will need to be whitelisted by JDRF before Gotham can display properly. Email pmckowen at jdrf dot org for instructions.</p>

<p>If font files are needed for the website/application, copy/download the font files found in the
	<a href="https://github.com/JDRF/design-system/tree/master/dist/fonts/gotham" target="_blank">master branch</a>. It's recommended to place the font folder in a similar path to the CSS files.

	<pre class="language-markup"><code class="language-markup">
└── ./
 ├── css/
  └──  design-system.css
 └── fonts/
  └──  gotham/
</code></pre>

	<p>After downloading the fonts and setting up a folder structure, you will need to connect the fonts to your site using <code class="language-markup">@fontface</code>.</p>

	<pre class="language-css"><code class="language-css">/* Replace [path to fonts] with your path */

@font-face {
	font-family: &apos;Gotham Thin&apos;;
	src: url(&apos;[path to fonts]/gotham/thin/gotham-thin-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/thin/gotham-thin-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/thin/gotham-thin-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/thin/gotham-thin-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/thin/gotham-thin-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/thin/gotham-thin-webfont.svg#gothamthin&apos;) format(&apos;svg&apos;);
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: &apos;Gotham Light&apos;;
	src: url(&apos;[path to fonts]/gotham/light/gotham-light-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/light/gotham-light-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-light-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-light-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-light-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-light-webfont.svg#gothamlight&apos;) format(&apos;svg&apos;);
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: &apos;Gotham Light Italic&apos;;
	src: url(&apos;[path to fonts]/gotham/light/gotham-lightitalic-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/light/gotham-lightitalic-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-lightitalic-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-lightitalic-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-lightitalic-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/light/gotham-lightitalic-webfont.svg#gothamlight_italic&apos;) format(&apos;svg&apos;);
	font-weight: 200;
	font-style: italic;
}

@font-face {
	font-family: &apos;Gotham Book&apos;;
	src: url(&apos;[path to fonts]/gotham/book/gotham-book-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/book/gotham-book-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-book-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-book-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-book-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-book-webfont.svg#gothambook&apos;) format(&apos;svg&apos;);
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: &apos;Gotham Book Italic&apos;;
	src: url(&apos;[path to fonts]/gotham/book/gotham-bookitalic-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/book/gotham-bookitalic-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-bookitalic-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-bookitalic-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-bookitalic-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/book/gotham-bookitalic-webfont.svg#gothambook_italic&apos;) format(&apos;svg&apos;);
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: &apos;Gotham Medium&apos;;
	src: url(&apos;[path to fonts]/gotham/medium/gotham-medium-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/medium/gotham-medium-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-medium-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-medium-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-medium-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-medium-webfont.svg#gothammedium&apos;) format(&apos;svg&apos;);
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: &apos;Gotham Medium Italic&apos;;
	src: url(&apos;[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/medium/gotham-mediumitalic-webfont.svg#gothammedium_italic&apos;) format(&apos;svg&apos;);
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: &apos;Gotham Bold&apos;;
	src: url(&apos;[path to fonts]/gotham/bold/gotham-bold-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/bold/gotham-bold-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bold-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bold-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bold-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bold-webfont.svg#gothambold&apos;) format(&apos;svg&apos;);
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: &apos;Gotham Bold Italic&apos;;
	src: url(&apos;[path to fonts]/gotham/bold/gotham-bolditalic-webfont.eot&apos;);
	src: url(&apos;[path to fonts]/gotham/bold/gotham-bolditalic-webfont.eot?#iefix&apos;) format(&apos;embedded-opentype&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bolditalic-webfont.woff2&apos;) format(&apos;woff2&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bolditalic-webfont.woff&apos;) format(&apos;woff&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bolditalic-webfont.ttf&apos;)  format(&apos;truetype&apos;),
		url(&apos;[path to fonts]/gotham/bold/gotham-bolditalic-webfont.svg#gothambold_italic&apos;) format(&apos;svg&apos;);
	font-weight: 700;
	font-style: italic;
}</code></pre>

	<h3>Button and Link Colors</h3>

	<p>By default, button are set to <code class="language-markup">$jdrf-blue</code>. However if your site aligns with a specific JDRF program color &mdash; (for example the JDRF One Walk&reg; brand aligns with <code class="language-markup">$jdrf-orange</code>)
		&mdash; you must override the default color. Learn more about color options on the <a href="./content.html#colors">Colors Page.</a></p>

	<p>Since the Design System is meant to be used as a compiled file, these colors can be overwritten on a per project basis with inline style in the HEAD html tag. We recommend that these colors are overwritten immediately after including the Design System
		in your project. See below for an example written in css.</p>


	<pre class="language-css"><code class="language-css">/* Change button colors to $jdrf-green */

.ds-btn-primary,
.ds-btn-flat {
	background-color: #00a862;
	border-color: #00a862;
}

.ds-btn-primary-outline {
	color: #00a862;
	border-color: #00a862;

	&amp;:hover,
	&amp;:active,
	&amp;:focus {
		color: #ffffff;
		background-color: #00a862;
	}
}

.ds-btn-link {
	color: #00a862;
}</code></pre>

	<h3>Icons</h3>

	If icons are a requirement, Design System already includes all necessary styles, but requires the font file from Google's CDN. Include this in the `HEAD` html tag right before the Design System css file.

	<pre class="language-markup"><code class="language-markup">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot;>
&lt;link rel=&quot;stylesheet&quot; href=&quot;/&lt;PATH TO CSS>/design-system.css&quot;></code></pre>
</p>

Javascript

Notes on Javascript use coming soon...