Color Names and Values

Several colors have alias names for the academy

• fancy-blue
  twodvs
• bright-blue
  resonate
• olive
  ecourse
• marigold
  onedvs
• hot-orange
  slideology
• black
• midnight
• very-dark
• dark
• taupe
• light
• legacy-gray
• very-light
• white

Light Tint 20% Lighter

Add the suffix -light to the color class to get a lighter tint.

class="color-fancy-blue-light"

• fancy-blue-light
• bright-blue-light
• olive-light
• marigold-light
• hot-orange-light
• taupe-light
• warm-gray-light
• midnight-light

Dark Tint 20% Darker

Add the suffix -dark to the color class to get a darker tint.

class="color-fancy-blue-dark"

• fancy-blue-dark
• bright-blue-dark
• olive-dark
• marigold-dark
• hot-orange-dark
• taupe-dark
• warm-gray-dark
• midnight-dark

Deprecated Color Names

These names are not recommended for use, but are still here to support older pages built using the early version of Vogue.

• ash
• bandicoot
• gulf-stream
• chocolate
• sycamore
• bondi-blue
• terracotta

Color Classes

You can apply vogue colors to text, fills, and borders on any element by using color classes provided. The syntax is simple, just use the right prefix for the attribute you want to style and append the name of the color you want to use.

class="color-[color name]"

class="fill-[color name]"

class="border-[color name]"

Text Color

<span class="color-marigold">Somewhere</span>
<span class="color-bright-blue">over</span> 
<span class="color-olive">the</span>
<span class="color-hot-orange">rainbow</span>

Combining Color Classes

<div class="color-white fill-bright-blue-light border-all border-bright-blue">#COLORS</div>

Auto Colors Inside Dark Fill

If you choose a dark fill, vogue will automatically change the text color of elements inside that element to white. Links are preserved as blue.

Border Classes

These classes can help you quickly apply a border to an object with a specific style and color. There are no classes for border width, so border is always defaulted to 1px.

border-all
border-top
border-bottom
border-left
border-right

border-dashed
border-solid
border-dotted

border-circle

Logos

A collection of logos are available at different sizes. The default logo is an SVG which provides the sharpest quality on hi-resolution screens. It does not allow for color classes, except for a white version. All logos will automatically switch to the white version in the dark theme. Support for the CSS logo is limited in some browsers. Old browsers such as IE 8 and lower will automatically default to the PNG Logo instead of SVG.

SVG Logo (Default)

<div class="duarte-logo nano"></div>

<div class="duarte-logo micro"></div>

<div class="duarte-logo tiny"></div>

<div class="duarte-logo small"></div>

<div class="duarte-logo medium"></div>

<div class="duarte-logo large"></div>

CSS3 Logo

<div class="duarte-logo css nano"></div>

<div class="duarte-logo css micro"></div>

<div class="duarte-logo css tiny"></div>

<div class="duarte-logo css small"></div>

<div class="duarte-logo css medium"></div>

<div class="duarte-logo css large"></div>

PNG Logo

<div class="duarte-logo image nano"></div>

<div class="duarte-logo image micro"></div>

<div class="duarte-logo image tiny"></div>

<div class="duarte-logo image small"></div>

<div class="duarte-logo image medium"></div>

<div class="duarte-logo image large"></div>

Evelyn Sans Logo

<div class="duarte-logo evelyn nano"></div>

<div class="duarte-logo evelyn micro"></div>

<div class="duarte-logo evelyn tiny"></div>

<div class="duarte-logo evelyn small"></div>

<div class="duarte-logo evelyn medium"></div>

<div class="duarte-logo evelyn large"></div>

SVG Branded Logo

The SVG Logo can be extended with a site name that uses ApexNew font.

<div class="duarte-logo branded nano">Duarte</div>

<div class="duarte-logo branded micro">Duarte</div>

<div class="duarte-logo branded tiny">Duarte</div>

<div class="duarte-logo branded small">Duarte</div>

<div class="duarte-logo branded medium">Duarte</div>

<div class="duarte-logo branded large">Duarte</div>

Legacy SVG Logo

<div class="duarte-logo legacy nano"></div>

<div class="duarte-logo legacy micro"></div>

<div class="duarte-logo legacy tiny"></div>

<div class="duarte-logo legacy small"></div>

