Styleguide
  • Legacy
  • CSS
  • Components
  • Javascript
  • Animations

CSS

Colors

Hover states for each color can be accessed as @color-hover.

Body Text

@black #000000
@white #ffffff
@brand-highlight #0099ff

Vertical Colors

P R I M A R Y

@photo-color #193b4c
@design-color #b11b56
@audio-color #df7915
@craft-color #1f9b97
@business-color #619020
@other-color #4a4d5b

S E C O N D A R Y

@photo-color2 #387189
@design-color2 #dd578d
@audio-color2 #ea9037
@craft-color2 #3dc2c1
@business-color2 #8fba3c
@other-color2 #73757d

Grays

@gray0 #333333
@gray1 #4e4e4e
@gray2 #666666
@gray3 #a4a4a4
@gray4 #c1c1c1
@gray5 #d9d9d9
@gray6 #e6e6e6
@gray7 #f1f1f1

Styles

            
// Colors
@brand-highlight: #0099FF;
@brand-affirmative: #159867;

@brand-highlight-hover:   lighten(@brand-highlight, 10%);
@brand-affirmative-hover:   lighten(@brand-affirmative, 10%);

@gray0: #333333;
@gray1: #4E4E4E;
@gray2: #666666;
@gray3: #A4A4A4;
@gray4: #C1C1C1;
@gray5: #D9D9D9;
@gray6: #E6E6E6;
@gray7: #F1F1F1;

@gray0-hover:   lighten(@gray0, 10%);
@gray1-hover:   lighten(@gray1, 10%);
@gray2-hover:   lighten(@gray2, 10%);
@gray3-hover:   lighten(@gray3, 10%);
@gray4-hover:   lighten(@gray4, 10%);
@gray5-hover:   lighten(@gray5, 10%);
@gray6-hover:   lighten(@gray6, 10%);
@gray7-hover:   lighten(@gray7, 10%);

// category specific colors

@photography-color:   #193b4c;
@photo-color:         @photography-color; // Deprecated, use @photography-color
@design-color:        #b11b56;
@audio-color:         #df7915;
@craft-color:         #1f9b97;
@business-color:      #619020;
@other-color:         #4a4d5b;

// category specific colors lighter version
@photo-color2:         #387189;
@design-color2:        #dd578d;
@audio-color2:         #ea9037;
@craft-color2:         #3dc2c1;
@business-color2:      #8fba3c;
@other-color2:         #73757d;

@alert-info-text: #00a0fe;
@alert-info-bg: #e5f2ff;
@alert-info-close: #c0e2ff;

.brand-highlight {
  color: @brand-highlight;
}

.brand-affirmative {
  color: @brand-affirmative;
}

.gray0 {
  color: @gray0;
}
.gray1 {
  color: @gray1;
}
.gray2 {
  color: @gray2;
}
.gray3 {
  color: @gray3;
}
.gray4 {
  color: @gray4;
}
.gray5 {
  color: @gray5;
}
.gray6 {
  color: @gray6;
}
.gray7 {
  color: @gray7;
}


.vertical-bg-photography {
  background-color: @photography-color;
}
.vertical-bg-design {
  background-color: @design-color;
}
.vertical-bg-audio {
  background-color: @audio-color;
}
.vertical-bg-craft {
  background-color: @craft-color;
}
.vertical-bg-business {
  background-color: @business-color;
}

.vertical-bd-photography {
  border-color: @photography-color;
}
.vertical-bd-design {
  border-color: @design-color;
}
.vertical-bd-audio {
  border-color: @audio-color;
}
.vertical-bd-craft {
  border-color: @craft-color;
}
.vertical-bd-business {
  border-color: @business-color;
}

Typography

We use Gotham for body text and Sacramento as a highlight. Sacramento should be used sparingly as a grace note.

Body Text

NameAppearance
h1

Sample text
h2

Sample text
h3

Sample text
h4

Sample text
p

Sample text
.info1
Sample text
.info2
Sample text
.cta
Sample text
.cta2
Sample text
.smalltext
Sample text
.tinytext
Sample text

