Components
Live Ribbon
We use a live ribbon on course objects to indicate that the class is currently live.
Example
HTML
<span class='live-now-ribbon'></span>
We override Bootstrap's alerts. Well, so far only alert-info
HTML
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
This is an info alert
</div>
We override Bootstrap's modal dialog styles and add a few of our own
HTML
<div class="modal" ...>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Modal Header</h4>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer modal-divider">
<button type="button" class="btn btn-primary">Primary button</button>
</div>
</div>
</div>
</div>
H[1-6]
.modal-title
Adds padding above the title
Modal class options
modal-thin
toggles a width of 460px (like the login dialog)
bg-accent
... <div class="modal-body bg-accent">Modal Body</div> ...
modal-divider
... <div class="bg-accent modal-divider">Modal Body Section</div> ...
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Modal Header</h4>
</div>
<div class="modal-body">
<div class="modal-block">
body start
</div>
<div class="bg-accent">
first accented div
</div>
<div class="bg-accent">
second (sibling accented div)
</div>
<div class="bg-accent">
third (sibling accented div)
<div class="bg-accent modal-block">
fourth (nested accented div)
</div>
</div>
</div>
</div>
</div>
</div>
Uploader Dialog
<div class="modal cl-new">
<div class="modal-dialog">
<form class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Upload Image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="modal-upload margin-bottom-l" style="height: 225px;">
<i class="cl-icon-font cl-icon-cloud"></i>
<p>Upload</p>
<div class="form-group">
<label><span class="sr-only">Add File</span>
<input name="image_file" class="hidden" type="file">
</label>
</div>
</div>
</div>
</div>
<button class="btn btn-default btn-block"><i class="cl-icon-font cl-icon-cloud"></i> Change photo</button>
</div>
<div class="modal-footer bg-accent">
<button class="btn btn-primary btn-block">Save</button>
</div>
</form>
</div>
</div>
The .modal-upload contents will fill the div, so the style="height: 225px;" is added to make it square. You can set it to any width and height.
I've used form tags for the .modal-content so that the button type="submit" in the .modal-footer submits the form. This is just for the example and you should handle forms however you see fit.
* buttons will be globally updated separately with min/max-widths, etc.
Play Icon
Catalog Tile
We use the catalog tile to display a course which has already aired.
Example
HTML
<div class="course-tile-wrapper col-sm-4">
<div class="course-tile past">
<a href="{course_url}">
<img src="{image_url}" title="{course_name}">
<div class="course-tile-info">
<div class="course-tile-title">
{course_name}
</div>
<div class="course-tile-instructors">
with
<span>
{instructor}
</span>
</div>
</div>
</a>
</div>
</div>
Mini Tile
We use the mini tile to display a course which has already aired.
Example
HTML
<div class="mini-tile-inner">
<a href="{course_url}">
<div class="mini-tile-thumbnail">
<img class="rounded" src="{image_url}" title="{course_title}">
</div>
<div class="mini-tile-description">
<div class="mini-tile-title">{course_title}</div>
<div class="mini-tile-instructors list-unstyled">
with
<span>
{instructor}
</span>
</div>
</div>
</a>
</div>