Legacy

We have five colors to dazzle your razzle and a smattering of grayscale to brighten up your life.

Palette

Each color has its own typical uses, and by having a predefined palate, we ensure a consistent feel across the site.

Each color comes with a lighter version for hover. It can be accessed as @color-hover.

@brand-primary: #aed104

@gray-lightest: #e8e8e8

@gray-lighter: #d1d1d1

@gray-light: #818387

@gray: #6a6a6a

@gray-dark: #2b2d2f

Styles

            
// Colors
@brand-primary:         #aed104;
@brand-secondary:       #1A70D9;
@brand-warning:         #e02a00;
@brand-info:            #5bc0de;

@brand-info-secondary:  #64cdff;

@gray-lightest:         #e8e8e8;
@gray-lighter:          #d1d1d1;
@gray-light:            #818387;
@gray:                  #6a6a6a;
@gray-dark:             #2b2d2f;

@white:                 #fff;
@almost-white:          #f5f5f5;
@black:                 #000;
@almost-black:          #111;

@brand-primary-hover:   lighten(@brand-primary, 1%);
@brand-secondary-hover: lighten(@brand-secondary, 5%);
@brand-warning-hover:   lighten(@brand-warning, 5%);
@brand-info-hover:      lighten(@brand-info, 5%);

@photography-color-dark: #193B4C;
@photography-color-light: #1e4c60;
@photography-color-lighter: #2f667f;

@design-color-dark: #DD578D;
@design-color-light: #c32f68;
@design-color-lighter: #db4b82;

@audio-color-dark: #DF7915;
@audio-color-light: #df7915;
@audio-color-lighter: #ea9037;

@maker-color-dark: #3DC2C1;
@maker-color-light: #1f9b97;
@maker-color-lighter: #3dc2c1;

@business-color-dark: #619020;
@business-color-light: #619020;
@business-color-lighter: #8fba3c;

@other-color-dark: #4a4d5b;
@other-color-light: #73757d;
@other-color-lighter: #6a6a6a;

With two font faces, we can stir the soul of even the most thick-skinned visitor.

Variations

We have predefined classes that can be mixed and matched to produce the desired text appearance.

Font Face

There are two font faces to choose from.

Less Variable Name	CSS Class Name	Font Face
@font-family-primary	.font-family-primary	Helvetica

Less Variable Name	CSS Class Name	Size
@font-size-xxl	.font-size-xxl	40px
@font-size-xl	.font-size-xl	24px
@font-size-l	.font-size-l	18px
@font-size-m	.font-size-m	14px
@font-size-s	.font-size-s	12px
@font-size-xs	.font-size-xs	10px

Font Weight

There are three weights to choose from.

Less Variable Name	CSS Class Name	Weight
@font-weight-heavy	.font-weight-heavy	700
@font-weight-regular	.font-weight-regular	400
@font-weight-light	.font-weight-light	300

Styles

            
// Typography

@font-family-primary: "Helvetica Neue", Helvetica, Arial, 'Lucida Grande', sans-serif;

@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;

.font-family-primary {
  font-family: @font-family-primary;
}

.font-size-xxl {
  font-size: @font-size-xxl;
}

.font-size-xl {
  font-size: @font-size-xl;
}

.font-size-l {
  font-size: @font-size-l;
}

.font-size-m {
  font-size: @font-size-m;
}

.font-size-s {
  font-size: @font-size-s;
}

.font-size-xs {
  font-size: @font-size-xs;
}

.font-weight-heavy {
  font-weight: 700;
}

.font-weight-regular {
  font-weight: 400;
}

.font-weight-light {
  font-weight: 300;
}

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

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

.brand-info-secondary {
  color: @brand-info-secondary;
}

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

.gray-lightest {
  color: @gray-lightest;
}

.gray-lighter {
  color: @gray-lighter;
}

.gray-light {
  color: @gray-light;
}

.gray {
  color: @gray;
}

.gray-dark {
  color: @gray-dark;
}

.black {
  color: @black;
}

.white {
  color: @white;
}

.line-through {
  text-decoration: line-through;
}

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

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
.pad-s {
  padding: 5px;
}
.margin-s {
  margin: 5px;
}
.pad-top-s {
  padding-top: 5px;
}
.margin-top-s {
  margin-top: 5px;
}
.pad-right-s {
  padding-right: 5px;
}
.margin-right-s {
  margin-right: 5px;
}
.pad-bottom-s {
  padding-bottom: 5px;
}
.margin-bottom-s {
  margin-bottom: 5px;
}
.pad-left-s {
  padding-left: 5px;
}
.margin-left-s {
  margin-left: 5px;
}
.pad-m {
  padding: 10px;
}
.margin-m {
  margin: 10px;
}
.pad-top-m {
  padding-top: 10px;
}
.margin-top-m {
  margin-top: 10px;
}
.pad-right-m {
  padding-right: 10px;
}
.margin-right-m {
  margin-right: 10px;
}
.pad-bottom-m {
  padding-bottom: 10px;
}
.margin-bottom-m {
  margin-bottom: 10px;
}
.pad-left-m {
  padding-left: 10px;
}
.margin-left-m {
  margin-left: 10px;
}
.pad-l {
  padding: 15px;
}
.margin-l {
  margin: 15px;
}
.pad-top-l {
  padding-top: 15px;
}
.margin-top-l {
  margin-top: 15px;
}
.pad-right-l {
  padding-right: 15px;
}
.margin-right-l {
  margin-right: 15px;
}
.pad-bottom-l {
  padding-bottom: 15px;
}
.margin-bottom-l {
  margin-bottom: 15px;
}
.pad-left-l {
  padding-left: 15px;
}
.margin-left-l {
  margin-left: 15px;
}
.pad-xl {
  padding: 30px;
}
.margin-xl {
  margin: 30px;
}
.pad-top-xl {
  padding-top: 30px;
}
.margin-top-xl {
  margin-top: 30px;
}
.pad-right-xl {
  padding-right: 30px;
}
.margin-right-xl {
  margin-right: 30px;
}
.pad-bottom-xl {
  padding-bottom: 30px;
}
.margin-bottom-xl {
  margin-bottom: 30px;
}
.pad-left-xl {
  padding-left: 30px;
}
.margin-left-xl {
  margin-left: 30px;
}
.pad-none {
  padding: 0px;
}
.margin-none {
  margin: 0px;
}
.pad-top-none {
  padding-top: 0px;
}
.margin-top-none {
  margin-top: 0px;
}
.pad-right-none {
  padding-right: 0px;
}
.margin-right-none {
  margin-right: 0px;
}
.pad-bottom-none {
  padding-bottom: 0px;
}
.margin-bottom-none {
  margin-bottom: 0px;
}
.pad-left-none {
  padding-left: 0px;
}
.margin-left-none {
  margin-left: 0px;
}

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

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

