Advanced Styles Reference

1. Breakpoint Reference

These are the main breakpoints currently in use on the site:

  • 0 – 550px
  • 550 – 800px
  • 800 – 1024px
  • 1024 – 1200px
  • 1200 – 1400px

2. Fonts

The two main fonts in use in our theme are Sabon (serif) and Frutiger (sans serif). They are available by using the following family and weight rules:

  • font-family: “Sabon Next W01”
    • font-weight: 400  default
    • font-weight: 500
    • font-weight: 700   or font-weight: bold
  • font-family: “Neue Frutiger W01”
    • font-weight: 200
    • font-weight: 300   default for navs, sidebars, etc.
    • font-weight: 400   default for page/post copy
    • font-weight: 600
    • font-weight: 700   or font-weight: bold
    • font-weight: 800
    • font-weight: 900

3. Text and Background Color

  • Add class less-important  de-emphasize some text by making it smaller and lighter.
  • Add class dark-bg  Adds the current theme’s dark color to the background.
  • Add class light-bg  Add the current theme’s light color to the background.
  • Add class dark-text  Uses the current theme’s dark color for the text color.
  • Add class light-text  Uses the current theme’s light color for the text color.

4. Tables

  • To make the last row of a table display as a bold “totals row”, add the class with-totals-row to the table.
    • Ex. <table class=”with-totals-row”>
  • To make the last column of a table display as a bold “totals column”, add the class with-horizontal-totals-row to the table.
    • Ex. <table class=”with-horizontal-totals-row”>
  • To use a clear color scheme for a table, give it the class alternate-blank.
    • Ex. <table class=”alternate-blank”>

Default
Cell Cell
Cell Cell
Cell Cell

Totals Row
Cell Cell
Cell Cell
Cell Cell

Totals Column
Cell Cell Cell
Cell Cell Cell
Total Total Total

Alternate Blank
Cell Cell
Cell Cell
Cell Cell


5. Lists

Give list rows a light alternating background by adding the class alternate-rows to the <ul> or <ol>.

  • Ex. <ul class=”alternate-rows”>

Example List

  • Row
  • Row
  • Row
  • Row
  • Row

6. Highlight Boxes

Create a Highlight Box by giving a block-level element (p, div, ul for example) the class highlight-box. Alternate styles can be used by also adding the class style2 or style3.

  • Ex. 1: <div class=”highlight-box”>
  • Ex. 2: <div class=”highlight-box  style2″>
Highlight Box

Highlight Box 2

Highlight Box 3

Create a Quote Box by giving a block level element the class quote-box. Among other styles, this adds a background of angled faded text.

  • Ex. <div class=”quote-box”>
“With the solidarity of companionship and the challenge of truth, we produce graduates with ethical awareness and a commitment to serving purposes larger than themselves.”

7. Social Media

The easiest way to create one of these buttons is to use the 

[Social Icon Shortcode error: please fill in "link" attribute]
shortcode. The shortcode will detect the link you’ve provided and display the corresponding social network icon.

Ex. [ social-button link=”facebook.com”]

The first style is preferred, but to use an alternate style, add the style=”2″ attribute, like:

[ social-button link=”facebook.com” style=”2″]

ServiceIconIcon (Alternate Style)
Facebook
LinkedIn
Twitter
Google Plus
Pinterest
Vimeo
Instagram
Tumblr
YouTube
SnapChat

8. Widgets in Page

This shortcode allows you to use a widget anywhere. For the widget attribute, you give it the name of a widget’s classname. For example, here are the names of the WP build-in widgets. The rest of the attributes are whatever settings that particular widget takes.

Example

[ do-widget widget=”WP_Widget_Recent_Posts” attribute1=”Recent Posts” attribute2=”5″]

Recent Posts

9. Tablesaw

ex. [ tablesaw sort-columns=”first_name, last_name”]

…

[/tablesaw]
Use stack=”false” to make the table never stack.
Use breakpoint=”123px” to specify the breakpoint (px, em, rem are all acceptable units). The default is 40em.

10. Responsive Iframes

If you would like to use an iframe and make it always full-width, I would suggest using the iframe shortcode.

Ex. [ iframe src=”http://example.com”]

The default height is 400px. You can change the height with an attribute, though.

Ex. [ iframe src=”http://example.com” height=”500px”]

For responsive iframes, use the class “maintain-proportions.”

Ex. [ iframe src=”http://example.com” class=”maintain-proportions”]

11. Offsite Links

Simply apply the class offsite-link as so:

<a href="example.com" class="offsite-link">link</a>

external link