DJ Mixins

Built in SASS and Compass.

About DJ mixins

Dj is a library of scss mixins.

There are no class names to help keep HTML symantic.
Reduces bloat by only compiling CSS mixins that you have included.
Quickly theme your app UI by just changing easily found variable.
Uses HTML5 and CSS3.
Works in all major modern browsers.

Getting started

Install

Install Comapass.
Clone or Download DJ mixins into you project.
At the top of your web project .scss file add @import "dj";.

Information on using SASS can be found at sass-lang.com.

Project structure

dj/
├── demo/
└── scss/
    ├── elements/
    │   ├── _*.scss
    ├── font-awesome/
    ├── fonts/
    ├── themes/
    │   ├── _theme_*.scss
    └── _dj.scss

Elements contains all the mixins and themes contains all the variables for elements.

Global switches

SCSS	Description
$dj-rounded-corners	If true, turns on rounder corners on all elements. False to switch them off.
$dj-borderless	If true, makes all borders on all elements transparent. False to show borders.
$dj-gradiants	If true, turns on gradiants. False to switch them off.

Grids

Grid & nested grid

Example

HTML

<div class="row-0">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

<div class="row-1">
  <div>1</div>
</div>

<div class="row-2">
  <div>6</div>
  <div>6</div>
</div>

<div class="row-3">
  <div>4</div>
  <div>3</div>
  <div>2</div>
</div>

<div class="row-4">
  <div class="selector">4</div>
  <div class="selector">
    <div>1</div>
    <div>2</div>
  </div>
</div>

SCSS

.row-1 {
  @include dj-row;
  div {
    @include dj-col-base;
    @include dj-column(1);
  }
}

.row-2 {
@include dj-row;
 div {
    @include dj-column(6);
    @media (min-width: $dj-w-768) {
       @include dj-column(12);
    }
  }
}

.row-3 {
@include dj-row;
 div {
  @include dj-column(2);
   &:last-child {
      @include dj-column(4);
    }
    @media (min-width: $dj-w-768) {
      @include dj-column(3);
      &:last-child {
         @include dj-column(9);
       }
    }
  }
}

.row-4 {
@include dj-row;
  div {
    @include dj-column(2);
  }
  div:first-child {
    @include dj-column(2);
  }
  div:nth-child(2) {
    @include dj-column(1, 1);
  }
  @media (min-width: $dj-w-768) {
    div {
      @include dj-column(4);
    }
    div:first-child {
      @include dj-column(4);
    }
    div:nth-child(2) {
      @include dj-column(2, 2);
    }
  }
}

.row-5 {
  @include dj-row;
  div:first-child {
    @include dj-column(2);
    @media (min-width: $dj-w-768) {
      @include dj-column(4);
    }
  }
  div:last-child {
    @include dj-col-base;
    @include dj-column(4);
    div {
      @include dj-column-nested(2, 1);
    }
    @media (min-width: $dj-w-768) {
      @include dj-column(8);
      @include dj-column-edge;
      div {
        @include dj-column-nested(4, 2);
      }
    }
    @include dj-column-edge;
  }
}

Device width

SCSS	Value
$dj-w-320	320px
$dj-w-480	480px
$dj-w-768	768px
$dj-w-1024	1024px
$dj-w-1366	1366px
$dj-w-1600	1600px

Device columns

SCSS	Value
$dj-c-320	6
$dj-c-480	6
$dj-c-768	12
$dj-c-1024	12
$dj-c-1366	12
$dj-c-1600	12

Fonts

Font faces

Example

Open Sans — Sans font.

Lora — Serif font.

Droid Sans Mono — Code font.

HTML

<p>
  Open Sans — Sans font.
</p>
<p class="serif">
  Lora — Serif font.
</p>
<p class="code">
  Droid Sans Mono — Code font.
</p>

SCSS

//Sans
$dj-sans:                              'Open Sans';
$dj-sans-url:                          '../styles/fonts/Open_Sans/OpenSans-Regular.ttf';
$dj-sans-url-italic:                   '../styles/fonts/Open_Sans/OpenSans-Italic.ttf';
$dj-sans-url-bold:                     '../styles/fonts/Open_Sans/OpenSans-Bold.ttf';
$dj-sans-url-bold-italic:              '../styles/fonts/Open_Sans/OpenSans-BoldItalic.ttf';
$dj-font-family-sans:                  $dj-sans, sans-serif;  //defualt sans font.

//Sans
$dj-serif:                             'Lora';
$dj-serif-url:                         '../styles/fonts/Lora/Lora-Regular.ttf';
$dj-serif-url-italic:                  '../styles/fonts/Lora/Lora-Italic.ttf';
$dj-serif-url-bold:                    '../styles/fonts/Lora/Lora-Bold.ttf';
$dj-serif-url-bold-italic:             '../styles/fonts/Lora/Lora-BoldItalic.ttf';
$dj-font-family-serif:                 $dj-serif, serif; //defualt serif font.

//Code font
$dj-code:                              'Droid Sans Mono';
$dj-code-url:                          '../styles/fonts/Droid_Sans_Mono/DroidSansMono.ttf';
$dj-font-family-code:                  'Droid Sans Mono', monospace; //defualt font used for coding.


//sans
@font-face {
  font-family: 'Open Sans';
  src: url($dj-sans-url);
  font-weight:                         normal;
  font-style:                          normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url($dj-sans-url-italic);
  font-weight:                         normal;
  font-style:                          italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url($dj-sans-url-bold);
  font-weight:                         bold;
  font-style:                          normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url($dj-sans-url-bold-italic);
  font-weight:                         bold;
  font-style:                          italic;
}

