View E-mail Design Style Guide

View Social Guidelines


Screenshots for Gateway: http://invis.io/7N2NUKK6M

Monterey Bay Aquarium Colors

Primary

 

#444
 

#333
 

#eee
 

#008dec
 

#FF4500

Secondary

(ONLY MOBILE NAV)
 

#00487c



Seafood Watch Colors

 

#444
 

#333
 

#eee
 

#008dec
 

#a4bd3e
 

#fec019
 

#ed7044



Body Background

Note: There is slight gradient from white down to #eee

background-image: url(<a href="http://www.montereybayaquarium.org/assets/img/body-grade.png">http://www.montereybayaquarium.org/assets/img/body-grade.png); background-position: center top; background-repeat: repeat-x; background-color: #eee; background-color: #eee;

Fonts

Intro Copy

<p class="intro">

font-family: "Sentinel SSm A","Sentinel SSm B",Georgia,Times,"Times New Roma",serif; font-weight: 400; font-style: normal; font-size: 1.125em; line-height: 1.4; color: #666777;

Welcome to the Monterey Bay Aquarium Web Styleguide. If you edit this page in Sitecore, you can preview snippets of code to see how all these elements are constructed and how they fit together. This serves as a repository of both code snippets and examples to help you familiarize yourself with the MBA web graphic styles and conventions.




Headings

Page title

<h1>Heading 1</h1>
font-family:"Gotham Cond A","Gotham Cond B","Arial Narrow Bold","Helvetica Neue",Helvetica,Arial,sans-serif;color:#333;

Serif Font

<element class="serif"> where element=p, h1, h2, div, etc.
font-family: Sentinel SSm A","Sentinel SSm B",Georgia,Times,"Times New Roma",serif;color:#666777;

Body

<p>Body copy</p>
font-family:"Gotham SSm A","Gotham SSm B",sans-serif;color:#444;

H2–H6

<h2>headings 2-6</h2>
font-family:"Gotham Narrow SSm A","Gotham Narrow SSm B","Arial Narrow Bold","Helvetica Neue",Helvetica,Arial,sans-serif;color:#333;




Image that Require Copyright

  • Image MUST have readable copyright on image.
  • Image MUST also use a title="© Copyright info" with same copyright information.



Sold Out and Event Over

SOLD OUT

This event is now over.




PDFs

LINK EXAMPLE: Download map (PDF)

CALL TO DOWNLOAD ACROBAT: (Available in PDF format. Download Adobe Reader.)

FILE NAME CONVENTION: monterey-bay-aquarium-(description)

FILE SIZE: Ideally under 2MB. Most of our PDF files can get pretty small.




Icon Fonts

<i class="fa fa-flag">
Font Awesome: fortawesome.github.io/Font-Awesome/

MBA Icons

<element class="mbaicon-reference">

View MBA Icon Reference



Video Icon

See PSD file in _Design/Templates/Video/video-play-overlay.psd

Example:

See video code


Responsive Framework

Basic framework based on getskeleton.com.

Grid Skeleton, GridMarionette and Item Grid work in conjunction with each other to form MBA's responsive framework. This gives designers a lot of flexibility in how they can modify layouts over a variety of breakpoints

    Grid Skeleton

    Grid Skeleton is the base framework for MBA.

    Grid Marionette

    Grid Marionette hooks on to Skeleton and provides responsive sizing and repositioning classes to aid in responsive design.

    Item Grid

    Item Grid provides a responsive grid framework for displaying large lists of items.



Helper classes

  1. white-box light-gray
  2. orange-box
  3. black-box
  4. gray-box
  5. light-gray-box rounded-corners
  6. white-box
  7. blue-box
  8. white-box border

<div class="centered">text aligned center</div>

text aligned center

<div class="center">block visually centered</div>

margin left and right=auto in order to visually center a block

<div class="left">block floats left</div>

block floats left


<div class="right">block floats right</div>

block floats right

<a href="#" class="ignore">ignores external link behavior, including opening in new windows and redirecting gateway to mobile store.</div>

.equalize

The equalize class is used to trigger a script that makes all divs on the same row have equal heights

Initialize in Page End Code Injection:

<script type="text/javascript"> $(function () { $('.equalize').matchHeight(); }); </script>

Note: There are some use cases where the above script needs to be called differently (Such as the curriculum page). In those instances, using min-height instead of height might be necessary. Additionally, there are isolated use cases where maint scroll position may be necessary.

<script type="text/javascript"> $(function () { $('.equalize').matchHeight({ property: 'min-height' }); }); $.fn.matchHeight._maintainScroll = true; </script>

Without .equalize class

This is useful when we have large blocks of text.
This is useful when we have large blocks of text and we don't necessarily know how large those blocks will be, or where the lines are going to break or wrap. It's especially useful because it allows us to have less breakpoints on responsive design classes.
This is useful when we have large blocks of text and we don't necessarily know how large those blocks will be, or where the lines are going to break or wrap.

With .equalize class

This is useful when we have large blocks of text.
This is useful when we have large blocks of text and we don't necessarily know how large those blocks will be, or where the lines are going to break or wrap. It's especially useful because it allows us to have less breakpoints on responsive design classes.
This is useful when we have large blocks of text and we don't necessarily know how large those blocks will be, or where the lines are going to break or wrap.

With .equalize and responsive grid classes

This is useful when we have large blocks of text.
This is useful when we have large blocks of text and we don't necessarily know how large those blocks will be, or where the lines are going to break or wrap. It's especially useful because it allows us to have less breakpoints on responsive design classes.
This is useful when we have large blocks of text and we don't necessarily know how large those blocks will be, or where the lines are going to break or wrap.

Typography

Heading 1

<h1>Heading 1</h1>
Should only be used for page headers

Heading 2

<h2>Heading 2</h2>
Heading 2 can be used for section titles, or with no margin bottom as shown below, for major breaks within body copy

Heading 2: No margin bottom

<h2 class="nomarginbottom">
This is a short paragraph. Notice that paragraph tags have a max-width, which has been set in order to maintain optimal line widths for legibility.

Heading 3

<h3>Heading 3</h3>
Headings 3 and beyond don't have further considerations.

Heading 4

<h4>Heading 4</h4>

Heading 5

<h5>Heading 5</h5>

Heading 6

<h6>Heading 6</h6>
Headings 4-6 are cureently visually similar, but we should still use them for structure.

Sold out

<p class="sold-out">Sold out text</p>

Sold out text

<span class="sold-out">Sold out text</span>

Normal text, normal text Sold out text normal text.

Horizontal Rule

<hr> or <element class="hr">border-bottom: 2px solid #d2d3db;



Video

<div class="fluid-width-video-wrapper" style="padding-top:56.25%"> <iframe src="//www.youtube.com/embed/g0GReywkq5A?rel=0&autohide=1&showinfo=0&theme=light&fs=0" frameborder="0"></iframe> </div>


Video icon style



Buttons

<class="button" href="#">Buy tickets now<a/> <class="button" href="#">Short<a/>

Buy tickets now Short

Responsive CSS

There are times in which we need to add responsive CSS to the <head> element of a standalone page. This is generally done in sitecore as a way of keeping certain styles that apply to an individual page together with it without creating extra .scss files in the back-end. Below is the starting code block with the most common break points and responsive best practices. Note that widths are given in ems, which are based on a 16px base font size. We do this for better scalability.

<style> /* Common attributes for css classes and elements go below first. */ /* Mobile first. Devices up to 29.9375em (479px / 16px ) */ @media all and (max-width: 29.375em) { } /* Phablet - 30em (480px / 16px) to 44.9365em (719px / 16px) */ @media all and (min-width: 30em) and (max-width: 44.9375em) { } /* Tablet - 45em (720px / 16px) to 64.9375em (1039px / 16px) */ @media all and (min-width: 45em) and (max-width: 64.9375em) { } /* Standard Desktops - 65em (1040px / 16px) to 74.9365em (1199px / 16px) */ @media all and (min-width: 65em) and (max-width: 74.9375em) { } /* Wide displays - 75em (1200px / 16px) and above */ @media all and (min-width: 75em) { } </style>


Components

Image Grid

Default grid: 2 -> 3 -> 4 <div class="image-grid"> <a class="image-grid-item" href="#" target=""> <figure class="image-grid-item-inner"> <img src="http://placehold.it/400x400" alt="placeholder" height="300" width="300" /> <figcaption class="image-grid-item-details"> <h4 style="color:inherit!important">Header</h4> <p>Text</p> </figcaption> </figure> </a> </div>


Horizontal grid: 1 -> 2 -> 3 (for use with wide images) <div class="image-grid--horiz"> <a class="image-grid-item" href="#" target=""> <figure class="image-grid-item-inner"> <img src="http://placehold.it/600x400" alt="placeholder" height="400" width="600" /> <figcaption class="image-grid-item-details"> <h4 style="color:inherit!important">Header</h4> <p>Text</p> </figcaption> </figure> </a> </div>


Alternate grid template 1 -> 2 -> 3 -> 4 <div class="image-grid--alt"> <a class="image-grid-item" href="#" target=""> <figure class="image-grid-item-inner"> <img src="http://placehold.it/400x400" alt="placeholder" height="300" width="300" /> <figcaption class="image-grid-item-details"> <h4 style="color:inherit!important">Header</h4> <p>Text</p> </figcaption> </figure> </a> </div>


Two column grid 1 -> 2 <div class="image-grid--2col"> <a class="image-grid-item" href="#" target=""> <figure class="image-grid-item-inner"> <img src="http://placehold.it/400x400" alt="placeholder" height="300" width="300" /> <figcaption class="image-grid-item-details"> <h4 style="color:inherit!important">Header</h4> <p>Text</p> </figcaption> </figure> </a> </div>