# 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
blah blah blah
Basic link without href
blah blah blah
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
blah blah blah
Small text: .small
Small text
.itemgrey (opacity 50%)

blah blah blah

span.boxed

blah boxed blah

.greystrike

blah blah blah

a.attach
blah blah blah
a target=_blank
blah blah blah
.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
Instructor Student Quick Rearrange
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 1
- Tab 2

Tab content 1

Tab content 2

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

- List item 1
- List item 2
  - Nested list item 1
  - Nested list item 2
- List item 3

# 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 .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