//Serif
@font-face {
  font-family: 'Lora';
  src: url($dj-serif-url);
  font-weight:                         normal;
  font-style:                          normal;
}
@font-face {
  font-family: 'Lora';
  src: url($dj-serif-url-italic);
  font-weight:                         normal;
  font-style:                          italic;
}
@font-face {
  font-family: 'Lora';
  src: url($dj-serif-url-bold);
  font-weight:                         bold;
  font-style:                          normal;
}
@font-face {
  font-family: 'Lora';
  src: url($dj-serif-url-bold-italic);
  font-weight:                         bold;
  font-style:                          talic;
}

//Code
@font-face {
  font-family: 'Droid Sans Mono';
  src: url($dj-code-url);
}

Typography

Headings

Example

Headings	Sub headings
h1	sh1
h2	sh2
h3	sh3
h4	sh4
h5	sh5
h6	sh6

HTML

<h1>h1</h1>
<span class="sh1">sh1</span>
<h2>h2</h3>
<span class="sh2">sh2</span>
<h3>h3</h3>
<span class="sh3">sh3</span>
<h4>h4</h4>
<span class="sh4">sh4</span>
<h5>h5</h5>
<span class="sh5">sh5</span>
<h6>h6</h6>
<span class="sh6">sh6</span>

SCSS

.sh1 { @include dj-sh1; }
.sh2 { @include dj-sh2; }
.sh3 { @include dj-sh3; }
.sh4 { @include dj-sh4; }
.sh5 { @include dj-sh5; }
.sh6 { @include dj-sh6; }

Body text

Example

This is normal body text.

HTML

<p>
  This is normal body text.
</p>

Indenting Paragraphs

Example

This is the first paragraph.

This is the second paragraph is indented.

HTML

<p>
  This is the first paragraph.
</p>
<p>
  This is the second paragraph, of and indented paragraph.
</p>

SCSS

p {
  @include dj-indent;
}

Bold text

Example

This text is bold text, sans-serif.
This text is bold text, serif.

HTML

<p>
  This text is bold text</strong>.
</p>

Italic text

Example

This text is italic text, sans-serif.
This text is italic text, serif.

Bold italic text

Example

This text is bold italic text, sans-serif.
This text is bold italic text, serif.

HTML

<p>
  <strong><em>This text is italic text</em></strong>.
</p>

Small text

Example

This text is small text, sans-serif.
This text is small text, serif.

HTML

<p>
  <small>This text is small text</small>.
</p>

Hypertext

Example

Normal Visited Hover Active

HTML

<a href="http://www.url.com">
  Link
</a>

Abbreviated text

Example

This is an abbr .

HTML

<abbr title="Abbreviation">
  abbr
</abbr>

Preserved text

Example

This preserves
		both      spaces and
		line breaks.

HTML

<pre>
This preserves
both      spaces and
line breaks.
</pre>

Single line block quote

Example

This is a single line quote.

From somebody, Taken from somewhere

HTML

<figure  class="block-quote">
  <blockquote><em>This is a single line quote.</em></blockquote>
    <figcaption>From somebody,
    <cite>Taken from somewhere</cite>
  </figcaption>
</figure>

SCSS

.block-quote {
  @include dj-block-quote;
}

Mulit-line block quote

Example

This is the first paragraph of a multi-line quote.

This is the second paragraph of a multi-line quote.

From somebody, Taken from somewhere

HTML

<figure class="block-quote">>
  <blockquote>
    <p>
      <em>This is the first paragraph of a multi line quote.</em>
    </p>
    <p>
      <em>This is the second paragraph of a multi line quote.</em>
    </p>
  </blockquote>
  <figcaption>
    From somebody,
    <cite><a href="url">
      Taken from somewhere</a>
    </cite>
  </figcaption>
</figure>

SCSS

.block-quote {
  @include dj-block-quote;
}

Pull quote

Example

HTML

<figure class="pull-quote">>
  <blockquote>
    <p>
      <e>This is the a pull quote.</em>
    </p>
    <p>
      <e>It can be single or multi lined.</em>
    </p>
  </blockquote>
</figure>

SCSS

.pull-quote {
  @include dj-pull-quote;
}

Unorderd list

Example

Unorderd list.
Unorderd list.
Unorderd list.
Unorderd list.
Unorderd list.

HTML

<ul>
  <li>Unorderd list.</li>
  <li>Unorderd list.</li>
  <li>Unorderd list.</li>
  …
</ul>

Ordered list

Example

Ordered list.
Ordered list.
Ordered list.
Ordered list.
Ordered list.

HTML

<ol>
  <li>Orderd list.</li>
  <li>Orderd list.</li>
  <li>Orderd list.</li>
  …
</ol>

Unstyled list

Example

Unstyled list.
Unstyled list.
Unstyled list.
Unstyled list.
Unstyled list.

HTML

<ul class="unstyled-list">
  <li>Unorderd list.</li>
  <li>Unorderd list.</li>
  <li>Unorderd list.</li>
  …
</ul>

SCSS

.unstyled-list {
  @include dj-unstyled-list;
}

Inline List

Example

Inline-list
Inline-list
Inline-list
Inline-list
Inline-list

HTML

<ul class="inline-list">
  <li>Inline-list.</li>
  <li>Inline-list.</li>
  <li>Inline-list.</li>
  …
</ul>

SCSS

.inline-list {
  @include dj-inline-list;
}

Description list

Example

Term: I'm a description.; I'm a description.
Term: I'm a description.; I'm a description.

HTML

<dl>
  <dt>Term</dt>
    <dd>I'm a decription.</dd>
    <dd>I'm a decription.</dd>
    …