Styles

            
// Typography
@font-family-brand: 'Gotham SSm A', 'Gotham SSm B', Helvetica;
@font-family-cursive: 'Sacramento', cursive;
@font-family-primary: "Helvetica Neue", Helvetica, Arial, 'Lucida Grande', sans-serif;
@font-family-icon: "cl-font-collection";

@font-size-xxl:           38px;
@font-size-xl:            30px;
@font-size-l:             24px;
@font-size-m:             18px;
@font-size-s:             14px;
@font-size-xs:            12px;

@font-weight-heavy:       700;
@font-weight-medium:      400;
@font-weight-light:       200;

.cl-new {

  font-family: @font-family-brand;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0px;
  color: @black;

  h1 {
    font-family: @font-family-brand;
    font-weight: 300;
    font-style: normal;
    font-size: 35px;
    color: @black;
    letter-spacing: -1px;
    margin-top: 0px;
  }

  h2 {
    font-family: @font-family-brand;
    font-weight: 200;
    font-style: normal;
    font-size: @font-size-xl;
    letter-spacing: 0px;
    text-transform: lowercase;
    margin-top: 0;
    color: @gray3;
  }

  h3 {
    font-family: @font-family-brand;
    font-weight: 300;
    font-style: normal;
    font-size: @font-size-l;
    color: @black;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0px;
  }

  h4 {
    font-family: @font-family-brand;
    font-weight: 500;
    font-style: normal;
    font-size: @font-size-m;
    color: @black;
    letter-spacing: 0px;
  }

  h5 {
    font-family: @font-family-brand;
    font-style: normal;
    color: @black;
    letter-spacing: 0px;
  }

  p {
    font-family: @font-family-brand;
    font-weight: 300;
    font-style: normal;
    font-size: @font-size-s;
    letter-spacing: 0px;
  }

  div {
    font-family: @font-family-brand;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0px;
  }

  .info1 {
    font-family: @font-family-brand;
    font-weight: 300;
    font-style: normal;
    font-size: @font-size-l;
    color: @black;
    letter-spacing: 0px;
    line-height: 28px;
  }

  .info2 {
    font-family: @font-family-brand;
    font-weight: 400;
    font-style: normal;
    font-size: @font-size-m;
    color: @black;
    letter-spacing: 0px;
  }

  .cta {
    font-family: @font-family-brand;
    font-weight: 500;
    font-style: normal;
    font-size: @font-size-m;
    color: white;
    letter-spacing: 1px;
  }

  .cta2 {
    font-family: @font-family-brand;
    font-weight: 500;
    font-style: normal;
    font-size: @font-size-xs;
    color: white;
    letter-spacing: 1px;
  }

  .smalltext {
    font-family: @font-family-brand;
    font-weight: 500;
    font-style: normal;
    font-size: @font-size-xs;
    color: @black;
    letter-spacing: 1px;
  }

  .tinytext {
    font-family: @font-family-brand;
    font-weight: 300;
    font-style: normal;
    font-size: 10px;
    color: @black;
    letter-spacing: 0px;
    line-height: 28px;
  }
}

.cl-dark {
  color: @white;

  h1, h3, h4, h5, .info1, .info2, .smalltext, .tinytext {
    color: @white;
  }
}

.text-uppercase {
  text-transform: uppercase;
}

