Pattern Library

Color Palette

The color palette specifies primary and secondary colors to use throughout a design.

Primary Colors


$color-p0


$color-p1


$color-p2


$color-p3


$color-p4


$color-p5


$color-p6


$color-p7


$color-p8


$color-p9


$color-p10

Secondary Colors


$color-s0


$color-s1


$color-s2


$color-s3


$color-s4


$color-s5


$color-s6


$color-s7


$color-s8


$color-s9


$color-s10

Typography

Heading Size

H1 Heading Size

<preference name='headingSize' value='h1'/>

H2 Heading Size

<preference name='headingSize' value='h2'/>

H3 Heading Size

<preference name='headingSize' value='h3'/>

H4 Heading Size

<preference name='headingSize' value='h4'/>
H5 Heading Size
<preference name='headingSize' value='h5'/>
H6 Heading Size
<preference name='headingSize' value='h6'/>

Heading Style

H1 Heading with .ddc-heading-1 class applied.

<preference name='headingStyle' value='1'/>

H1 Heading with .ddc-heading-2 class applied.

<preference name='headingStyle' value='2'/>

H1 Heading with .ddc-heading-3 class applied.

<preference name='headingStyle' value='3'/>

H1 Heading with .ddc-heading-4 class applied.

<preference name='headingStyle' value='4'/>

H1 Heading with .ddc-heading-5 class applied.

<preference name='headingStyle' value='5'/>

H1 Heading with .ddc-heading-6 class applied.

<preference name='headingStyle' value='6'/>

Paragraph

Important or intro paragraphs can have the lead class applied to help them stand out.

<p class="lead">Content</p>

Then, body text. So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

<p>Content</p>

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

<blockquote><p>Content</p></blockquote>

Inline Elements

This is a text link

<p><a href="#">This is a text link</a></p>

Strong is used to indicate strong importance

<p><strong>Strong is used to indicate strong importance</strong></p>

This text has added emphasis

<p><em>This text has added emphasis</em></p>

The b element is stylistically different text from normal text, without any special importance

<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

The i element is text that is set off from the normal text

<p>The <i>i element</i> is text that is set off from the normal text</p>

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

This text is deleted and This text is inserted

<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

This text has a strikethrough

<p><s>This text has a strikethrough</s></p>

Superscript®

<p>Superscript<sup>®</sup></p>

Subscript for things like H2O

<p>Subscript for things like H<sub>2</sub>O</p>

This small text is small for for fine print, etc.

<p><small>This small text is small for for fine print, etc.</small></p>

Abbreviation: HTML

<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

Keyboard input: Cmd

<p>Keyboard input: <kbd>Cmd</kbd></p>

This text is a short inline quotation

<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

This is a citation

<p><cite>This is a citation</cite></p>

The dfn element indicates a definition.

<p>The <dfn>dfn element</dfn> indicates a definition.</p>

The mark element indicates a highlight

<p>The <mark>mark element</mark> indicates a highlight</p>

This is what inline <code> looks like.

<p>This is what inline <code>&lt;code&gt;</code> looks like.</p>

This is sample output from a computer program

<p><samp>This is sample output from a computer program</samp></p>

The variarble element, such as x = y

<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>

Unordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class='list-unstyled'>

Inline List

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class='list-inline'>

Definiton List

Description Lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal Definiton List

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class='dl-horizontal'>

Utilities

This is center aligned text

<p class="text-center">This is center aligned text</p>

This is left aligned text

<p class="text-left">This is left aligned text</p>

This is right aligned text

<p class="text-right">This is right aligned text</p>

This is muted text

<p class="text-muted">This is muted text</p>

This is primary text

<p class="text-primary">This is primary text</p>

This is success text

<p class="text-success">This is success text</p>

This is info text

<p class="text-info">This is info text</p>

This is warning text

<p class="text-warning">This is warning text</p>

This is danger text

<p class="text-danger">This is danger text</p>

This text is font size xsmall

<p class="ddc-font-size-xsmall">This text is font size xsmall</p>

This text is font size small

<p class="ddc-font-size-small">This text is font size small</p>

This text is font size large

<p class="ddc-font-size-large">This text is font size large</p>

This text is font size xlarge

<p class="ddc-font-size-xlarge">This text is font size xlarge</p>

This text is font size xxlarge

<p class="ddc-font-size-xxlarge">This text is font size xxlarge</p>

This text is font size jumbo

<p class="ddc-font-size-jumbo">This text is font size jumbo</p>

Forms

Forms may be shown with labels stacked above input elements (default), horizontally with labels adjacent to input elements (horizontal), or with all elements floated left for very small forms (inline). The formLayout preference may be used to change the display of a form.

Default Layout

Radio Group
Checkbox Group

Horizontal Layout

Radio Group
Checkbox Group
<preference name='formLayout' value='horizontal'/>
<preference name='labelWidth' value='2'/>

Inline Layout

<preference name='formLayout' value='inline'/>

Slider

Buttons

Buttons are generally added to a page using portlet preferences whose names contain the strings buttonSize, buttonStyle, and buttonLayout.

The default button style should be used when it is less visually prominent than primary buttons but more prominent than link buttons. It should be seen as a secondary button.