</dl>

Inline description list

Example

Term: : Here's my description.
Term: : Here's my description.

HTML

<dl class="description-inline">
  <dt>Term</dt>
    <dd>Here's my description.</dd>
  <dt>Term</dt>
    <dd>Here's my description.</dd>
  …
</dl>

SCSS

.description-inline {
  @include dj-description-inline;
}

Ordered description list

Example

Term: This is an ordered description.; This is an ordered description.
Term: This is an ordered description.; This is an ordered description.

HTML

<dl class="description-ordered">
  <dt>Term</dt>
    <dd>This is an ordered  description.</dd>
    <dd>This is an ordered  description.</dd>
  <dt>Term</dt>
    <dd>This is an ordered  description.</dd>
    <dd>This is an ordered  description.</dd>
  …
</dl>

SCSS

.description-ordered {
  @include dj-description-ordered;
}

Numbered description list

Example

This is numbered: Description.; Description.
This is numbered: Description.; Description.

HTML

<dl class="description-numbered">
  <dt>Term</dt>
    <dd>Here's my description.</dd>
    <dd>Here's my description.</dd>
  …
</dl>

SCSS

.description-numbered {
  @include dj-description-numbered;
}

Address

Example

Full Name
Company Name
Address 1
County
City, Post Code
Country
Email: user.name@mail.co.uk
T: 020 0000 0000
M: +44 7000 000 000

HTML

<address>
  <strong>Full Name</strong>
  Company Name</br>
  Address 1</br>
  County</br>
  City, Post Code</br>
  Country</br>
  Email: <a href="mailto:#">user.name@mail.co.uk</a></br>
  <abbr title="Telephone number">T:</abbr> 020 0000 0000</br>
  <abbr title="Mobile number">M:</abbr> +44 7000 000 000</br>
</address>

Figures

Example

Image with round corners — **Fig. 1.0 |** This is a figure

HTML

<figure>
 <figcaption>
   placeholder
   <strong>This is a figure</strong>
 </figcaption>
</figure>

Labels and Badges

Labels

Example

Label Primary Info Success Warning Danger

HTML

<p>
  <span class="label"></span>
  <span class="label-primary"></span>
  <span class="label-info"></span>
  <span class="label-success"></span>
  <span class="label-warning"></span>
  <span class="label-danger"></span>
</p>

SCSS

.label {
  @include dj-label;
}

.label-primary {
  @include dj-label-primary;
}

label-info {
  @include dj-label-info;
}

.label-success {
  @include dj-label-success;
}

label-warning {
@include dj-label-warning;
}

.label-danger {
  @include dj-label-danger;
}

Badges

Example

item 1
item 3
item 6
item 9
item 12
item 100

HTML

<p>
  <li>item <span class="badge">1</span></li>
  <li>item <span class="badge-primary">3</span></li>
  <li>item <span class="badge-info">6</span></li>
  <li>item <span class="badge-success">9</span></li>
  <li>item <span class="badge-warning">12</span></li>
  <li>item <span class="badge-danger">100</span></li>
</p>

SCSS

.badge {
  @include dj-badge;
}

.badge-primary {
  @include dj-badge-primary;
}

.badge-info {
  @include dj-badge-info;
}

.badge-success {
  @include dj-badge-success;
}

.badge-warning {
  @include dj-badge-warning;
}

.badge-danger {
  @include dj-badge-danger;
}

Badge pills

Example

item 1
item 3
item 6
item 9
item 12
item 100

HTML

<p>
  <li>item <span class="badge-pill">1</span></li>
  <li>item <span class="badge-pill-primary">3</span></li>
  <li>item <span class="badge-pill-info">6</span></li>
  <li>item <span class="badge-pill-success">9</span></li>
  <li>item <span class="badge-pill-warning">12</span></li>
  <li>item <span class="badge-pill-danger">100</span></li>
</p>

SCSS

.badge-pill {
  @include dj-badge-pill;
}

.badge-pill-primary {
  @include dj-badge-pill-primary;
}

.badge-pill-info {
  include badge-pill-info;
}
.badge-pill-success {
  @include dj-badge-pill-success;
}

.badge-pill-warning {
  @include dj-badge-pill-warning;
}

.badge-pill-danger  {
  @include dj-badge-pill-danger;
}

Code

Code inline

Example

This is <span>inline code</span>

HTML

<p>
  This is 
  <code>
    <span>inline code</span>
  </code>
</p>

Code block

Example

<p>
  This is a code block.
</p>

HTML

<pre  class="code-block">
<p>
  This is a code block
</p>
</pre>

SCSS

.code-block {
  @include dj-code-block;
}

Numbered code lines

Example

<p>
  This is a code block
</p>

HTML

<pre class="code-numbered">
  <ol>
    <li><p></li>
    <li>  This is a code numbered block.</li>
    <li></p></li>
  </ol>
</pre>

SCSS

.code-numbered {
  @include dj-code-numbered;
}

Buttons

Example

Link

HTML

<button>
  Button
<button>
<a href="url" class="button">
  Link
</a>
<input type="button" Value="Input">
  Input
</input>
<input type="submit" Value="Submit">
  Submit
</input>

SCSS

.button {
  @include dj-button
}

Button styles

Example

HTML

<button class="button">Button</button>
<button class="button-pill">Pill</button>
<button class="button-round">Round</button>
<button class="button-block">Block</button>

SCSS

.button {
  @include dj-button;
}

.button-pill {
  @include dj-button;
  @include dj-button-pill;
}

.button-round {
  @include dj-butt
    @include dj-button;on-round;
}