// Import Gotham Font
@import url(//cloud.typography.com/7354872/708964/css/fonts.css);

// Import Sacramento Font.
@import url(//fonts.googleapis.com/css?family=Sacramento);

Layout

Consistent spacing gives us lines cleaner than a Lambo.

The Grid

Spacing of page elements is based primarily upon Bootstrap's grid system. For a thorough description, view the Bootstrap Grid Style Guide.

Basic Responsive Example

This example shows a grid adapted for mobile, tablet, and desktop. As you resize your window you will see the columns shift. Additionally, note that the borders of the box extend past the rule of the style guide heading. This is intentional, as cell's within the grid have their content correctly aligned with that rule.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-sm-6 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4

Conference Page Example

For another example, lets look at a design of the conference page. The columns bump right next to eachother. The columns themselves have 15px padding, which means the empty space between the content will be 30px.

.col-sm-8 This is where the title text and instructor list would go
.col-sm-4 This is where the date information would go
.col-sm-8 This is where the image, social icons, instructor grid, and course detail text would go.
.col-sm-4 This is where the CTA would go.

Layout Helpers

We've got some predefined CSS classes which provide options for moving things around.

Styles

            
// Layout

// Margin center
.margin-0-auto {
  margin: 0 auto;
}

// Position helpers
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.list-unstyled {
  ul {
    list-style: none;
  }
}



// Container should always max at 1005px, instead of bootstrap default.
@media (min-width: @screen-tablet) {
  .container {
    max-width: 1005px;
  }
}


/*

  The following code is used to generate the CSS classes you see
  above.  Due to a bug in Less which prevents generated classes
  from being extended, we must first generate the CSS and then
  paste that into our Less file.

  .layout(5px, s);
  .layout(10px, m);
  .layout(15px, l);
  .layout(30px, xl);
  .layout(0px, none);

  .layout(@n, @size) {
    .pad-@{size} {padding: @n}
    .margin-@{size} {margin: @n}
    .sidesLoop(1, @n);
  }

  .sidesLoop(@i, @n) when (@i =< 4) {
    .side(@i);
    .sidesLoop(@i + 1, @n);
  }

  .side(@i) when (@i = 1) {
    .pad-top-@{size} {padding-top: @n}
    .margin-top-@{size} {margin-top: @n}
  }

  .side(@i) when (@i = 2) {
    .pad-right-@{size} {padding-right: @n}
    .margin-right-@{size} {margin-right: @n}
  }

  .side(@i) when (@i = 3) {
    .pad-bottom-@{size} {padding-bottom: @n}
    .margin-bottom-@{size} {margin-bottom: @n}
  }

  .side(@i) when (@i = 4) {
    .pad-left-@{size} {padding-left: @n}
    .margin-left-@{size} {margin-left: @n}
  }

*/

.auto-grid(@class, @columns, @gutter) when (@columns > 1) {
  .@{class}:first-child:nth-last-child(@{columns}),
  .@{class}:first-child:nth-last-child(@{columns}) ~ .@{class} {
    width: 100% / @columns - @gutter;
  }

  .auto-grid(@class, @columns - 1, @gutter);
}

.auto-grid(@class, @columns, @gutter) when (@columns = 1) {
  .@{class}:first-child:nth-last-child(1) {
    width: 100% - @gutter;
  }
}

Icons

Use symbols, not language, to communicate (unlike this sentence).

CreativeLive Iconography

In order to relay our brand feel we've created an icon set thats unique to CreativeLive. In order to properly include these icons into your page add the css class .cl-icon-font along with the specific icon class you wish to include.

HTML Example

<i class='cl-icon-font cl-icon-photography'></i>

Download

If you'd like to download and install the font on your computer click here . Open this font file and click install. You'll be able to access the letters in 'creativelive' by typing C or c.

Unicode Values

Check out the unicode values for the icons here (requires repo access).

CreativeLive Iconography
cl-icon-photography
cl-icon-design
cl-icon-craft
cl-icon-audio
cl-icon-business
cl-icon-calendar-add
cl-icon-calendar-date
cl-icon-calendar-plus
cl-icon-five-tabs
cl-icon-clock
cl-icon-education
cl-icon-block-quotes-start
cl-icon-block-quotes-end
cl-icon-outline-quotes-start
cl-icon-outline-quotes-end
cl-icon-block-a
cl-icon-block-c
cl-icon-block-e
cl-icon-block-i
cl-icon-block-l
cl-icon-block-r
cl-icon-block-t
cl-icon-block-v
cl-icon-outline-a
cl-icon-outline-c
cl-icon-outline-e
cl-icon-outline-i
cl-icon-outline-l
cl-icon-outline-r
cl-icon-outline-t
cl-icon-outline-v
cl-icon-cloud
cl-icon-block-logo-vertical
cl-icon-outline-logo-vertical
cl-icon-grid
cl-icon-arrow-left
cl-icon-arrow-right
cl-icon-block-logo-horizontal

Font Awesome

Supplementally we use Font Awesome to access a rich set of icons that scale well to any screen size, are easily loaded on the page, and decrease page load time. For the complete set of icons, see the Font Awesome Icon Library. We have predefined sizes for these icons.

Default Icon Sizes

Use color classes to color an icon to your liking.

Icon Color Examples

Additionally, it is very easy to rotate and flip each icon.

Icon Rotation Options

Styles

            
// Icon Font: cl-font-collection

.cl-icon-font {
  display: inline-block;
  font-family: "cl-font-collection";
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  font-variant: normal;
  -moz-osx-font-smoothing: grayscale;
}

// Remove user highlighting for icons
i {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none; // IE10+
       -o-user-select: none;
          user-select: none;
}

// Icons
.cl-icon-chat:before {
  content: "\f1ca";
}

.cl-icon-media:before {
  content: "\f1cb";
}

.cl-icon-questions:before {
  content: "\f1cc";
}

.cl-icon-arrows-left:before {
  content: "\f1c6";
}

.cl-icon-arrows-right:before {
  content: "\f1c7";
}

.cl-icon-audio:before {
  content: "\f1a0";
}

.cl-icon-block-a:before {
  content: "\41";
}

.cl-icon-block-c:before {
  content: "\43";
}

.cl-icon-block-e:before {
  content: "\45";
}

.cl-icon-block-i:before {
  content: "\49";
}

.cl-icon-block-l:before {
  content: "\4c";
}

.cl-icon-block-logo-horizontal:before {
  content: "\f1c3";
}

.cl-icon-block-logo-vertical:before {
  content: "\f1c4";
}

.cl-icon-block-quotes-end:before {
  content: "\f1b4";
}

.cl-icon-block-quotes-start:before {
  content: "\f1b5";
}

.cl-icon-block-r:before {
  content: "\52";
}

.cl-icon-block-t:before {
  content: "\54";
}

.cl-icon-block-v:before {
  content: "\56";
}

.cl-icon-business:before {
  content: "\f1b6";
}

.cl-icon-calendar-add:before {
  content: "\f1b7";
}

.cl-icon-calendar-date:before {
  content: "\f1b8";
}

.cl-icon-calendar-plus:before {
  content: "\f1b9";
}

.cl-icon-clock:before {
  content: "\f1ba";
}

.cl-icon-cloud:before {
  content: "\f1c8";
}

.cl-icon-design:before {
  content: "\f1bb";
}

.cl-icon-education:before {
  content: "\f1bc";
}

.cl-icon-five-tabs:before {
  content: "\f1bd";
}

.cl-icon-grid:before {
  content: "\f1c9";
}

.cl-icon-craft:before {
  content: "\f1be";
}

.cl-icon-outline-a:before {
  content: "\61";
}

.cl-icon-outline-c:before {
  content: "\63";
}

.cl-icon-outline-e:before {
  content: "\65";
}

.cl-icon-outline-i:before {
  content: "\69";
}

.cl-icon-outline-l:before {
  content: "\6c";
}

.cl-icon-outline-logo-vertical:before {
  content: "\f1c5";
}

.cl-icon-outline-quotes-end:before {
  content: "\f1bf";
}

.cl-icon-outline-quotes-start:before {
  content: "\f1c0";
}

.cl-icon-outline-r:before {
  content: "\72";
}

.cl-icon-outline-t:before {
  content: "\74";
}

.cl-icon-outline-v:before {
  content: "\76";
}

.cl-icon-photography:before,
.cl-icon-photo:before {
  content: "\f1c1";
}

@font-face {
  font-family: "cl-font-collection";
  src: url("../../font/styles/cl-font-collection6.eot");
  src: url("../../font/styles/cl-font-collection6.eot?#iefix") format("embedded-opentype"),
      url("../../font/styles/cl-font-collection6.woff") format("woff"),
      url("../../font/styles/cl-font-collection6.ttf") format("truetype"),
      url("../../font/styles/cl-font-collection6.svg#cl-font-collection") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "cl-font-collection";
    src: url("../../font/styles/cl-font-collection6.svg#cl-font-collection") format("svg");
  }
}

Buttons

Here a click, there a click, everywhere a click click

Sizes and Colors

Buttons come in all sorts of sizes and colors but all must be prefixed with .btn. Mix and match to create your prefect button.

Example HTML

<button class='btn btn-primary btn-sm'> RSVP for Free Live Class </button>
<a class='btn btn-default btn-xs'> Button Text </a>
Example Button Colors
Example Button Sizes

Facebook

We have a special button to indicate facebook login. It requires a specific html skeleton but all the styles are already built for you.

Example HTML

<a href="#" class="btn btn-facebook-login clearfix">
   <div class="fb-button-icon">
     <i class="fa fa-facebook-square"></i>
   </div>
   <div class="login-text">Login With Facebook</div>
</a>
Example Button Colors
Login with Facebook

Styles

            
// Buttons

.cl-new .btn {
  font-family: @font-family-brand;
  font-weight: @font-weight-medium;
  font-size: 16px;
  border-radius: 0;
  border: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px;
  white-space: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 22px;
  box-shadow: none;

  &.btn-primary {
    background-color: @brand-highlight;

    color: @white;
    &:hover {
      background-color: @brand-highlight-hover;
      color: @white;
    }
  }

  &.btn-default,
  &.btn-dull {
    background-color: @gray3;
    color: @white;

    &:hover {
      background-color: @gray3-hover;
    }
  }

  &.btn-dark {
    background-color: @gray0;
    color: @white;

    &:hover {
      background-color: @gray0-hover;
      color: @white;
    }
  }

  &.btn-short {
    padding: 3px 10px;
    line-height: @font-size-s;
    font-size: @font-size-s;
  }

  &.btn-block {
    width: 100%;
  }

  &.btn-lg {
    padding: 15px;
    line-height: @font-size-l;
    font-size: @font-size-l;
  }

  &.btn-md {
    padding: 10px;
  }

  &.btn-sm {
    padding: 7px;
    line-height: @font-size-s;
    font-size: @font-size-xs;
  }

  &.btn-xs {
    padding: 6px;
    line-height: @font-size-xs;
    font-size: @font-size-xs;
  }

  &.btn-facebook-login {
    height: 45px;
    font-size: 16px;
    padding: 0px;
    white-space: nowrap;

    .login-text {
      margin-left: auto;
      margin-right: auto;
      margin-top: 13px;

      @media screen and (max-width: @screen-xs-max) {
        margin-top: 12px;
        font-size: @font-size-s;
      }
    }

    .fa-facebook-square {
      font-size: 20px;
    }

    .fb-button-icon {
      &:extend(.pull-left, .margin-top-none);
      width: 45px;
      height: 45px;
      line-height: 49px;
      background-color: #4C60A8;
    }
  }
}

Images

Our pictures are worth two thousand words...

File Format

Though its not foolproof, a general rule of thumb is: if an image is a photograph, it should be a jpeg. If an image was created purely on a computer, it should be a png. Using the correct file format can greatly reduce file size, while keeping a high quality image. In nearly every case, you should not need to use a gif.

File Size

The correct file size for an image is: as small as the image can be without being detrimental to user experience. For our largest images, a 1600x900 image should be around 350K. A 950x390 image should be around 90K. A 310x175 image should be around 10K.

Note that this only applies to images which are displayed on the site directly. Images which appear in course material can ignore these guidelines.

            
// Images
img {
  max-width: 100%;
  height: auto;
}

Links

Links are the life of the web, spiders love 'em too

By default we don't have underlines, and we use two colors to distinguish when hovered over. We use a liberal amount of hot pink to spice things up.

            
// Links
a {
  color: @brand-highlight;
}

a.black {
  color: @black;
}

a.anchor, a.anchor:hover {
  color: @black;
  cursor: default;
}

Inputs

The credit card box needs to look shiny.

Examples

HTML 5 supports many different types of form inputs: text, password, email, etc. And so do we.

Example Inputs

HTML

<input class="form-control" type='text' placeholder='Username' />
<input class="form-control" type='password' placeholder='Password' />

Styles

            
              
// Inputs
.form-control {
  border-radius: 0;
}
  • Colors
  • Typography
  • Layout
  • Icons
  • Buttons
  • Images
  • Links
  • Inputs

© CreativeLive 2014