<div class="duarte-logo legacy medium"></div>

<div class="duarte-logo legacy large"></div>

Franklin

<div class="duarte-logo franklin nano"></div>

<div class="duarte-logo franklin micro"></div>

<div class="duarte-logo franklin tiny"></div>

<div class="duarte-logo franklin small"></div>

<div class="duarte-logo franklin medium"></div>

<div class="duarte-logo franklin large"></div>

EvelynSans Icons

EvelynSans is a font-face containing a collection of vector icons. These icons are endlessly scalable and can easily be colored using simple color classes.

<i class="evelyn-[icon name]"></i>

Duarte Icons

Loading Indicators

This loading indicator icon is an animated gif. It comes in four different styles depending on the background and the color of the indicator. Because animated gifs don't have alpha the edges have some matte bleed so be sure to match the right icon to the background.

<i class="evelyn-loading"></i>

<i class="evelyn-loading black"></i>

<i class="evelyn-loading dark"></i>

<i class="evelyn-loading dark white"></i>

Validation Icons

Validation icons can be added next to form fields to show validation status. The required icon is intended to be subtle so as not to be a distraction until the user has succeeded or failed the validation.

<i class="evelyn-validation-required"></i>

<i class="evelyn-validation-required evelyn-validation-success"></i>

<i class="evelyn-validation-required evelyn-validation-error"></i>

Fonts

These fonts are included as part of Vogue and are made available to you with font-family. ApexNew is the primary brand font and is available in three weights at all sizes. Apex is also provided with every web font format to ensure maximum coverage across browsers. GoodPro is not intended for use outside Duarte internal sites, and it does not have full web font format support.

font-family:'ApexNew Light'

font-family:'ApexNew Light Italic'

font-family:'ApexNew Book'

font-family:'ApexNew Book Italic'

font-family:'ApexNew Medium'

font-family:'ApexNew Medium Italic'

font-family:'GoodPro Wide Book'

font-family:'GoodPro Wide Bold'

Headers (ApexNew Book)

Headers with Secondary Text

Use the <small> tag inside of headers when you need a tagline or a subtitle on the same line.

<h1>h1 Header <small>Secondary</small></h1>

Light Header

A majority of the top level headings across the Duarte brand rely on the light style for headings. It is a good idea to use light whenever you are using a h1 or h2 size heading.

<h1 class="light">

Emphasis Header

<h1><em></em></h1>

Light Emphasis Header

<h1 class="light"><em></em></h1>

Strong Header

<h1><strong></strong></h1>

Strong Emphasis Header

<h1><em><strong></strong></em></h1>
<h1><strong><em></em></strong></h1>

Linked Headers

<h1><a></a></h1>
<h1 class="light"><a></a></h1>

Header Group

When hierarchical headers are adjacent use a header group

<hgroup>
   <h2>Resonate</h2>
   <h3>Present Visual Stories That Transform Audiences</h3>
</hgroup>

Paragraphs

<p>

<a>

<strong>

<em>

<u>

<strike>

<sup>

<sub>

<p class="text-left">

<p class="text-right">

<p class="text-center">

<abbr title="abbreviation">abbr</abbr>

Code and Preformatted Text

Code examples are useful for showing example text, as demonstrated here on this page. The mono-spaced font is very readable because every letter has the same width. The benefit of this kind of font is that it minimizes mistakes when a user is reading or copying the text by sight.

The <pre> tag is for preformatted text. This means that all spaces and returns in the HTML code are represented on the rendered page. The <code> tag is for bits of code or special reserved names such as classes or variables. For blocks of code use <pre><code></code></pre> as a container.

<code> with <pre> wrapper

Plain text with <pre> wrapper

Code Inside Headings

<h1>Heading H1 <code>code</code></h1>

Inline Quotes

Inline quotes are useful for calling out a short excerpt from a body of text. This style will automatically apply the quote tags for you so you don't have to include them in the HTML.

<q class="left">quote</q>
<q class="right">quote</q>
<q>quote</q>

Blockquote

<blockquote>
    <p>quote text</p>
    <cite><strong>Name</strong> Title</cite>
</blockquote>

Labels

Labels are inline elements useful for tagging or highlighting a word. Generally labels should be short—either one or two words in length.

<span class="label">Label</span>
<span class="label round">Label Round</span>