.buttonBlock {
  @include dj-button;
  @include dj-button-block;
}

Button sizes

Example

HTML

<button class="giga-button">Giga</button>
<button class="mega-button">Mega</button>
<button class="large-button">Large</button>
<button class="button-normal">Normal</button>
<button class="small-button">Small</button>

SCSS

.giga-button {
  @include dj-button;
  @include dj-button-giga;
}

.mega-button {
  @include dj-button;
  @include dj-button-mega;
}

.large-button {
  @include dj-button;
  @include dj-button-large;
}

.button {
  @include dj-button;
}

.small-button {
  @include dj-button;
  @include dj-button-small;
}

Action buttons

Example

HTML

<button class="button-primary">Primary</button>
<button class="button-info">Info</button>
<button class="button-success">Success</button>
<button class="button-warning">Warning</button>
<button class="button-danger">Danger</button>
<button class="button-disabled">Disabled</button>

SCSS

.button-primary {
  @include dj-button;
  @include dj-button-Primary;
}

.button-info {
  @include dj-button;
  @include dj-button-info;
}

.button-success {
  @include dj-button;
  @include dj-button-success;
}

.button-warning {
  @include dj-button;
  @include dj-button-warning;
}

.button-danger {
  @include dj-button;
  @include dj-button-danger;
}

.button-danger {
  @include dj-button;
  @include dj-button-danger;
}

Button Groups

Example

HTML

<ul class="button-group">
  <li><button>First</button></li>
  <li><button>Middle</button></li>
  <li><button>Last</button></li>
</ul>

SCSS

		.button-group {
		  @include dj-button-group;
		}

Block button group

Example

HTML

<ul class="button-group-block>
	<li><button>First</button></li>
	<li><button>Middle</button></li>
	<li><button>Last</button></li>
</ul>

SCSS

.button-group-block" {
	@include dj-button-group-block(3);
}

Stacked buttons

Example

HTML

<ul class="button-stack">
  <li>
    <button>
      Top
    </button>
  </li>
  <li>
    <button>
      Middle
    </button>
  </li>
  <li>
    <button>
      Bottom
    </button>
  </li>
</ul>

<ul class="button-pill-stack">
  <li>
    <button>
      Top
    </button>
  </li>
  <li>
    <button>
      Middle
    </button>
  </li>
  <li>
    <button>
      Bottom
    </button>
  </li>
</ul>

<ul class="button-round-stack">
  <li>
    <a href="http://www.facebook.com"></a>
      <i calss="icon-facebook"></i>
    </a>;
  </li>
  <li>
    <a href="http://www.url.com"></a>
      <i calss="icon-twitter"></i>
    </a>
  </li>
  <li>
    <a href="http://www.url.com"></a>
      <i calss="icon-pinterest"></i>
    </a>
  </li>
</ul>

SCSS

.button-stack {
  @include dj-button-stack($unit-9);
}

.button-pill-stack {
  @include dj-button-pill-stack($unit-9);
}

.button-round-stack {
  @include dj-button-round-stack;
  //remove left padding on <a> to center icon
  li a {
    padding-left: 0;
  }
}

Button split