Button Style

<preference name='buttonStyle' value='primary'/>

Button Size

<preference name='buttonSize' value='xlarge'/>

Button Block

<preference name='buttonLayout' value='block'/>

Box Styles

Box Style 0

Master cleanse bitters nisi, voluptate Austin VHS viral incididunt Schlitz Thundercats polaroid mixtape seitan. Sustainable normcore roof party, Pinterest aute semiotics gluten-free 8-bit sint mlkshk hella heirloom tote bag vegan. Pickled heirloom artisan, +1 mumblecore cillum next level sint magna eu officia Tumblr sapiente vinyl. Mustache leggings YOLO duis consectetur tempor minim art party. Fingerstache PBR blog veniam, dolore messenger bag reprehenderit organic. Organic forage Austin, Carles dreamcatcher bitters Bushwick VHS Neutra authentic. Nisi Schlitz aliquip, bicycle rights eiusmod kogi twee.

<preference name='widgetClasses' value='ddc-box-0'/>

Box Style 1

Master cleanse bitters nisi, voluptate Austin VHS viral incididunt Schlitz Thundercats polaroid mixtape seitan. Sustainable normcore roof party, Pinterest aute semiotics gluten-free 8-bit sint mlkshk hella heirloom tote bag vegan. Pickled heirloom artisan, +1 mumblecore cillum next level sint magna eu officia Tumblr sapiente vinyl. Mustache leggings YOLO duis consectetur tempor minim art party. Fingerstache PBR blog veniam, dolore messenger bag reprehenderit organic. Organic forage Austin, Carles dreamcatcher bitters Bushwick VHS Neutra authentic. Nisi Schlitz aliquip, bicycle rights eiusmod kogi twee.

<preference name='widgetClasses' value='ddc-box-1'/>

Box Style 2

Master cleanse bitters nisi, voluptate Austin VHS viral incididunt Schlitz Thundercats polaroid mixtape seitan. Sustainable normcore roof party, Pinterest aute semiotics gluten-free 8-bit sint mlkshk hella heirloom tote bag vegan. Pickled heirloom artisan, +1 mumblecore cillum next level sint magna eu officia Tumblr sapiente vinyl. Mustache leggings YOLO duis consectetur tempor minim art party. Fingerstache PBR blog veniam, dolore messenger bag reprehenderit organic. Organic forage Austin, Carles dreamcatcher bitters Bushwick VHS Neutra authentic. Nisi Schlitz aliquip, bicycle rights eiusmod kogi twee.

<preference name='widgetClasses' value='ddc-box-2'/>

Box Style 3

Master cleanse bitters nisi, voluptate Austin VHS viral incididunt Schlitz Thundercats polaroid mixtape seitan. Sustainable normcore roof party, Pinterest aute semiotics gluten-free 8-bit sint mlkshk hella heirloom tote bag vegan. Pickled heirloom artisan, +1 mumblecore cillum next level sint magna eu officia Tumblr sapiente vinyl. Mustache leggings YOLO duis consectetur tempor minim art party. Fingerstache PBR blog veniam, dolore messenger bag reprehenderit organic. Organic forage Austin, Carles dreamcatcher bitters Bushwick VHS Neutra authentic. Nisi Schlitz aliquip, bicycle rights eiusmod kogi twee.

<preference name='widgetClasses' value='ddc-box-3'/>

Box Style 4

Master cleanse bitters nisi, voluptate Austin VHS viral incididunt Schlitz Thundercats polaroid mixtape seitan. Sustainable normcore roof party, Pinterest aute semiotics gluten-free 8-bit sint mlkshk hella heirloom tote bag vegan. Pickled heirloom artisan, +1 mumblecore cillum next level sint magna eu officia Tumblr sapiente vinyl. Mustache leggings YOLO duis consectetur tempor minim art party. Fingerstache PBR blog veniam, dolore messenger bag reprehenderit organic. Organic forage Austin, Carles dreamcatcher bitters Bushwick VHS Neutra authentic. Nisi Schlitz aliquip, bicycle rights eiusmod kogi twee.

<preference name='widgetClasses' value='ddc-box-4'/>

Box Style 5

Master cleanse bitters nisi, voluptate Austin VHS viral incididunt Schlitz Thundercats polaroid mixtape seitan. Sustainable normcore roof party, Pinterest aute semiotics gluten-free 8-bit sint mlkshk hella heirloom tote bag vegan. Pickled heirloom artisan, +1 mumblecore cillum next level sint magna eu officia Tumblr sapiente vinyl. Mustache leggings YOLO duis consectetur tempor minim art party. Fingerstache PBR blog veniam, dolore messenger bag reprehenderit organic. Organic forage Austin, Carles dreamcatcher bitters Bushwick VHS Neutra authentic. Nisi Schlitz aliquip, bicycle rights eiusmod kogi twee.

<preference name='widgetClasses' value='ddc-box-5'/>

Icons

Global icons that are overridden by the variation are in the Global Icons section below and are highlighted in yellow.

Icon Sizes

<preference name='iconSize' value='xlarge'/>

Animation Classes