<span class="label secondary">Label</span>
<span class="label secondary round">Label Round</span>

<span class="label success">Label</span>
<span class="label success round">Label Round</span>

<span class="label alert">Label</span>
<span class="label alert round">Label Round</span>

Tables

Vogue provides many different table styles. All tables should contain thead and tbody elements, but there is a backup style for tables that omit these (see the last table entry). To achieve the best formatting these tags are highly recommended. Because Vogue overrides the base table tag you will find it very difficult to use tables for structure, but there is a reset class provided for situations like that.

Default Table

<table>

Striped Table

<table class="striped">

Condensed Table

<table class="condensed">

Vertical Table

<table class="vertical">

Vertical Condensed Table

<table class="vertical condensed">

Vertical Striped Table

<table class="vertical striped">

Vertical Condensed Striped Table

<table class="vertical condensed striped">

Grid

<table class="grid">

Grid Condensed

<table class="grid condensed">

Grid Striped

<table class="grid striped">

No Head

<table class="nohead">

Reset

<table class="reset">

Table without thead or tbody tags

Lists

Unordered Lists

<ul class="disc">

<ul class="circle">

<ul class="square">

<ul class="none">

<ol >

<dl>
    <dt>Title</dt>
    <dd>Definition</dd>
</dl>

Buttons

Vogue comes with a solid button that you can use for many situations. This button will automatically be applied to any <button> tag. To create a hyperlink button add the button class to any <a> tag.

Previous/Back

<a class="button prev"></a>

Next

<a class="button next"></a>

Up

<a class="button up"></a>
<a class="button up-right"></a>

Down

<a class="button down"></a>
<a class="button down-right"></a>

Dot

<a class="button dot"></a>

Button Element

<button class="button">button</button>
<button class="button up">button</button>
<button class="button down">button</button>
<button class="button next">button</button>
<button class="button prev">button</button>
                                

<button class="button success">button.success</button>
<button class="button success up">button.success</button>
<button class="button success down">button.success</button>
<button class="button success next">button.success</button>
<button class="button success prev">button.success</button>

<button class="button secondary">button.secondary</button>
<button class="button secondary up">button.secondary</button>
<button class="button secondary down">button.secondary</button>
<button class="button secondary next">button.secondary</button>
<button class="button secondary prev">button.secondary</button>

<button class="button alert">button.alert</button>
<button class="button alert up">button.alert</button>
<button class="button alert down">button.alert</button>
<button class="button alert next">button.alert</button>
<button class="button alert prev">button.alert</button>

<button class="button clear">button.clear</button>
<button class="button clear up">button.clear</button>
<button class="button clear down">button.clear</button>
<button class="button clear next">button.clear</button>
<button class="button clear prev">button.clear</button>

<button class="button inactive">button.inactive</button>
<button class="button inactive up">button.inactive</button>
<button class="button inactive down">button.inactive</button>
<button class="button inactive next">button.inactive</button>
<button class="button inactive prev">button.inactive</button>

Buttons With Color Classes

Vogue color classes also will work on buttons.

<a class="button fill-hot-orange">hot-orange</a>
<a class="button fill-hot-orange-light">hot-orange-light</a>
<a class="button fill-hot-orange-dark">hot-orange-dark</a>

<a class="button fill-marigold">marigold</a>
<a class="button fill-marigold-light">marigold-light</a>
<a class="button fill-marigold-dark">marigold-dark</a>

<a class="button fill-olive">olive</a>
<a class="button fill-olive-light">olive-light</a>
<a class="button fill-olive-dark">olive-dark</a>

<a class="button fill-fancy-blue">fancy-blue</a>
<a class="button fill-fancy-blue-light">fancy-blue-light</a>
<a class="button fill-fancy-blue-dark">fancy-blue-dark</a>

<a class="button fill-bright-blue">bright-blue</a>
<a class="button fill-bright-blue-light">bright-blue-light</a>
<a class="button fill-bright-blue-dark">bright-blue-dark</a>

<a class="button fill-midnight">midnight</a>
<a class="button fill-midnight-light">midnight-light</a>
<a class="button fill-midnight-dark">midnight-dark</a>

<a class="button fill-black">black</a>

<a class="button fill-white color-bright-blue">white</a>

Special Buttons

These are special cases of the button class.

