IMathAS Design Pattern Reference

Theme to use: Fixed Width

Colors and sizes

Headers

H1 header

H2 header

H1 header in div.pagetitle

H2 header in div.pagetitle

H3 header

H4 header

H5 header
Basic link with href
Basic link without href
Basic markup

Regular text, In b tag, in strong tag, in i tag, in u tag,

.info

blah blah blah

.noticetext

blah blah blah

.red

blah blah blah

.newnote

blah blah blah

.grey

blah blah blah

label.error
Small text: .small
Small text
.itemgrey (opacity 50%)

blah blah blah

span.boxed

blah boxed blah

.greystrike

blah blah blah

a.attach
a target=_blank
.videoembedbtn
[+]
.delx
X

Common Layout

div.block followed by div.blockitems
div.block

div.blockitems

sub div.block
sub div.blockitems
div.block.grouptoggle followed by div.blockitems
div.block.grouptoggle
div.blockitems
Course page item
Title
span.instrdates

Text in the div.itemsum

Breadcrumb
Control Link Box: div.cp
Blah blah blah
Control Link Box: div.cpmid
Blah blah blah
View control buttons
Form layout
span.form span.formright
span.form again span.wideformright
span.form
div.submit
Columns in a link bar; span.column
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Main course page payout

Left bar content

Left bar content

Center content

Center content


Home page payout

Left column content

Left column content

Right column content

Right column content


My Classes dropdown
Hover to show (aligns right by default)
Dropdown content
Floats: .floatleft or .floatright. .clear clears
.floatright Other content
text-align: center
div.center
Calendar item
span.calitem
Tabs

Tab content 1

Tool tips
Hover for tip
Indents
div.ind1
div.ind2
div.ind3
div.ind4

Display

div.hidden
.showinmobile
This will only show in mobile / small windows
.hideinmobile
This will be hidden in mobile / small windows
img.mida: vertical-align: middle
And some text
img.faded
white-space: nowrap
This content has class .nowrap set

Form Controls

input type=text
input type=radio
input type=checkbox
select
input type=button, button, a.abutton
a.button
button.secondarybtn
input type=button disabled

Lists

Default ul
  • List item 1
  • List item 2
    • Nested list item 1
    • Nested list item 2
  • List item 3
Default ol
  1. List item 1
  2. List item 2
    1. Nested list item 1
    2. Nested list item 2
  3. List item 3
ul.nomark
  • List item 1
  • List item 2
    • Nested list item 1
    • Nested list item 2
  • List item 3
ul.qview
  • List item 1
  • List item 2
    • Nested list item 1
    • Nested list item 2
  • List item 3
ul#navlist
ul.courselist

Tables

Default table
Hdr 1Hdr 2
Row hdr 1Cell 1Cell 2
Row hdr 2Cell 3Cell 4
table.gb
Hdr 1Hdr 2
tr.oddCell 1Cell 2
tr.evenCell 3Cell 4
table.gridded
Hdr 1Hdr 2
Row hdr 1Cell 1Cell 2
Row hdr 2Cell 3Cell 4
table.gridded.centered
Hdr 1Hdr 2
Row hdr 1Cell 1Cell 2
Row hdr 2Cell 3Cell 4
cell text-align
Header 1Header 2
td.ctd.r
34

Font Icons

Loaded via iconfonts/imathasfont.css

For Add Questions
.icon-pencil .icon-enlarge2 .icon-shrink2 .icon-plus
For Calendar Editing
.icon-enddate .icon-startdate .icon-startdatealt .icon-eye2 .icon-assessreview .icon-forumreply .icon-forumpost
For TinyMCE
.icon-graph .icon-sigma .icon-sigma2 .icon-attachment
Others
.icon-cog2 .icon-gear .icon-repeat .icon-rotate-right .icon-flag .icon-flag-o .icon-cc .icon-copy .icon-drawer .icon-enlarge .icon-shrink .icon-equalizer .icon-equalizer2 .icon-cogs .icon-bin .icon-tree .icon-minus .icon-cancel-circle .icon-cross2 .icon-insert-template .icon-embed .icon-libreoffice .icon-home3 .icon-film .icon-clock .icon-calendar .icon-menu .icon-menu3 .icon-menu4 .icon-eye .icon-eye-blocked .icon-star-empty .icon-star-full .icon-cross .icon-checkmark .icon-checkmark2 .icon-play3 .icon-pause2 .icon-stop2 .icon-backward2 .icon-forward3 .icon-first .icon-last .icon-previous2 .icon-next2 .icon-arrow-up2 .icon-arrow-right2 .icon-arrow-down2 .icon-arrow-left2 .icon-new-tab

Images

Some images in the /img/ directory

General Icons
1day.png cal.gif expand.gif collapse.gif extlink.png flagempty.gif flagfilled.gif gears.png gearsdd.png help.gif menu.png
Course Item Type Icons
assess.png doc.png drill.png folder.png folder_tree.png forum.png html.png image.png inline.png maple.png mathnb.png pdf.png ppt.png sound.png video.png web.png wiki.png xls.png zip.png
Small Course Item Type Icons
assess_tiny.png assess_tiny_no.png doc_tiny.png drill_tiny.png folder_tiny.png folder_tree_tiny.png forum_tiny.png html_tiny.png html_tiny_no.png inline_tiny.png video_tiny.png video_tiny_no.png wiki_tiny.png
Assessment/Question Progress Icons
fullcircle.png halfcircle.png emptycircle.png gchk.gif ychk.gif orgx.gif redx.gif q_emptybox.gif q_fullbox.gif q_halfbox.gif te_blue_arrow.png te_blue_empty_arrow.png te_green_check.png te_red_ex.png te_red_redo.png te_yellow_check.png te_yellow_redo.png
Misc Icons
liked.png likedgray.png cc.png lock.png noview.png swap.gif time.png tinyarrow.gif updating.gif