AEG GWIC Web Styleguide

Intro

This style guide is intended as a reference for content managers and developers to properly implement the styles, structures and methodology employed in the construction of the AEG GWIC website.

Overview of styleguide content:

Typography

Font families, sizes and hex color values for headings and body text


Palette

Colors available on the site with their hex values


Pattern Library

Information about the various custom HTML components utilized on the site with example usage and code which can be copied/pasted

  • Some items in the Pattern Library may require back end development to function properly

Coding & Content

This section of your styleguide contains important information in managing and expanding upon the HTML and CSS of your website.

Typography

H1

Heading 1

H2

Heading 2

H3

Heading 3

H4

Heading 4

H5
Heading 5
H6
Heading 6
              

...

...

...

...

...
...
Paragraph/Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore linked text magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

              

...

Palette

Brand Colors

This color palette contains automatically generated light - dark shades from AEG GWIC base (500) brand colors for creative flexibility.

Prussian
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Lochmara
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Gray
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Figures/Images/Video

Basic Usage
Brief description of image above
              
...
Brief description of image above
Left Aligned
Brief description of image above

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

              
...
Brief description of image above

...

Right Aligned
Brief description of image above

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

              
...
Brief description of image above

...

Video
Brief description of video above
              
Brief description of video above

Buttons

Naming Convention

This site uses a modified version of the BEM naming syntax for custom elements. The modified version used is based largely on Nicolas Gallagher's extended BEM syntax. The intention is to make the classes more understandable for humans, scoped where necessary, and also easily selectable in editors.

  • Note that class names composed of two or more words are written in camelCase as opposed to Gallagher's PascalCase
  • Note the major difference from BEM is the use of hyphens as opposed to underscores preceeding a descendant in a class name
  • This naming convention is to be used on custom elements only not Bootstrap components
  • Each custom component should have it's own SCSS partial in style/scss/components
  • Very helpful article in dealing with some of the trickier aspects of this naming convention Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them by Smashing Magazine
/* Component */
.componentName {}

/* Component modifier */
.componentName--modifierName {}

/* Component descendant */
.componentName-descendant {}

/* Component descendant modifier */
.componentName-descendant--modifierName {}

/* Component state (scoped to component) */
.componentName.is-stateOfComponent {}

Begin class names with the most abstract descriptor and then layer in specifics.

/* Basic nav style */
.nav {}

/* The main nav of the site */
.navMain {}

/* The secondary nav of the site */
.navSecondary {}

/* The footer nav */
.navFooter {}

Class names should be reusable and descriptive. We use the multi-class pattern where by laying class names onto an element we can achieve many different and reusable styles.

.btn { /* basic button styles */ }
.btn--secondary { /* styles specific to secondary button */ }
......

Use .is-stateName to reflect changes to a component's state. The state name must be camel case. Never style these classes directly; they should always be used as an adjoining class.

This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).

.articleMain { /* ... */ }
.articleMain.is-expanded { /* ... */ }

            

Helper Classes

Helper classes are trump classes that override existing CSS properties like text color, background color, etc.

Text Colors

.colorPrussian50

Colors text

              

...

.colorPrussian100

Colors text

              

...

.colorPrussian200

Colors text

              

...

.colorPrussian300

Colors text

              

...

.colorPrussian400

Colors text

              

...

.colorPrussian500

Colors text

              

...

.colorPrussian600

Colors text

              

...

.colorPrussian700

Colors text

              

...

.colorPrussian800

Colors text

              

...

.colorPrussian900

Colors text

              

...

.colorLochmara50

Colors text

              

...

.colorLochmara100

Colors text

              

...

.colorLochmara200

Colors text

              

...

.colorLochmara300

Colors text

              

...

.colorLochmara400

Colors text

              

...

.colorLochmara500

Colors text

              

...

.colorLochmara600

Colors text

              

...

.colorLochmara700

Colors text

              

...

.colorLochmara800

Colors text

              

...

.colorLochmara900

Colors text

              

...

.colorGray50

Colors text

              

...

.colorGray100

Colors text

              

...

.colorGray200

Colors text

              

...

.colorGray300

Colors text

              

...

.colorGray400

Colors text

              

...

.colorGray500

Colors text

              

...

.colorGray600

Colors text

              

...

.colorGray700

Colors text

              

...

.colorGray800

Colors text

              

...

.colorGray900

Colors text

              

...

Background Colors

.fillPrussian50Applies background color
              
...
.fillPrussian100Applies background color
              
...
.fillPrussian200Applies background color
              
...
.fillPrussian300Applies background color
              
...
.fillPrussian400Applies background color
              
...
.fillPrussian500Applies background color
              
...
.fillPrussian600Applies background color
              
...
.fillPrussian700Applies background color
              
...
.fillPrussian800Applies background color
              
...
.fillPrussian900Applies background color
              
...
.fillLochmara50Applies background color
              
...
.fillLochmara100Applies background color
              
...
.fillLochmara200Applies background color
              
...
.fillLochmara300Applies background color
              