<nav><a rel="prev">Previous</a></nav>

<nav><a rel="top">Top</a></nav>

<nav><a rel="next">Next</a></nav>

<a class="button double-down expand">Double Down</a>

<a class="button expand text-left"></a>

<a class="button expand next text-left"></a>

<a class="button expand prev text-left"></a>

<a class="button expand clear text-left"></a>

<a class="button expand next clear text-left"></a>

<a class="button expand prev clear text-left"></a>

<a class="button expand text-right"></a>

<a class="button expand prev text-right"></a>

<a class="button expand next text-right"></a>

<a class="button expand clear text-right"></a>

<a class="button expand prev clear text-right"></a>

<a class="button expand next clear text-right"></a>

Button in a Fill Test

Button Text Color Test

Button Group

<ul class="button-group">
    <li><a class="button">Button</a></li>
    ...
</ul>
<ul class="button-group even two-up">
<ul class="button-group even three-up">
<ul class="button-group even four-up">
<ul class="button-group even five-up">

Dropdown Buttons

By default the menu items on click will follow the link href. If you want to cancel that behavior then add the attribute data-default="false" to the dropdown element.

<div class="button dropdown black">
    <span>Dropdown Button</span>
    <ul class="no-hover">
        <li><a href="#link">Dropdown Item</a></li>
        <li><a href="#link">Another Dropdown Item</a></li>        
    </ul>
</div>

Tabs

<dl class="tabs">
    <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
    <dd><a href="#simple2">Simple Tab 2</a></dd>
    <dd><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
    <li class="active" id="simple1Tab">Tab 1 Contents</li>
    <li id="simple2Tab">Tab 2 Contents</li>
    <li id="simple3Tab">Tab 3 Contents</li>
</ul>

Alerts

<div class="alert-box">

<div class="alert-box success">

<div class="alert-box alert">

<div class="alert-box secondary">

Forms

Basic Form

Label Alignment

Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of .right to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of .inline will have it vertically center against an input.

<form>
    <div class="row unpadded">
        <div class="two mobile-one columns">
            <label class="right inline">Address Name:</label>
        </div>
        <div class="ten mobile-three columns">
            <input type="text" placeholder="e.g. Home" class="eight">
        </div>
    </div>
</form>

Fieldsets

Use a fieldset to group inputs together with a legend to name the group. This is useful for related inputs like address, city, state, postal code.

<fieldset>
    <legend>Legend</legend>
    <label>Label</label>
    <input type="text" />
</fieldset>

Select

Radio Buttons

Checkboxes

Duarte Finder

Add a search panel that reveals itself from the top of the page. Place this element in the root of the page inside of body.

<div class="duarte-finder">
    <div class="row">
        <div class="eight columns centered">
            <form>
                <div class="row collapse">
                    <div class="ten mobile-three columns">
                        <input type="text" placeholder="What are you looking for?" name="search">
                    </div>
                    <div class="two mobile-one columns">
                        <button class="button expand postfix search">Search</button>
                    </div>
                </div>
            </form>
            <a href="#" class="button black up" rel="close-finder">Close</a>
        </div>
    </div>
</div>

Finder Methods

<i class="evelyn-search search-icon"></i>

$('.duarte-finder').trigger('toggle');

$('.duarte-finder').trigger('show');

$('.duarte-finder').trigger('hide');

$('.duarte-finder').trigger('showPartial');

.global-search is a HTML snippet to provide a search icon for opening and closing the finder

.duarte-finder is a revealed searchbox that slides down from the top of the window.

Page Structure

A basic page that implements Vogue should look something like this:

<body>
    <header>
        <div class="row">
            <div class="twelve columns"><div class="duarte-logo"></div></div>
        </div>
    </header>
    <section role="main">
        <div class="row">
            <div class="four columns"><!-- Sidebar --></div>
            <article class="eight columns"><!-- Content --></article>
        </div>
    </section>
    <footer>
        <div class="row">
            <div class="twelve columns"><!-- Footer --></div>
        </div>
    </footer>
</body>

header.nofill will not use a filled background.

Adding <section role="main" > will give it a 400px min-height and a 3em bottom margin

Adding class="row" to any of the structure elements will constrict the background fill to the 12 column grid width. By default these elements will expand to fill the width of the window.

Ribbon