Example (doesn't work when zoomed)

HTML

<div class="button-split">
  <button>Button</button>
  <button></button>
</div>

SCSS

.button-split {
  @include dj-button-split($fa-var-caret-down);
}

.button-split-save {
  @include dj-button-split($fa-var-floppy-o);
}

Button drop down

Example

HTML

<button class="button-drop-down>Drop down</button>

SCSS

.button-drop-down {
  @include dj-button-split($fa-var-caret-down);
}

Forms

Inline form

Example

HTML

<form>
  <div>
    <label for="text">Text Field</label>
    <input type="text" placeholder="Text">
  </div>

  <div>
    <label for="password">Password Field</label>
    <input type="password" placeholder="Password">
  </div>

  <div>
    <label>
      Checkbox <input type="checkbox">
    </label>
  </div>

  <div>
    <label>
      Checkbox <input type="checkbox">
    </label>
  </div>

  <div>
    <label>
      Radio 1
      <input type="radio" name="radio1" Value="Value1">
    </label>
    <label>
      Radio 2
      <input type="radio" name="radio1" Value="Value2">
    </label>
  </div>

  <div>
    <select>
      <option Value="Select 1">Select 1</option>
      <option Value="Select 2">Select 2</option>
      <option Value="Select 3">Select 3</option>
      <option Value="Select 4">Select 4</option>
    </select>
  </div>

  <div>
    <textarea>Text area</textarea>
  </div>

  <div>
    <input type="file"><br>
    <input type="submit">
  </div>
</form>

Stacked form

Example

HTML

<form class="form-stack">
  <div>
    <label for="text">Text Field</label>
    <input type="text" placeholder="Text">
  </div>

  <div>
    <label for="password">Password Field</label>
    <input type="password" placeholder="Password">
  </div>
</form>

SCSS

.form-stack {
  @include dj-form-stack;
}

Inline checkbox

Example

Checkbox 1 Checkbox 2

HTML

<div class="inline-field">
  <label for="checkbox">
    Checkbox 1 <input type="checkbox">
    Checkbox 2 <input type="checkbox">
  </label>
</div>

SCSS

.inline-field {
  @include dj-inline-field;
}

Form help messages

Example

HTML

<form>
  <div>
    <label for="text">Text Field</label>
    <input type="text" placeholder="Text">
  </div>
  <div>
    <p class="help-text">
      This is help text.
    </p>
  </div>
  <div>
    <label for="password">Text Field</label>
    <input type="text" placeholder="Text">
  <div>
    <p class="invalid-text">
      This is invalid text.
    </p>
  </div>
</form>

SCSS

Form validation

Example

SCSS

.input.validation-focused {
  border:                              $dj-input-focused-border-width $dj-input-focused-border-style $dj-input-focused-border-color;
}

.input.validation-valid {
  border:                              $dj-input-valid-border-width $dj-input-focused-border-style $dj-input-valid-border-color;
}

.input.validation-invalid {
  border:                              $dj-input-invalid-border-width $dj-input-focused-border-style $dj-input-invalid-border-color;
}

.input.validation-required {
  border:                              $dj-input-required-border-width $dj-input-focused-border-style $dj-input-required-border-color;
}

Input button

Example

HTML

<div class="input-button-left">
  <button>Search</button>
  <input type="text">
</div>

SCSS

.input-button-left {
  @include dj-input-button('left');
}

.input-button-right {
  @include dj-input-button('right');
}

.input-button-top {
  @include dj-input-button('top');
}

.input-button-bottom {
  @include dj-input-button('bottom');
}

Input group

Example

HTML

<div class="input-group">
  <input type="text" placeholder="User name">
  <input type="email" placeholder="Email">
  <input type="password" placeholder="Password">
</div>

SCSS

.input-group {
  @include dj-input-group;
}

Tables

Table

Example

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

HTML

<table>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  …
</tbody>
</table>

Table bordered

Example

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

HTML

<table class="table-bordered">
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  …
</tbody>
</table>

.table-bordered{
  @include dj-table-bordered;
}

Table striped

Example

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

HTML

<table class="table-striped">
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  …
</tbody>
</table>

SCSS

.table-striped{
  @include dj-table-striped;
}

Table hovering

Example

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

HTML

<table class="table-hover">
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  …
</tbody>
</table>

SCSS

.table-hover{
  @include dj-table-hover;
}

Table condensed

Example

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

HTML

<table class="table-condensed">
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  …
</tbody>
</table>

SCSS

.table-condensed{
  @include dj-table-condensed;
}

Table combined

Example

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8

HTML

<table class="table-combined">
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  …
</tbody>
</table>

SCSS

.table-combined{
  @include dj-table-bordered;
  @include dj-table-stripped;
  @include dj-table-hover;
  @include dj-table-condensed;
  @media (max-width: $dj-w-768) {
    @include dj-table-responsive; // makes table responsive
  }
}

Table flip combined

Example

Name	Age	Gender
Bill	34	male
Jill	34	Female
Sue	54	Female
Tim	13	male
Tom	22	male
Ann	15	Female
Jenny	34	Femal
Sarah	78	Femal
Pual	26	male
Susan	15	Female
Jennya	6	Femal
Steve	47	male
Karl	51	male

SCSS

//Table flip is auto responsive
.table-flip-combined{
  @include dj-table-flip;
  @include dj-table-bordered;
  @include dj-table-stripped;
  @include dj-table-hover;
  @include dj-table-condensed;
}

Navigation

Example

HTML

<nav class="nav">
  <ul>
    <li>
      <a href="http://www.url.com " class="nav-active">Link</a>
    </li>
    <li>
      <a href="http://www.url.com">Link</a>
    </li>
    <li>
      <a href="http://www.url.com">Link</a>
    </li>
    <li>
      <a href="http://www.url.com">Link</a>
    </li>
  </ul>
</nav>

SCSS

.nav {
  @include dj-nav;
}

.nav-active {
  @include dj-active;
}

Navigation stacked

Example

HTML

<nav class="nav-stack">
  <ul>
    <li>
      <a href="http://www.url.com">First</a>
    </li>
     <li>
      <a href="http://www.url.com" class="nav-active">Middle</a>
    </li>
     <li>
      <a href="http://www.url.com">Last</a>
    </li>
  </ul>
</nav>

SCSS

.nav-stack {
  @include dj-nav-stack;
}

.nav-active {
  @include dj-active;
}

Navigation pill

Example

HTML

<nav class="nav-pill">
  <ul>
    <li>
      <a href="http://www.url.com">Link</a>
    </li>
     <li>
      <a href="http://www.url.com">Link</a>
    </li>
     <li>
      <a href="http://www.url.com">Link</a>
    </li>
     <li>
      <a href="http://www.url.com" class="nav-active">Link</a>
    </li>
  </ul>
</nav>

SCSS

.nav-pill {
  @include dj-nav-pill;
}

.nav-active {
  @include dj-active;
}

Navigation pill stacked

Example

HTML

<nav class="nav-pill">
  <ul>
    <li>
      <a href="http://www.url.com">Link</a>
    </li>
    <li>
      <a href="http://www.url.com">Link</a>
    </li>
     <li>
      <a href="http://www.url.com" class="nav-active">Link</a>
    </li>
     <li>
      <a href="http://www.url.com">Link</a>
    </li>
  </ul>
</nav>

SCSS

.nav-pill {
  @include dj-nav-pill-stack;
}

.nav-active {
  @include dj-active;
}

Pagination

Example

HTML

<ul class="pagination">
  <li><a href="#">Prev</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#" class="nav-active">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">Next</a></li>
</ul>

SCSS

.pagination {
  @include dj-pagination;
}

.nav-active {
  @include dj-active;
}

Panels

Panel

Example

This is a panel.

HTML

<section class="panel">
  This is a panel.
</section>

SCSS

.panel {
  @include dj-panel;
}

Well

Example

This is a well.

HTML

<section class="well">
  This is a well.
</section>

SCSS

.well {
  @include dj-well;
}

Alerts

Example

Info: This is a info alert.

Success! This is a success alert.

Warning! This is a warning alert.

Error! This is a danger alert.

HTML

<alert-info class="selector">
  <strong>Info:<strong>
  This is an info alert.
</section>

<alert-success class="selector">
  <strong>Success!<strong>
  This is a success alert.
</section>

<alert-warning class="selector">
  <strong>Warning!<strong>
  This is a warning alert.
</section>

<alert-danger class="selector">
  <strong>Error!<strong>
  This is an error alert.
</section>

SCSS

.alert-info {
  @include dj-alert-info;
}

.alert-success {
  @include dj-alert-success;
}

.alert-warning {
  @include dj-alert-warning;
}

.alert-danger {
  @include dj-alert-danger;
}

Panel list

Example

Panel list item
Panel list item
Panel list item
Panel list item

HTML

<ul class="panel-list">
  <li>Panel list item</li>
  <li>Panel list item</li>
  <li>Panel list item</li>
  <li>Panel list item</li>
</ul>

SCSS

.panel-list {
  @include dj-panel-list;
}

Panel list hover

Example

HTML

<ul class="panel-list-hover">
  <li><a href="#">Panel list item</a></li>
  <li><a href="#" class="panel-active">Panel list item</a></a></li>
  <li><a href="#">Panel list item</a></li>
  <li><a href="#">Panel list item</a></li>
</ul>

SCSS

.panel-list-hover {
  @include dj-panel-list;
  @include dj-panel-list-hover;
}

.panel-active {
  @include panel-active;
}

Images

Images types

Example

HTML

<img class="selector" src="image.png" alt="Image description">

SCSS


.img-rounded{
  @include dj-img-rounded;
  width:  140px;
  height: 140px;
}

.img-circle {
  @include dj-img-circle(140px);
}

.img-thumbnail{
  @include dj-img-thumbnail;
  width:  140px;
  height: 140px;
}

.img-thumbnail-circle {
  @include dj-img-thumbnail-circle(140px);
}

Helpers

SCSS

//Clear floats
@include dj-clearfix;


//Prepend content
@include dj-prepend('content');

//Append content
@include dj-append('content');

//Prepend and append content
@include dj-prepend-append('content');


//Round corners
@include dj-rounded-corners(radiusWidth);

@include dj-rounded-corners-top(radiusWidth);

@include dj-rounded-corners-bottom(radiusWidth);

@include dj-rounded-corners-left(radiusWidth);

@include dj-rounded-corners-right(radiusWidth);


//Circle
@include dj-round(radiusWidth);

@include dj-pill(pillWidth);

//No appearance
@include dj-no-appearance;

//Word-wrap
@include dj-word-wrap;

//borderless
@include dj-borderless;

//Gradient
@include dj-gradients;


//Above all elements. Default 99999
@include dj-on-top(z-index);

//Center block
@include dj-center-block(width);

//Positioning. Fixed or absolute (default)

@include dj-full-screen(position);

@include dj-top(position);

@include dj-bottom(position);

@include dj-left(position);

@include dj-right(position);

@include dj-full-width(position);

@include dj-full-width-top(position);

@include dj-full-width-bottom (position);

@include dj-full-height(position);

@include  dj-full-height-left position);

