/style-guide/,

/style-guide/

20150108

page

100

UWHC,UWMF,

https://uconnect.wisc.edu/media/u-connect/generic-images/flair/flr_general.jpg

Style Guide

Style Guide -

Adding some class to U-Connect


General Style Classes

Typography

Main Headings

Heading 1

<h1> .heading

Heading 2

<h2> .sub_heading

Heading 3

<h3> .small_heading

Text transformations

Uppercase .txt_upper
Small Text <small> .txt_small
Serif Font .txt_serif
Small Grey (label-like) <label> .label

Spacing

Padding and Margins

To override padding on elements, you can use the following class syntax:
 .[type]_[direction]_[amount] or .[type]_[negative/none]_[direction]

Padding General .pad
Directions (top, bottom, right, left) .pad_t, .pad_b, .pad_r, .pad_l
Amount (half, double) .pad_half, .pad_2
Direction and Amount .pad_t_half, .pad_r_2, etc...
None / Remove .pad_n, .pad_n_b

Margin overrides follow the same pattern (with one addition):

Margin General .space
Directions (top, bottom, right, left) .space_t, .space_b, .space_r, .space_l
Amount (half, double) .space_half, .space_2
Direction and Amount .space_b_half, .space_t_half, etc...
None / Remove .space_n, .space_n_t
Negative Margins .space_neg, .space_neg_l_2

 

Responsive

Media query-based classes

Spacing and padding can be overridden on a per-breakpoint-basis by prepending pre-defined names to their classes

480px or smaller (phones) .small_[...]
640px or smaller (small tablets or smaller) .smalls_[...]
641px or larger (tablets or larger) .bigs_[...]
941px or larger (laptops and desktops) .desk_[...]
Example (no padding on desktop, padding top on phones)  <div class="desk_pad_n small_pad_t"></div>

 

Layout

Grids & Columns

Instead of using tables to layout pages, we use a common grid system using divs and classes.

Column container
All columns must be contained within this wrapper in order to line up correctly. This class sets up the column spacing.
.row
Columns .column
Column widths .half, .third, .two_thirds, .quarter, .sixth, .eighth
Example
Two columns, one taking up 33.3% and the other 66.6%
<div class="row">
  <div class="column third">
    [...]
  </div>
  <div class="column two_thirds">
    [...]
  </div>
</div>

Alignment

Rearranging objects on the page can be done, like most of the above, with a few single-serving classes.

Floats
Float _right/_left can be combined with media queries
.right, .float_right, .left, .float_left
Center block
Center a block object. Adds auto margins to the left and right. A width less than 100% is required.
.center