...
.fillLochmara400Applies background color
              
...
.fillLochmara500Applies background color
              
...
.fillLochmara600Applies background color
              
...
.fillLochmara700Applies background color
              
...
.fillLochmara800Applies background color
              
...
.fillLochmara900Applies background color
              
...
.fillGray50Applies background color
              
...
.fillGray100Applies background color
              
...
.fillGray200Applies background color
              
...
.fillGray300Applies background color
              
...
.fillGray400Applies background color
              
...
.fillGray500Applies background color
              
...
.fillGray600Applies background color
              
...
.fillGray700Applies background color
              
...
.fillGray800Applies background color
              
...
.fillGray900Applies background color
              
...

Icons

Icon classes can be applied directly to text elements like headings, paragraphs and links or they can also be applied to <span>, <i> tags etc.

  • The version of Fontawesome used on this site is 4.7
  • There is a mixin being used on this site that simplifies the usage of icon classes so there is no need for the "fa" class as documented on the Fontwesome site.
Basic Usage

Applied to an <i> tag within a text element

Applied directly to a text element
<p>...<i class="fa-anchor"></i>...</p>
<a href="..." class="fa-heart">...</a>
  • .fa-500px
  • .fa-address-book
  • .fa-address-book-o
  • .fa-address-card
  • .fa-address-card-o
  • .fa-adjust
  • .fa-adn
  • .fa-align-center
  • .fa-align-justify
  • .fa-align-left
  • .fa-align-right
  • .fa-amazon
  • .fa-ambulance
  • .fa-american-sign-language-interpreting
  • .fa-anchor
  • .fa-android
  • .fa-angellist
  • .fa-angle-double-down
  • .fa-angle-double-left
  • .fa-angle-double-right
  • .fa-angle-double-up
  • .fa-angle-down
  • .fa-angle-left
  • .fa-angle-right
  • .fa-angle-up
  • .fa-apple
  • .fa-archive
  • .fa-area-chart
  • .fa-arrow-circle-down
  • .fa-arrow-circle-left
  • .fa-arrow-circle-o-down
  • .fa-arrow-circle-o-left
  • .fa-arrow-circle-o-right
  • .fa-arrow-circle-o-up
  • .fa-arrow-circle-right
  • .fa-arrow-circle-up
  • .fa-arrow-down
  • .fa-arrow-left
  • .fa-arrow-right
  • .fa-arrow-up
  • .fa-arrows
  • .fa-arrows-alt
  • .fa-arrows-h
  • .fa-arrows-v
  • .fa-asl-interpreting
  • .fa-assistive-listening-systems
  • .fa-asterisk
  • .fa-at
  • .fa-audio-description
  • .fa-automobile
  • .fa-backward
  • .fa-balance-scale
  • .fa-ban
  • .fa-bandcamp
  • .fa-bank
  • .fa-bar-chart
  • .fa-bar-chart-o
  • .fa-barcode
  • .fa-bars
  • .fa-bath
  • .fa-bathtub
  • .fa-battery
  • .fa-battery-0
  • .fa-battery-1
  • .fa-battery-2
  • .fa-battery-3
  • .fa-battery-4
  • .fa-battery-empty
  • .fa-battery-full
  • .fa-battery-half
  • .fa-battery-quarter
  • .fa-battery-three-quarters
  • .fa-bed
  • .fa-beer
  • .fa-behance
  • .fa-behance-square
  • .fa-bell
  • .fa-bell-o
  • .fa-bell-slash
  • .fa-bell-slash-o
  • .fa-bicycle
  • .fa-binoculars
  • .fa-birthday-cake
  • .fa-bitbucket
  • .fa-bitbucket-square
  • .fa-bitcoin
  • .fa-black-tie
  • .fa-blind
  • .fa-bluetooth
  • .fa-bluetooth-b
  • .fa-bold
  • .fa-bolt
  • .fa-bomb
  • .fa-book
  • .fa-bookmark
  • .fa-bookmark-o
  • .fa-braille
  • .fa-briefcase
  • .fa-btc
  • .fa-bug
  • .fa-building
  • .fa-building-o
  • .fa-bullhorn
  • .fa-bullseye
  • .fa-bus
  • .fa-buysellads
  • .fa-cab
  • .fa-calculator
  • .fa-calendar
  • .fa-calendar-check-o
  • .fa-calendar-minus-o
  • .fa-calendar-o
  • .fa-calendar-plus-o
  • .fa-calendar-times-o
  • .fa-camera
  • .fa-camera-retro
  • .fa-car
  • .fa-caret-down
  • .fa-caret-left
  • .fa-caret-right
  • .fa-caret-square-o-down
  • .fa-caret-square-o-left
  • .fa-caret-square-o-right
  • .fa-caret-square-o-up
  • .fa-caret-up
  • .fa-cart-arrow-down
  • .fa-cart-plus
  • .fa-cc
  • .fa-cc-amex
  • .fa-cc-diners-club
  • .fa-cc-discover
  • .fa-cc-jcb
  • .fa-cc-mastercard
  • .fa-cc-paypal
  • .fa-cc-stripe
  • .fa-cc-visa
  • .fa-certificate
  • .fa-chain
  • .fa-chain-broken
  • .fa-check
  • .fa-check-circle
  • .fa-check-circle-o
  • .fa-check-square
  • .fa-check-square-o
  • .fa-chevron-circle-down
  • .fa-chevron-circle-left
  • .fa-chevron-circle-right
  • .fa-chevron-circle-up
  • .fa-chevron-down
  • .fa-chevron-left
  • .fa-chevron-right
  • .fa-chevron-up
  • .fa-child
  • .fa-chrome
  • .fa-circle
  • .fa-circle-o
  • .fa-circle-o-notch
  • .fa-circle-thin
  • .fa-clipboard
  • .fa-clock-o
  • .fa-clone
  • .fa-close
  • .fa-cloud
  • .fa-cloud-download
  • .fa-cloud-upload
  • .fa-cny
  • .fa-code
  • .fa-code-fork
  • .fa-codepen
  • .fa-codiepie
  • .fa-coffee
  • .fa-cog
  • .fa-cogs
  • .fa-columns
  • .fa-comment
  • .fa-comment-o
  • .fa-commenting
  • .fa-commenting-o
  • .fa-comments
  • .fa-comments-o
  • .fa-compass
  • .fa-compress
  • .fa-connectdevelop
  • .fa-contao
  • .fa-copy
  • .fa-creative-commons
  • .fa-credit-card
  • .fa-credit-card-alt
  • .fa-crop
  • .fa-crosshairs
  • .fa-css3
  • .fa-cube
  • .fa-cubes
  • .fa-cut
  • .fa-cutlery
  • .fa-dashboard
  • .fa-dashcube
  • .fa-database
  • .fa-deaf
  • .fa-deafness
  • .fa-dedent
  • .fa-delicious
  • .fa-desktop
  • .fa-deviantart
  • .fa-diamond
  • .fa-digg
  • .fa-dollar
  • .fa-dot-circle-o
  • .fa-download
  • .fa-dribbble
  • .fa-drivers-license
  • .fa-drivers-license-o
  • .fa-dropbox
  • .fa-drupal
  • .fa-edge
  • .fa-edit
  • .fa-eercast
  • .fa-eject
  • .fa-ellipsis-h
  • .fa-ellipsis-v
  • .fa-empire
  • .fa-envelope
  • .fa-envelope-o
  • .fa-envelope-open
  • .fa-envelope-open-o
  • .fa-envelope-square
  • .fa-envira
  • .fa-eraser
  • .fa-etsy
  • .fa-eur
  • .fa-euro
  • .fa-exchange
  • .fa-exclamation
  • .fa-exclamation-circle
  • .fa-exclamation-triangle
  • .fa-expand
  • .fa-expeditedssl
  • .fa-eye
  • .fa-eye-slash
  • .fa-eyedropper
  • .fa-fa
  • .fa-facebook
  • .fa-facebook-f
  • .fa-facebook-official
  • .fa-facebook-square
  • .fa-fast-backward
  • .fa-fast-forward
  • .fa-fax
  • .fa-feed
  • .fa-female
  • .fa-fighter-jet
  • .fa-file
  • .fa-file-archive-o
  • .fa-file-audio-o
  • .fa-file-code-o
  • .fa-file-excel-o
  • .fa-file-image-o
  • .fa-file-movie-o
  • .fa-file-o
  • .fa-file-pdf-o
  • .fa-file-photo-o
  • .fa-file-picture-o
  • .fa-file-powerpoint-o
  • .fa-file-sound-o
  • .fa-file-text
  • .fa-file-text-o
  • .fa-file-video-o
  • .fa-file-word-o
  • .fa-file-zip-o
  • .fa-files-o
  • .fa-film
  • .fa-filter
  • .fa-fire
  • .fa-fire-extinguisher
  • .fa-firefox
  • .fa-first-order
  • .fa-flag
  • .fa-flag-checkered
  • .fa-flag-o
  • .fa-flash
  • .fa-flask
  • .fa-flickr
  • .fa-floppy-o
  • .fa-folder
  • .fa-folder-o
  • .fa-folder-open
  • .fa-folder-open-o
  • .fa-font
  • .fa-font-awesome
  • .fa-fonticons
  • .fa-fort-awesome
  • .fa-forumbee
  • .fa-forward
  • .fa-foursquare
  • .fa-free-code-camp
  • .fa-frown-o
  • .fa-futbol-o
  • .fa-gamepad
  • .fa-gavel
  • .fa-gbp
  • .fa-ge
  • .fa-gear
  • .fa-gears
  • .fa-genderless
  • .fa-get-pocket
  • .fa-gg
  • .fa-gg-circle
  • .fa-gift
  • .fa-git
  • .fa-git-square
  • .fa-github
  • .fa-github-alt
  • .fa-github-square
  • .fa-gitlab
  • .fa-gittip
  • .fa-glass