@include dj-full-height-right (position);

Units

Modular scale

SCSS

$dj-scale:          1.618;
$dj-scale-base:     18;
$dj-base-font-size: 18px; // default body font size equal to 1rem.

Unitless Values

SCSS

$dj-1:              1;
$dj-2:              ($dj-scale-base / 100) + $dj-1;
$dj-3:              $dj-1  * $dj-scale;
$dj-4:              $dj-2  * $dj-scale;
$dj-5:              $dj-3  * $dj-scale;
$dj-6:              $dj-4  * $dj-scale;
$dj-7:              $dj-5  * $dj-scale;
$dj-8:              $dj-6  * $dj-scale;
$dj-9:              $dj-7  * $dj-scale;
$dj-10:             $dj-8  * $dj-scale;
$dj-11:             $dj-9  * $dj-scale;
$dj-12:             $dj-10 * $dj-scale;
$dj-13:             $dj-11 * $dj-scale;
$dj-14:             $dj-12 * $dj-scale;
$dj-15:             $dj-13 * $dj-scale;
$dj-16:             $dj-14 * $dj-scale;
$dj-17:             $dj-15 * $dj-scale;
$dj-18:             $dj-16 * $dj-scale;
$dj-19:             $dj-17 * $dj-scale;
$dj-20:             $dj-18 * $dj-scale;

//Unitless scale below 0
$dj-01:             $dj-2  / $dj-scale;
$dj-02:             $dj-1  / $dj-scale;
$dj-03:             $dj-02 / $dj-scale;
$dj-04:             $dj-03 / $dj-scale;
$dj-05:             $dj-04 / $dj-scale;
$dj-06:             $dj-05 / $dj-scale;
$dj-07:             $dj-06 / $dj-scale;
$dj-07:             $dj-06 / $dj-scale;

Rem units

SCSS

