cdev main css samples

INDEX

Fonts Avant Garde

Font Family

Regular:
.cdev-font-avantgarde

Condensed:
.cdev-font-avantgarde-cond


Font Weight

font-weight: 100;
font-weight: 400;
font-weight: 500;
font-weight: 700;
Note: Strong, bold, or font-weight: bold; should not be used.
Note: letter-spacing .75px should be used for 13px and under.
Note: letter-spacing .5px should be used for 14px.

Font Style

font-style: normal;
font-style: italic;

Text Transform Lowercase

1080 v5

13px / letter-spacing: 0.75px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec laoreet risus. In hac habitasse platea dictumst. Aenean rhoncus congue felis eget tincidunt. Sed lacus ligula, suscipit ut molestie nec, maximus id nibh. Curabitur pulvinar augue erat, quis facilisis tellus tempus at. In tempor nibh sapien. In hac habitasse platea dictumst. Duis elementum neque ut sapien malesuada, a sagittis risus luctus. Mauris tincidunt sed augue a imperdiet.

14px / letter-spacing: 0.5px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec laoreet risus. In hac habitasse platea dictumst. Aenean rhoncus congue felis eget tincidunt. Sed lacus ligula, suscipit ut molestie nec, maximus id nibh. Curabitur pulvinar augue erat, quis facilisis tellus tempus at. In tempor nibh sapien. In hac habitasse platea dictumst. Duis elementum neque ut sapien malesuada, a sagittis risus luctus. Mauris tincidunt sed augue a imperdiet.

15px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec laoreet risus. In hac habitasse platea dictumst. Aenean rhoncus congue felis eget tincidunt. Sed lacus ligula, suscipit ut molestie nec, maximus id nibh. Curabitur pulvinar augue erat, quis facilisis tellus tempus at. In tempor nibh sapien. In hac habitasse platea dictumst. Duis elementum neque ut sapien malesuada, a sagittis risus luctus. Mauris tincidunt sed augue a imperdiet.

16px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec laoreet risus. In hac habitasse platea dictumst. Aenean rhoncus congue felis eget tincidunt. Sed lacus ligula, suscipit ut molestie nec, maximus id nibh. Curabitur pulvinar augue erat, quis facilisis tellus tempus at. In tempor nibh sapien. In hac habitasse platea dictumst. Duis elementum neque ut sapien malesuada, a sagittis risus luctus. Mauris tincidunt sed augue a imperdiet.

NB Beta Font

Using the font:

Use the .nb-beta-font class to apply the font. The characters default to the right leaning alternates.

<span class="nb-beta-font">New Balance</span>
New Balance

Add the .alt class to use the left leaning alternates.

<span class="nb-beta-font alt">New Balance</span>
New Balance

The .alt class can be used within a word to only use the left leaning alternates on some letters.

<span class="nb-beta-font">New Bal<span class="alt">a</span>nce</span>
New Balance

Characters can be reset to the normal font buy use the .reg class.

<span class="nb-beta-font">New Bal<span class="reg">a</span>nce</span>
New Balance


Spacing issues:

Adding spans in the middle of words can add spacing issue.

<span class="nb-beta-font">al<span class="alt">wa</span>ys</span>
always

Spacing issues can be addressed by avoiding placing spans next to special characters.

<span class="nb-beta-font">a<span class="alt">lways</span></span>
always

Any spacing issues that can't be resolved by moving the span tag can be fixed using the .alt-r and .alt-l classes. They remove extra space on the right and left respectively.

<span class="nb-beta-font">al<span class="alt-l">wa</span>ys</span>
always

<span class="nb-beta-font">al<span class="alt-r">wa</span>ys</span>
always

<span class="nb-beta-font">al<span class="alt-r alt-l">wa</span>ys</span>
always


Notes:

The NB Beta font does not work in any version of Internet Explorer. It will default to the Avant Garde 700 weight. It does work in Microsoft Edge.

Retina/High Rez Classes

Low Rez
High Rez


These classes are available to hide and show content for retina devices.

  • .cdev-hide-for-retina
  • .cdev-show-for-retina (this will only show on retina/high rez devices)

Vertical Centering

Using display: table (preferred)

using display: table

Markup Sample

<div class="cdev-vert-center-outer"> <div class="cdev-vert-center-inner"> using display: table </div> </div>

Notes

  • The outer div should have the class .cdev-vert-center-outer
  • The inner div should have the class .cdev-vert-center-inner

With absolute positioning

using position: absolute


Markup Sample

<div style="position: relative;"> <div class="cdev-vert-center-abs" style="height: 30px;"> using position: absolute </div> </div>

Notes

  • Wrap the content you want vertically centered in .cdev-vert-center-abs
  • The .cdev-vert-center-abs will also need a height.
  • The parent div must contain position-relative;

Clearing

Using normal clearing div

Floated div
Floated div


Markup Sample

<div> <div> Floated div </div> <div> Floated div </div> <div class="cdev-clear"></div> </div>

Notes

.cdev-clear is used for the clearing div

Using Micro Clear Fix

Floated div
Floated div


Markup Sample

<div class="cdev-cf"> <div> Floated div </div> <div> Floated div </div> </div>

Notes

.cdev-cf is applied to the outer div (no clearing div needed)

Read More

Shadows

Top and Bottom
Top
Bottom


Markup Sample

<div class="cdev-top-shadow cdev-bottom-shadow"> Top and Bottom </div>

Notes

use the .cdev-top-shadow and .cdev-bottom-shadow classes

Text Shadows

Shadow Light

Shadow Medium

Shadow Heavy

Shadow Light

Shadow Medium

Shadow Heavy



Markup Sample

Black Shadow

<div class="cdev-text-shadow-light"> Light Black Text Shadow </div> <div class="cdev-text-shadow-medium"> Medium Black Text Shadow </div> <div class="cdev-text-shadow-heavy"> Heavy Black Text Shadow </div>

White Shadow

<div class="cdev-text-shadow-white-light"> Light Black Text Shadow </div> <div class="cdev-text-shadow-white-medium"> Medium Black Text Shadow </div> <div class="cdev-text-shadow-white-heavy"> Heavy Black Text Shadow </div>

Unordered Lists

Unordered lists are overridden if this class is not added.


Example:

  • List Item 1
  • List Item 2
  • List Item 3

Markup Sample

<ul class="cdev-unordered-list"> <li> </li> <li> </li> <li> </li> </ul>

New Tags

<span class="cdev-new-tag-right">NEW</span>
NEW
<span class="cdev-new-tag-left">NEW</span>
NEW
<span class="cdev-new-tag-center">NEW</span>
NEW
<span class="cdev-new-tag-center">NEW <span>Colors</span></span>
NEW Colors
<span class="cdev-new-tag-left cdev-tag-black">NEW</span>
NEW
<span class="cdev-new-tag-right cdev-tag-black">NEW</span>
NEW
<span class="cdev-new-tag-center cdev-tag-black">NEW</span>
NEW
<span class="cdev-new-tag-center cdev-tag-black">NEW <span>Colors</span></span>
NEW Colors