Connect 2015 Student Design Style Pattern Guide

With Twitter Bootstrap

Connect 2015 Student



Connect Style

Colors and Buttons


primary: #2b80d5
hover: #22609f
active: #22609f
focus: #22609f
accent: #e11f26
hover: #c11a21
active:
focus:
info: #6ba53a
hover: #598930
active:
focus:
alert: #2b80d5
hover: #e9c901
active:
focus:
orange: #e11f26
hover: #e8a82c
active:
focus:
gray: #595959
hover: #333333
active:
focus:
disabled: #dedede
hover:



Body copy


Connect Student's global default font-size is 16px, with a line-height of 1.428. This is applied to the <body> and all paragraphs.

<p>...</p>



Nav Title Bar



Example: Used in Class pages

PRINCIPLES OF ECONOMICS - SPRING 2015 MWF

Example: Used in Voice

spanish 101

Nav Title Bar takes the entire width of the window from side bar. Course name is floated to right. 40px padding from right.

Example:

Responsive image

Responsive image

Code:

HTML
<div class="row">
        <div class="col-md-12 c15-student-navbar div-space-4">
          <div>PRINCIPLES OF ECONOMICS - SPRING 2015 MWF</div> 
        </div>
      </div>
      
CSS
.c15-student-navbar {
        letter-spacing: .1em;
        text-transform: uppercase;
        display: inline-block;
        text-align: right;
        background-color: #fbfafc;
        border-bottom: 1px solid #ebe8ef;
        padding: 10px 40px;
      }



Profile Thumb


Thumb and Text has two types. One is where an image of person and their name appears on the right side and another is an image of textbook and name of the textbook on the right. There is times more description is listed under the image and name. They appear in multiple different places such as C15 course pages, Student registration welcme page, and whenever textbook images are introduced. Link color will always be green #6ba53a.

Larry Long

My email address is navaneetha.mkrishnan@gmail.com

John Smith

My office hours is by appointment.

Example: Studnet registration welcome page

Responsive image

Example: C15 Class pages

Responsive image

Voice Tool Header


Example: EasyTest

Responsive image