Variation Icons

<preference name='iconStyle' value='arrow1-right'/>

Global Icons

<preference name='iconStyle' value='arrow1-right'/>

DDC Grids

Standard Grid Columns

.ddc-span12

.ddc-span11

.ddc-span1

.ddc-span10

.ddc-span2

.ddc-span9

.ddc-span3

.ddc-span8

.ddc-span4

.ddc-span7

.ddc-span5

.ddc-span6

.ddc-span6

.ddc-span4

.ddc-span4

.ddc-span4

.ddc-span3

.ddc-span3

.ddc-span3

.ddc-span3

.ddc-span2

.ddc-span2

.ddc-span2

.ddc-span2

.ddc-span2

.ddc-span2

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

.ddc-span1

<group type='row'>
	<group type='ddc-span8'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='ddc-span4'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>

Offsetting Grid Columns

.ddc-span4

.ddc-span4 .ddc-offset4

.ddc-span3 .ddc-offset3

.ddc-span3 .ddc-offset3

.ddc-span6 .ddc-offset3

<group type='row'>
	<group type='ddc-span4'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='ddc-span4 ddc-offset4'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>
<group type='row'>
	<group type='ddc-span3 ddc-offset3'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='ddc-span3 ddc-offset3'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>
<group type='row'>
	<group type='ddc-span6 ddc-offset3'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>

Bootstrap Grids

Standard Grid Columns

.col-xs-12

.col-xs-11

.col-xs-1

.col-xs-10

.col-xs-2

.col-xs-9

.col-xs-3

.col-xs-8

.col-xs-4

.col-xs-7

.col-xs-5

.col-xs-6

.col-xs-6

.col-xs-4

.col-xs-4

.col-xs-4

.col-xs-3

.col-xs-3

.col-xs-3

.col-xs-3

.col-xs-2

.col-xs-2

.col-xs-2

.col-xs-2

.col-xs-2

.col-xs-2

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

<group type='row'>
	<group type='col-xs-8'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='col-xs-4'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>

Offsetting Grid Columns

.col-xs-4

.col-xs-4 .col-xs-offset-4

.col-xs-3 .col-xs-offset-3

.col-xs-3 .col-xs-offset-3

.col-xs-6 .col-xs-offset-3

<group type='row'>
	<group type='col-xs-4'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='col-xs-4 col-xs-offset-4'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>
<group type='row'>
	<group type='col-xs-3 col-xs-offset-3'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='col-xs-3 col-xs-offset-3'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>
<group type='row'>
	<group type='col-xs-6 col-xs-offset-3'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>

Ordering Grid Columns

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<group type='row'>
	<group type='col-md-9 col-md-push-3'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='col-md-3 col-md-pull-9'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>

Responsive Grid Example

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6

.col-xs-6

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and a responsive utility classes.

.col-xs-6 .col-sm-3
Sample piece of text to make this div taller than the others.

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

<group type='row'>
	<group type='col-xs-6 col-sm-3'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='col-xs-6 col-sm-3'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='clearfix visible-xs-block'>
	</group>
	<group type='col-xs-6 col-sm-3'>
		<!-- Portlet Windows Go Here -->
	</group>
	<group type='col-xs-6 col-sm-3'>
		<!-- Portlet Windows Go Here -->
	</group>
</group>

Alerts

success: lorem ipsum dolor sit amet, consectetur adipisicing elit, link example sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
info: lorem ipsum dolor sit amet, consectetur adipisicing elit, link example sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
warning: lorem ipsum dolor sit amet, consectetur adipisicing elit, link example sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
danger: lorem ipsum dolor sit amet, consectetur adipisicing elit, link example sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
default: lorem ipsum dolor sit amet, consectetur adipisicing elit, link example sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BANNERS

Value statement banners that affix to top or bottom of window. A button with icon 'ddc-icon-remove' is suggested to allow user-controlled closing.

Javascript needed for user interaction is not globalized.

// Available Sass Variables for style customization
$banner-background-color
$banner-text-color
$banner-border

DIALOGS

No extra JS required.

Load content from hidden DIV.
This is content that was hidden on the page and is now showing in the dialog. The (required) attributes on the anchor you just clicked are:
  • data-el="#content"
  • data-title="Hidden Content"
  • data-name="customname"
  • href="#"
  • class="dialog"
<a href='#' class='dialog btn btn-primary' data-el='#content' data-title='Hidden Content' data-name='customname'>Load content from hidden DIV.</a><div id='content' class='hide'>This is content that was hidden...</div>
Load content from fragment page.

/eprice-form.htm used for fragment page testing. If it doesn't work make sure it's in the sitemap of the site you are loading.

<a href="#" class="dialog btn btn-primary" data-width="500" data-title="Eprice Form" data-href="/eprice-form.htm">Load content from fragment page.</a>

POPOVERS

By default popovers work on hover for desktop and click on mobile.

On mobile you will get a slidein.

Pop on over for a demonstration.
<span class='btn btn-primary' data-toggle='popover' data-placement='bottom' data-title='Helpful information on popovers' data-content='This is content set in the...'>Pop on over for a demonstration.</span>
AdChoices
; ;