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.blockitems
Course page item
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
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
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)
Floats: .floatleft or .floatright. .clear clears
.floatright
Other content
text-align: center
div.center
Calendar item
span.calitem
Tabs
Tool tips
Hover for tip
Indents
div.ind1
div.ind2
div.ind3
div.ind4
Display
div.hidden
this won't show
.showinmobile
This will only show in mobile / small windows
.hideinmobile
This will be hidden in mobile / small windows
img.mida: vertical-align: middle

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
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
- List item 1
- List item 2
- Nested list item 1
- Nested list item 2
- 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 1 | Hdr 2 | |
---|---|---|
Row hdr 1 | Cell 1 | Cell 2 |
Row hdr 2 | Cell 3 | Cell 4 |
table.gb
Hdr 1 | Hdr 2 | |
---|---|---|
tr.odd | Cell 1 | Cell 2 |
tr.even | Cell 3 | Cell 4 |
table.gridded
Hdr 1 | Hdr 2 | |
---|---|---|
Row hdr 1 | Cell 1 | Cell 2 |
Row hdr 2 | Cell 3 | Cell 4 |
table.gridded.centered
Hdr 1 | Hdr 2 | |
---|---|---|
Row hdr 1 | Cell 1 | Cell 2 |
Row hdr 2 | Cell 3 | Cell 4 |
cell text-align
Header 1 | Header 2 |
---|---|
td.c | td.r |
3 | 4 |
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
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-libreoffice
.icon-home3
.icon-film
.icon-clock
.icon-calendar
.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











Course Item Type Icons



















Small Course Item Type Icons













Assessment/Question Progress Icons

















Misc Icons