// 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}
  }

*/

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

Font Awesome

By relying on Font Awesome, we have a rich set of icons which scale well to any screen size, are easily loaded on the page, and increase page time. For the complete set of icons, see the Font Awesome Icon Library. We have predefined sizes for these icons.

Default Icon Sizes

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

Icon Rotation Options

Constructions

It is easy to include these icons into buttons.

Using icons with buttons

Styles

            
// Icons

// The icons styles come from Font Awesome and have not necessitated additional code

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

Examples

There are three button types regularly used. These buttons are sized according to the text inside of them.

Example buttons

Sizes

We have two options for button sizes: the buttons above which are sized according to the text inside of them, and, a button which fills its parent element.

A button which fills its parent element

Additionally, we have esay control over the padding in buttons.

Buttons with padding variations

Styles

            
// Buttons
.btn {

  font-family: @font-family-primary;
  font-weight: @font-weight-medium;

  border: none;
  // Buttons Options
  &.btn-cta {
    background-color: @brand-info;
    #gradient .vertical(@brand-info-secondary,  @brand-info, 0%, 100%);
    color: @white;
  }

  &.btn-primary {
    font-size: @font-size-l;
    width: 110px;
    height: 40px;
    text-align: center;
    margin: 2px 0 0 10px;
    background: @brand-primary;
    box-shadow: 0 1px 10px rgba(0,0,0,0.2);
    color: @white;
    font-weight: @font-weight-light;
    font-family: @font-family-primary;
    line-height: 30px;
    &:extend(.pad-s);

    &:hover {
      background-color: @brand-primary-hover;
    }
  }

  &.btn-white {
    background-color: @white;
    font-family: @font-family-primary;
    color: @brand-primary;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px;
    white-space: normal;
    border-radius: 3px;
    padding: 3px 10px;

    &:hover {
      color: @brand-primary !important;
    }
  }

  &.btn-green {
    background-color: @brand-primary;
    color: @white;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px;
    white-space: normal;
    border-radius: 3px;
    padding: 3px 10px;

    &:hover {
      color: @white !important;
    }
  }

  &.btn-gray {
    background-color: @gray-lighter;
    color: @gray;
    white-space: normal;
    border-radius: 3px;
    padding: 6px 10px;

    &:hover {
      color: @almost-black !important;
    }
  }

  &.btn-rebroadcast {
    #gradient .vertical(@gray-light, @gray-dark, 0%, 100%);
    color: @white;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px;
    white-space: normal;
    border-radius: 3px;
    border: 2px solid @brand-primary;
  }

  &.btn-large {
    padding: 20px 16px;
    font-size: @font-size-m;
    white-space: normal;
    border-radius: 3px;
  }

  &.btn-disabled {
    cursor: default;
    background-color: #B0B0B0;
    color: white;
  }

  &.btn-old {
    border-radius: 0;
    background-color: @gray-dark;
    color: @white;
    font-size: @font-size-xs;
    font-family: @font-family-primary;
    &:hover,
    &:active,
    &.active, {
      background-color: @brand-primary;
      color: @black;
    }
  }

  // Special Buttons
  &.btn-facebook-login {
    font-family: @font-family-primary;
    .border-top-radius(5px);
    .border-bottom-radius(5px);
    display: block;
    background-color: #4c69b9;
    color: white;
    padding: 5px 5px 5px 15px;
    font-size: 18px;
    margin-bottom: 20px;
    div {
      font-weight: 300;
    }
    .icon-facebook-sign {
      font-size: @font-size-xl;
      margin-top: 0;
    }
  }

  // Button Psudeo
  &:hover {
    background-image: none;
  };

  &:active {
    background-image: none;
    .box-shadow(none);
  };
}

@btn-primary-bg: @brand-info;
@btn-default-bg: @gray;
@btn-success-bg: @brand-primary;

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 {
  height: auto;
  max-width: 100%;
}

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.

            
// Links

@link-color: darken(@brand-info, 20%);
@link-hover-color: @brand-info-hover;

a {
  
  cursor: pointer;
  
  &:hover {
    text-decoration: none;
    color: @link-hover-color;
  }
}

Legacy

Colors

Palette

Styles

Typography

Variations

Font Face

Font Size

Font Weight

Styles

Layout

The Grid

Basic Responsive Example

Conference Page Example

Layout Helpers

Styles

Icons

Font Awesome

Constructions

Styles

Buttons

Examples

Sizes

Styles

Images

File Format

File Size

Links