Parti - Style Guide

Available in this guide is all the style definitions for the Parti system:

Colours

#34A5A6
For buttons and interaction points.
#153C6B
For hovered or active buttons and interaction points.
#EF52AC
For currently running processes (move back and forth from this colour).
#D93D2F
For error messages or problems processing.
#EEE
For disabled elements (text is set at #888).

Text styling

Headings

Heading 1

(2.5em, normal weight, top margin 1em, bottom margin 0.25em)

Heading 2

(1.75em, bold weight, top margin 1em, bottom margin 0.25em)

Heading 3

(1em, bold weight)

Status messages

Excellent! Your submission is in.

Ack! The room could not be found.

Paragraph text

Text is 1em in size, line-height 1.35em, and max-width of 33em.

Bacon ipsum dolor amet ground round short loin meatloaf ribeye. Pork chop salami meatball ham, porchetta short loin pancetta tenderloin kevin corned beef. Spare ribs cow sirloin beef bacon, pork loin kevin filet mignon ribeye landjaeger ham pork chop shank cupim. T-bone short ribs landjaeger, salami filet mignon cupim pig.

In-text links

Here is a paragraph with an in text link, and it should look like this on hover.

Division

'hr' is 0.1em thick, color #CCC, 1.5em top/bottom margin, 80% wide.


Tables

Name Submitted? Grade
Julie Thornton Yes 1/1
Francis Leung No 0/1
Hannah Lestrada Yes 0.5/1

Buttons

Function buttons (run on page)

I'm a function! Spinning the wheel

Navigation buttons

I will take you to

Button states

I'm active! I'm unfit

Room toggle

Room is

Icons

To save on load times and avoid linking problems, all icons have been encoded in base64 so that they can load inline.

Shown Hidden

Shown/hidden

Rotate left Rotate right

Rotate right/left

Zoom in Zoom out

Zoom in/out

Not starred Starred

Not starred/starred

Not flagged Flagged

Not flagged/flagged

Rating bar

UI Components

Grade roster/listing sample

Export grades/submissions

Export grades Export submissions Update roster

Name Submitted? Grade
Julie Thornton Yes 1/1
Francis Leung No 0/1
Hannah Lestrada Yes 0.5/1

Navigation cluster sample

The navigation is built using an unordered list with the class of 'links'; which can be made multiple times to help distinguish between collections.

Grading UI sample

An example of the grading UI and what it might look like in action

Mark-up UI sample

An example of the markup UI and what it might look like in action