$dj-1-r:            1rem;
$dj-2-r:            ($dj-scale-base / 100) + $dj-1-r;
$dj-3-r:            $dj-1-r  * $dj-scale;
$dj-4-r:            $dj-2-r  * $dj-scale;
$dj-5-r:            $dj-3-r  * $dj-scale;
$dj-6-r:            $dj-4-r  * $dj-scale;
$dj-7-r:            $dj-5-r  * $dj-scale;
$dj-8-r:            $dj-6-r  * $dj-scale;
$dj-9-r:            $dj-7-r  * $dj-scale;
$dj-10-r:           $dj-8-r  * $dj-scale;
$dj-11-r:           $dj-9-r  * $dj-scale;
$dj-12-r:           $dj-10-r * $dj-scale;
$dj-13-r:           $dj-11-r * $dj-scale;
$dj-14-r:           $dj-12-r * $dj-scale;
$dj-15-r:           $dj-13-r * $dj-scale;
$dj-16-r:           $dj-14-r * $dj-scale;
$dj-17-r:           $dj-15-r * $dj-scale;
$dj-18-r:           $dj-16-r * $dj-scale;
$dj-19-r:           $dj-17-r * $dj-scale;
$dj-20-r:           $dj-18-r * $dj-scale;

//Rem units scale below 0
$dj-01-r:           $dj-2-r  / $dj-scale;
$dj-02-r:           $dj-1-r  / $dj-scale;
$dj-03-r:           $dj-02-r / $dj-scale;
$dj-04-r:           $dj-03-r / $dj-scale;
$dj-05-r:           $dj-04-r / $dj-scale;
$dj-06-r:           $dj-05-r / $dj-scale;
$dj-07-r:           $dj-06-r / $dj-scale;
$dj-08-r:           $dj-07-r / $dj-scale;

Percentage units

SCSS

$dj-1-p:            1rem;
$dj-2-p:            ($dj-scale-base / 100) + $dj-1-p;
$dj-3-p:            $dj-1-p  * $dj-scale;
$dj-4-p:            $dj-2-p  * $dj-scale;
$dj-5-p:            $dj-3-p  * $dj-scale;
$dj-6-p:            $dj-4-p  * $dj-scale;
$dj-7-p:            $dj-5-p  * $dj-scale;
$dj-8-p:            $dj-6-p  * $dj-scale;
$dj-9-p:            $dj-7-p  * $dj-scale;
$dj-10-p:           $dj-8-p  * $dj-scale;
$dj-11-p:           $dj-9-p  * $dj-scale;
$dj-12-p:           $dj-10-p * $dj-scale;
$dj-13-p:           $dj-11-p * $dj-scale;
$dj-14-p:           $dj-12-p * $dj-scale;
$dj-15-p:           $dj-13-p * $dj-scale;
$dj-16-p:           $dj-14-p * $dj-scale;
$dj-17-p:           $dj-15-p * $dj-scale;
$dj-18-p:           $dj-16-p * $dj-scale;
$dj-19-p:           $dj-17-p * $dj-scale;
$dj-20-p:           $dj-18-p * $dj-scale;

//Percentage units scale below 0
$dj-01-p:           $dj-2-p  / $dj-scale;
$dj-02-p:           $dj-1-p  / $dj-scale;
$dj-03-p:           $dj-02-p / $dj-scale;
$dj-04-p:           $dj-03-p / $dj-scale;
$dj-05-p:           $dj-04-p / $dj-scale;
$dj-06-p:           $dj-05-p / $dj-scale;
$dj-07-p:           $dj-06-p / $dj-scale;
$dj-08-p:           $dj-07-p / $dj-scale;

Colors

Grays

SCSS	Value	Example
$dj-black	#000000
$dj-gray-1	#111111
$dj-gray-2	#222222
$dj-gray-3	#333333
$dj-gray-4	#444444
$dj-gray-5	#555555
$dj-gray-6	#666666
$dj-gray-7	#777777
$dj-gray-8	#888888
$dj-gray-9	#999999
$dj-gray-a	#aaaaaa
$dj-gray-b	#bbbbbb
$dj-gray-c	#cccccc
$dj-gray-d	#dddddd
$dj-gray-e	#eeeeee
$dj-white	#ffffff

Colors

SCSS	Value	Example
$dj-color-1	#3498db
$dj-color-2	#3448db
$dj-color-3	#2ecc71
$dj-color-4	#9b59b6
$dj-color-5	#f1c40f
$dj-color-6	#e67e22
$dj-color-7	#e74c3c
$dj-color-8	#1F8B39

Color tints and shades

