Styles Guide

Colors

To keep things nice and tidy, I've omitted the hex codes. If you want to know the color, just use your browser's inspector. Also, I change hexes (very slightly) more often that I'll admit, and I'll never remember to change them here too.


Neutrals

  • $storm
  • $stone
  • $neutral
  • $bone

Primary Brand Colors

  • $poppy
  • $water
  • $lime

Secondary Brand Colors

  • $marigold
  • $curry
  • $rouge
  • $lotus
  • $smurf
  • $sage
  • $mud

Typography

Proxima Nova is being served via Typekit and Roboto is being served through Google's CDN. Icon fonts are via Font Awesome and served through their CDN.

Type

  • Proxima Nova 100 (Thin)
  • Proxima Nova 300 (Light)
  • Proxima Nova 300 (Light Italic)
  • Proxima Nova 700 (Bold)
  • Proxima Nova 700 (Bold Italic)
  • Roboto Slab 300 (Light)
  • Roboto Slab 700 (Bold)

  

A note on font icons: Ad blockers are popular, and most people keep their settings on default, which is fine. However, there are people that choose to mess with the settings on their ad blocker and disallow any social icons. In these (hopefully isolated) cases, social icons (like Facebook), don't display at all. It's a fairly graceful degradation if they do this.

Headings

  • h1.bigfattie

  • Heading One

  • Heading Two

  • Heading Three

  • Heading Four

Main Text Styles

Standard paragraph: Examples of emphasis and strong. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Main Link Style

Lists

  • Normal disc list (unstyled)
  • tion ullamco laboris nisi ut aliquip ex ea commodo consequa, sunt in culpa qui officia deserunt mollit a.
  • lorem ipsum
  1. Normal ordered list (unstyled)
  2. tion ullamco laboris nisi ut aliquip ex ea commodo consequa, sunt in culpa qui officia deserunt mollit a.
  3. lorem ipsum
  • lorem
  • ipsum
  • lorem
  • .smaller-bullet
  • lorem
  • ipsum
  • lorem
  • .two-column-list
Definition List for 'fruit'
Apples
Oranges
Mangos
  • Keyline List
  • Example
  • .icon-list
  • Martini; shaken, not stirred.
  • Make me another you git. (Oh, not that git.)
  • Audi R8
  • Audi R7
  • Audi SQ5
  • .bordered-list
  • Captain America
  • Iron Man
  • Black Widow
  • .subtle-list
  • This
  • Is
  • An
  • Inline
  • List
  • .inline-list or @include inline-list;

Alternative Text Styles

p.overview-paragraph Overview paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p.small Small paragraph: Examples of emphasis and strong. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

fine-print-boxed Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Page Components

Various reusable components that are used throughout the site.


Story Grid

Feature story grid: .story-grid-row
Please note, you'll want to add a couple empty figure items to balance out odd rows.

Masonry

Masonry is a hugely popular JavaScript grid layout library. Most of the time, when we use this it to display logos. When doing so, oftentimes they are pulled from Contentful and displayed alphabetically. There is a small catch, Masonry arranges things by size as well as other ways, so if you're sorting alphabetically but the sizes are strange, sometimes it won't be perfectly alphabetical.

The masonry JS isn't included globally, only on pages where it's used, so you'll want to include that:

Everything is housed in a .masonry div, then each item: .masonry-item with .content to hold the actual content.

.masonry > .masonry-item > .content

This

That

The other thing

Tooltips

Mouse over the icons below for an example. To put a tooltip on something, simple add data-tooltip='whatever' to the a tag.

Buttons

.btn
.btn with icon example
.btn-hot

.btn-sm

Contentful

We use Contentful as a service to manage frequently updated content which can be reused in a variety of platforms (Ruby, Node, iOS, Android, etc.). These are easy to update and hinge and can be updated by anyone with a user/password for Contentful. In addition, permissions can be set so that some posts need approval before they go live.

As far as how they go live: once changes are made (and published) in Contentful, the host (Netlify) is notified via a webhook and rebuilds the site with the new content. Please note, this usually only takes 2-3 minutes, but can take as long as 15.

Some of the pages and sections built with Contentful:

  • Blog Posts
  • Board Members
  • Careers
  • Country Pages
  • International News
  • Internationl Staff
  • Press Releases
  • Products (for an upcoming store)
  • Sector News
  • Sponsorship Logos
  • Team Bios and Photos
  • WWC Opportunities
  • Stories

Most of these sections are fairly straight forward, but we do have some exceptions.

Board Members

The board has an entry called sorting order. This should be 100 unless you wish for it to be sorted manually, in which case it should be less than 100. Basically, the site will sort by sorting order first, and then if all sorting numbers are equal, it sorts by the last name.

Sponsorship Logos

These are managed by keywords, which are separated by commas. All keywords are case and space sensitive (they have such delicate feelings). If possible, these should be uploaded as .svg files (vector). This isn't possible to do without Illustrator, and even if you have Illustrator, it gets tricky. We probably already have said logo on file, but if we don't, and we have the vector version, send it to that fantastically handsome and charismatic web designer.

25th Anniversary Page
25-anniv-platinum
25-anniv-gold
25-anniv-silver
25-anniv-bronze
25-anniv-event
Everyone Forever Global Strategic Partners
strategic
Everyone Forever Visionaries
visionaries
Everyone Forever Champions
champions
Everyone Forever Leaders
leaders
Everyone Forever Advocates
advocate
ACE
ace-16-booth-platinum
ace-16-luncheon-presenting
ace-16-luncheon-bronze
ace-16-bash-presenting
ace-16-bash-bronze
Leadership Council
leadership-council
Highlights (for various uses)
committees
WEFTEC 16
bash-16-gold
bash-16-silver
bash-16-bronze
weftec-16-tradeshow-platinum
Stories

These are also managed by keywords, separated by commas.

2016 Spring Campaign
faces-of-progress
Girls
girls
Featured Stories
featured

Sector Pages

The primary audience of this site is the donor. They are not engineers or industry people, and we should show them content that is best suited for their interests. However, we do need some of the more technical stuff to be public facing. To address that, we've created the 'pages' subdirectory.

Pages
Committeees