SCSS	Value	Example
$dj-color-1-lighten-40	$dj-color-1 @40%
$dj-color-1-lighten-30	$dj-color-1 @30%
$dj-color-1-lighten-20	$dj-color-1 @20%
$dj-color-1-lighten-10	$dj-color-1 @10%
$dj-color-1-darken-10	$dj-color-1 @10%
$dj-color-1-darken-20	$dj-color-1 @20%
$dj-color-1-darken-30	$dj-color-1 @30%
$dj-color-1-darken-40	$dj-color-1 @40%
$dj-color-2-lighten-40	$dj-color-2 @40%
$dj-color-2-lighten-30	$dj-color-2 @30%
$dj-color-2-lighten-20	$dj-color-2 @20%
$dj-color-2-lighten-10	$dj-color-2 @10%
$dj-color-2-darken-10	$dj-color-2 @10%
$dj-color-2-darken-20	$dj-color-2- @20%
$dj-color-2-darken-30	$dj-color-2 @30%
$dj-color-2-darken-40	$dj-color-2 @40%
$dj-color-3-lighten-40	$dj-color-3 @40%
$dj-color-3-lighten-30	$dj-color-3 @30%
$dj-color-3-lighten-20	$dj-color-3 @20%
$dj-color-3-lighten-10	$dj-color-3 @10%
$dj-color-3-darken-10	$dj-color3- @10%
$dj-color-3-darken-20	$dj-color-3 @20%
$dj-color-3-darken-30	$dj-color-3 @30%
$dj-color-3-darken-40	$dj-color-3 @40%
$dj-color-4-lighten-40	$dj-color-4 @40%
$dj-color-4-lighten-30	$dj-color-4 @30%
$dj-color-4-lighten-20	$dj-color-4 @20%
$dj-color-4-lighten-10	$dj-color-4 @10%
$dj-color-4-darken-10	$dj-color-4 @10%
$dj-color-4-darken-20	$dj-color-4 @20%
$dj-color-4-darken-30	$dj-color-4 @30%
$dj-color-4-darken-40	$dj-color-4 @40%
$dj-color-5-lighten-40	$dj-color-5 @40%
$dj-color-5-lighten-30	$dj-color-5 @30%
$dj-color-5-lighten-20	$dj-color-5 @20%
$dj-color-5-lighten-10	$dj-color-5 @10%
$dj-color-5-darken-10	$dj-color-5 @10%
$dj-color-5-darken-20	$dj-color-5 @20%
$dj-color-5-darken-30	$dj-color-5 @30%
$dj-color-5-darken-40	$dj-color-5 @40%
$dj-color-6-lighten-40	$dj-color-6 @40%
$dj-color-6-lighten-30	$dj-color-6 @30%
$dj-color-6-lighten-20	$dj-color-6 @20%
$dj-color-6-lighten-10	$dj-color-6 @10%
$dj-color-6-darken-10	$dj-color-6 @10%
$dj-color-6-darken-20	$dj-color-6 @20%
$dj-color-6-darken-30	$dj-color-6 @30%
$dj-color-6-darken-40	$dj-color-6 @40%
$dj-color-8-lighten-40	$dj-color-7 @40%
$dj-color-7-lighten-30	$dj-color-7 @30%
$dj-color-7-lighten-20	$dj-color-7 @20%
$dj-color-7-lighten-10	$dj-color-7 @10%
$dj-color-7-darken-10	$dj-color-7 @10%
$dj-color-7-darken-20	$dj-color-7 @20%
$dj-color-7-darken-30	$dj-color-7 @30%
$dj-color-7-darken-40	$dj-color-7 @40%
$dj-color-8-lighten-40	$dj-color-8 @40%
$dj-color-8-lighten-30	$dj-color-8 @30%
$dj-color-8-lighten-20	$dj-color-8 @20%
$dj-color-8-lighten-10	$dj-color-8 @10%
$dj-color-8-darken-10	$dj-color-8 @10%
$dj-color-8-darken-20	$dj-color-8 @20%
$dj-color-8-darken-30	$dj-color-8 @30%
$dj-color-8-darken-40	$dj-color-8 @40%

Action colors

SCSS	Value	Example
$dj-primary-color	#3448db
$dj-info-color	#3498db
$dj-success-color	#2ecc71
$dj-warning-color	#f1c40f
$dj-danger-color	#e74c3c
$dj-diabled-color	#eeeeee

Link colors

SCSS	Value	Example
$dj-link-color	$dj-color-
$dj-hover-color	$dj-color-
$dj-active-color	#e74c3c
$dj-visited-color	#aaaaaa

Normalize

For cross browser compatiblity DJ uses Normalize.css, a project by Nicolas Gallagher, co-created with Jonathan Neal.

Font-Awesome

DJ uses Font Awesome created by Dave Gandy for icons. More information and a full list of icons a can be found at Font Awesome.

Inline icons

fa-camera-retro

HTML

<i class="fa fa-camera-retro"></i>

SCSS icons

Exmaple

Icon

Icon before

Icon after

Icon before and after

HTML

<span class="icon"> Icon</span>
<div class="icon-before"> Icon before</div>
<div class="icon-after">Icon after </div>
<span class="icon-before-after"> Icon before and after </span>

HTML

.icon:before {
  @include dj-icon($fa-var-heart);
}

.icon-before {
  @include dj-icon-before($fa-var-cog);
}

.icon-after {
  @include dj-icon-after($fa-var-coffee);
}

.icon-before-after {
  @include dj-icon-before-after($fa-var-flag, $fa-var-globe);
}

Animation

Aimation mixins inspired by animate.css created by Daniel Eden.

Attention seeking

Flash

Bounce

Shake

Tada

Swing

Wobble

Plulse

Wiggle

Bouncing

Bounce In

Bounce In Up

Bounce In Down

Bounce In Left

Bounce In Right

Bounce Out

Bounce Out Up

Bounce Out Down

Bounce Out Left

Bounce Out Right

Fading

Fade In

Fade In Up

Fade In Down

Fade In Left

Fade In Right

Fade In Up Big

Fade In Down Big

Fade In Left Big

Fade In Right Big

Fade Out

Fade Out Up

Fade Out Down

Fade Out Left

Fade Out Right

Fade Out Up Big

Fade Out Down Big

Fade Out Left Big

Fade Out Right Big

Fade In

Fade Out

Flipping

Flip

Flip In X

Flip Out X

Flip In Y

Flip Out Y

Light Speed

Light Speed IN

Light Speed Out

Rotating

Rotate In

Rotate In Up Left

Rotate In Down Left

Rotate In Up Right

Rotate In Down Right

Rotate Out

Rotate Out Up Left

Rotate Out Down Left

Rotate Out Up Right

Rotate Out Down Right

Open and Close

Open Up Left

Open Up Right

Open down Left

Open down Right

Open Up Left

Open Up Right

Open down Left

Open down Right

Close Up Left

Close Up Right

Close down Left

Close down Right

Specials

Hinge

Roll In

Roll Out

Browser-Support

DJ supports Chrome, Safari, Firefox, Opera, Internet Explorer 9+.

IE9 does not support placeholders, table round corners and flip table.
Safari does not support image circle and adds a space between inline elements for button group, input groups and pagination.