Administration & Finance

menu
A&F Services    my CalPoly login

A&F Web Support

Style Guide

This guide is meant to help content editors get the most out of their A&F web pages. The A&F websites are built using the Foundation framework please visit their website for even more examples. Clicking on the "VIEW HTML" button will provide you with the example html that you can copy and paste into your web pages.

Typography:

Headings VIEW HTML HIDE HTML

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

See the Pen XWbOozK by AFD WEB (@AFD-WEB) on CodePen.

Text Content VIEW HTML HIDE HTML

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt doloremque recusandae unde a minus ad consequuntur labore, saepe commodi voluptate hic nam perspiciatis sed, possimus fugit, repellat modi ipsa. Libero.

This is a paragraph with smaller text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt doloremque recusandae unde a minus ad consequuntur labore, saepe commodi voluptate hic nam perspiciatis sed, possimus fugit, repellat modi ipsa. Libero.

This is a paragraph with larger text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt doloremque recusandae unde a minus ad consequuntur labore, saepe commodi voluptate hic nam perspiciatis sed, possimus fugit, repellat modi ipsa. Libero.

This is a link that goes to the Cal Poly homepage

List Items

  • List items with bullets
  • List items with bullets
  • List items with bullets
  • List items with no bullets
  • List items with no bullets
  • List items with no bullets
  1. List items with numbers
  2. List items with numbers
  3. List items with numbers
  1. List items with alphabet
  2. List items with alphabet
  3. List items with alphabet

See the Pen Text Content by AFD WEB (@AFD-WEB) on CodePen.

Buttons:

Buttons VIEW HTML HIDE HTML

Link Buttons

Default Secondary Alternate
Tiny Small Default Large Expanded

Form Button

Button Groups

A B C

See the Pen Buttons by AFD WEB (@AFD-WEB) on CodePen.

Icons

The A&F website uses a third party solution for icons. You can see the whole list of available icons on the Font Awesome website

Icons can add a much needed visual element to break up all the text content which is typical for an A&F web page. Icons are easy to add but should be used sparingly. Typical use of an icon would be in a card-content section or appended to a heading. See below for some examples.

Icon Usage VIEW HTML HIDE HTML

Puppy Obedience Training Now Available

Join Now!

Icon In Card Content

My Favorite Icons

Icon Icon Name
fa-turtle
fa-burger-soda
fa-rocket-launch

Icon Sizing

fa-2x
fa-4x
fa-6x

See the Pen Icons by AFD WEB (@AFD-WEB) on CodePen.

Cards

Cards are a very flexible element to use on your web pages. They are used to highlight important information, separate content visually or used as a categorization for other pages within your website. Cards are made up of multiple sections a title, content area, photo and action links. All of these sections can be placed in any order providing you with a versatile element that can serve many purposes.

Default Cards VIEW HTML HIDE HTML

Title

Content for cards. This is meant for information that isn't an action

Rank1 Link

Content for cards. This is meant for information that isn't an action

Rank2

Content for cards. This is meant for information that isn't an action

See the Pen Cards - Default by AFD WEB (@AFD-WEB) on CodePen.

Alternate Cards VIEW HTML HIDE HTML

Title Small Link

Content for cards. This is meant for information that isn't an action

Title Rank1 Small

Content for cards. This is meant for information that isn't an action

Title Rank2 Small

Content for cards. This is meant for information that isn't an action

Content for cards. This is meant for information that isn't an action

Title Small

Title Rank1 Small

Content for cards. This is meant for information that isn't an action

Content for cards. This is meant for information that isn't an action

Title Rank2 Small

See the Pen Cards - Default by AFD WEB (@AFD-WEB) on CodePen.

Image Cards VIEW HTML HIDE HTML

Card Title

Content for cards. This is meant for information that isn't an action

Card Title

Content for cards. This is meant for information that isn't an action

See the Pen Cards - Default by AFD WEB (@AFD-WEB) on CodePen.

Colors

Website Palette




HEX code #fcfcfc
class names .off-white
.off-white-bkgd

Off White




HEX code #f5f5f4
class names .light-gray
.light-gray-bkgd

Light Gray




HEX code #e2e2e3
class names .medium-gray
.medium-gray-bkgd

Medium Gray




HEX code #6f7073
class names .gray
.gray-bkgd

Gray




HEX code #54585A
class names .dark-gray
.dark-gray-bkgd

Dark Gray




HEX code #e1e7dc
class names .light-green
.light-green-bkgd

Light Green




HEX code #fffded
class names .light-yellow
.light-yellow-bkgd

Light Yellow




HEX code #cecca0
class names .light-gold
.light-gold-bkgd

Light Gold




HEX code #dad7cb
class names .light-brown
.light-brown-bkgd

Light Brown




HEX code #eeece9
class names .lightest-brown
.lightest-brown-bkgd

Lightest Brown




HEX code #ffffff
class names .white
.white-bkgd

White




HEX code #000000
class names .black
.black-bkgd

Black

Cal Poly Branding Palette

Primary Colors




HEX code #154734
class names .poly-green
.poly-green-bkgd

Poly Green




HEX code #BD8B13
class names .mustang-gold
.mustang-gold-bkgd

Mustang Gold

Secondary Bright Colors




HEX code #3A913F
class names .farmers-market
.farmers-market-bkgd

Farmers Market




HEX code #A4D65E
class names .dexter-green
.dexter-green-bkgd

Dexter Green




HEX code #F2C75C
class names .poly-canyon
.poly-canyon-bkgd

Poly Canyon




HEX code #F8E08E
class names .stadium-gold
.stadium-gold-bkgd

Stadium Gold




HEX code #5CB8B2
class names .surf-blue
.surf-blue-bkgd

Surf Blue




HEX code #B5E3D8
class names .sky-blue
.sky-blue-bkgd

Sky Blue




HEX code #ABCAE9
class names .morro-blue
.morro-blue-bkgd

Morro Blue




HEX code #D5E4F4
class names .serenity
.serenity-bkgd

Serenity

Secondary Muted Colors




HEX code #CAC7A7
class names .pismo-sand
.pismo-sand-bkgd

Pismo Sand




HEX code #E4E3D3
class names .mission-beige
.mission-beige-bkgd

Mission Beige




HEX code #B7CDC2
class names .coast-sage
.coast-sage-bkgd

Coast Sage




HEX code #789F90
class names .sycamore
.sycamore-bkgd

Sycamore




HEX code #54585A
class names .seal-gray
.seal-gray-bkgd

Seal Gray




HEX code #8E9089
class names .kennedy-gray
.kennedy-gray-bkgd

Kennedy Gray

Accent Colors




HEX code #FF6A39
class names .heritage-orange
.heritage-orange-bkgd

Heritage Orange




HEX code #E4E3D3
class names .avocado
.avocado-bkgd

Avocado

The Grid - Columns & Rows

Adding rows and columns to your content is fairly easy to achieve. The A&F website uses a 12 column grid layout and setting up a column will require you to wrap your content in .rows and .column divs to achieve the columns. See the code below for examples. For more detailed information you can visit the zurb foundation website.

The following code will produce two columns on a medium resolution and large resolution monitor (tablet & desktop) and one column on a lower resolution monitor (mobile).

<div class="row"> <div class="column small-12 medium-6"> <p>Your content goes here</p> </div> <div class="column small-12 medium-6"> <p>Your content goes here</p> </div> </div>

Below is how it would appear in a browser minus the border.

Your content goes here

Your content goes here

The following code will produce a block grid 3 wide on medium resolution and 4 wide on a large resolution monitor (tablet & desktop) and one column on a lower resolution monitor (mobile).

<div class="row small-up-1 medium-up-3 large-up-4"> <div class="column"> <p>Your content goes here</p> </div> <div class="column"> <p>Your content goes here</p> </div> <div class="column"> <p>Your content goes here</p> </div> <div class="column"> <p>Your content goes here</p> </div> <div class="column"> <p>Your content goes here</p> </div> <div class="column"> <p>Your content goes here</p> </div> <div class="column"> <p>Your content goes here</p> </div> <div class="column"> <p>Your content goes here</p> </div> </div>

Below is how it would appear in a browser minus the border.

Your content goes here

Your content goes here

Your content goes here

Your content goes here

Your content goes here

Your content goes here

Your content goes here

Your content goes here


File Naming Conventions

Naming you files correctly is important not only for organization purposes, but also for user experience and search engine optimization. Please follow the following specifications for naming all files that get posted to the web server.

  • Even if your operating system allows you, don't save files containing these characters * : \ / < > | " ? [ ] ; = + & £ $ . You may encounter difficulties searching for or opening them so they are best avoided.
  • Do not use initials, abbreviations and codes that are not commonly understood.
  • Avoid using common words such as ‘draft’ or ‘letter’ at the start of file names, unless doing so will make it easier to retrieve the record.
  • Avoid unnecessary repetition and redundancy in file names and file paths.
  • Use dashes instead of spaces
    • Spaces show %20 in the URL and makes the link hard to read and type into the browser
    • Search engines use dashes to separate words
  • Use lowercase
  • Do not version or date the file
    • Older versions can be dated for archived versions
    • We do this so that when other sites link to this file and the file gets updated we don't need to change the link

Examples

Do This

  • important-department-report.pdf
  • department-tool-guide.pdf

Not This

  • important department report rev3a 2014 word.pdf
  • DEPARTMENT toolGuide - final.docx

When to use a Word doc or a PDF

A Word doc should only be used if the user downloading it will need to edit the document. A pdf should be used in all other cases.

Accordion Menu

Default Accordion VIEW HTML HIDE HTML

  • Header Title One
    Download Something

    Bacon ipsum dolor amet proident kevin sirloin drumstick capicola pancetta dolor id laborum duis culpa doner pork belly irure jerky. Prosciutto pork chop culpa fatback tri-tip dolore turducken strip steak filet mignon non tempor adipisicing chicken shankle cupim.

    Irure qui culpa, aliqua esse ham hock fugiat velit pastrami labore. Alcatra pig aute sint burgdoggen turducken flank kevin commodo. Pork belly elit reprehenderit, voluptate proident pariatur eu ham hock spare ribs sed pancetta drumstick. Spare ribs ipsum bacon in fugiat biltong boudin. Duis tenderloin et ham hock, adipisicing ea rump voluptate pork chop meatball deserunt meatloaf ut dolore sausage.

    Sunt pork adipisicing, hamburger non short ribs burgdoggen ham hock veniam et filet mignon. Hamburger chicken non swine, leberkas corned beef porchetta jowl short loin meatball. Beef ribs turducken ad ribeye meatloaf do shankle landjaeger aute tongue. Shank pariatur strip steak, filet mignon aliqua pastrami cow magna ipsum velit andouille consequat burgdoggen.

    Short ribs anim ex nulla, in ut magna proident ullamco. Doner dolore ribeye prosciutto, bacon beef ribs buffalo hamburger. Ham meatball in laboris cillum dolore. Exercitation pig dolore jerky chuck, sed venison deserunt reprehenderit quis ut. Elit veniam hamburger, andouille ad sint ball tip. Sunt sint et sausage in ut elit, hamburger aliqua lorem aute in dolore filet mignon. Adipisicing biltong doner tri-tip flank hamburger.

  • Header Title Two is a Little Bit Longer

    If an Instructional Student Assistant’s timesheet is not completed or approved during the entry/approval period, a “Late ISA Timesheet” must be completed in order to be paid.

    Download Late ISA Timesheet

    Irure qui culpa, aliqua esse ham hock fugiat velit pastrami labore. Alcatra pig aute sint burgdoggen turducken flank kevin commodo. Pork belly elit reprehenderit, voluptate proident pariatur eu ham hock spare ribs sed pancetta drumstick. Spare ribs ipsum bacon in fugiat biltong boudin. Duis tenderloin et ham hock, adipisicing ea rump voluptate pork chop meatball deserunt meatloaf ut dolore sausage.

    Sunt pork adipisicing, hamburger non short ribs burgdoggen ham hock veniam et filet mignon. Hamburger chicken non swine, leberkas corned beef porchetta jowl short loin meatball. Beef ribs turducken ad ribeye meatloaf do shankle landjaeger aute tongue. Shank pariatur strip steak, filet mignon aliqua pastrami cow magna ipsum velit andouille consequat burgdoggen.

    Short ribs anim ex nulla, in ut magna proident ullamco. Doner dolore ribeye prosciutto, bacon beef ribs buffalo hamburger. Ham meatball in laboris cillum dolore. Exercitation pig dolore jerky chuck, sed venison deserunt reprehenderit quis ut. Elit veniam hamburger, andouille ad sint ball tip. Sunt sint et sausage in ut elit, hamburger aliqua lorem aute in dolore filet mignon. Adipisicing biltong doner tri-tip flank hamburger.

See the Pen AccordionMenu by AFD WEB (@AFD-WEB) on CodePen.

Small Accordion VIEW HTML HIDE HTML

  • Header Title One
    Download Something

    Bacon ipsum dolor amet proident kevin sirloin drumstick capicola pancetta dolor id laborum duis culpa doner pork belly irure jerky. Prosciutto pork chop culpa fatback tri-tip dolore turducken strip steak filet mignon non tempor adipisicing chicken shankle cupim.

    Irure qui culpa, aliqua esse ham hock fugiat velit pastrami labore. Alcatra pig aute sint burgdoggen turducken flank kevin commodo. Pork belly elit reprehenderit, voluptate proident pariatur eu ham hock spare ribs sed pancetta drumstick. Spare ribs ipsum bacon in fugiat biltong boudin. Duis tenderloin et ham hock, adipisicing ea rump voluptate pork chop meatball deserunt meatloaf ut dolore sausage.

    Sunt pork adipisicing, hamburger non short ribs burgdoggen ham hock veniam et filet mignon. Hamburger chicken non swine, leberkas corned beef porchetta jowl short loin meatball. Beef ribs turducken ad ribeye meatloaf do shankle landjaeger aute tongue. Shank pariatur strip steak, filet mignon aliqua pastrami cow magna ipsum velit andouille consequat burgdoggen.

    Short ribs anim ex nulla, in ut magna proident ullamco. Doner dolore ribeye prosciutto, bacon beef ribs buffalo hamburger. Ham meatball in laboris cillum dolore. Exercitation pig dolore jerky chuck, sed venison deserunt reprehenderit quis ut. Elit veniam hamburger, andouille ad sint ball tip. Sunt sint et sausage in ut elit, hamburger aliqua lorem aute in dolore filet mignon. Adipisicing biltong doner tri-tip flank hamburger.

  • Header Title Two is a Little Bit Longer

    If an Instructional Student Assistant’s timesheet is not completed or approved during the entry/approval period, a “Late ISA Timesheet” must be completed in order to be paid.

    Download Late ISA Timesheet

    Irure qui culpa, aliqua esse ham hock fugiat velit pastrami labore. Alcatra pig aute sint burgdoggen turducken flank kevin commodo. Pork belly elit reprehenderit, voluptate proident pariatur eu ham hock spare ribs sed pancetta drumstick. Spare ribs ipsum bacon in fugiat biltong boudin. Duis tenderloin et ham hock, adipisicing ea rump voluptate pork chop meatball deserunt meatloaf ut dolore sausage.

    Sunt pork adipisicing, hamburger non short ribs burgdoggen ham hock veniam et filet mignon. Hamburger chicken non swine, leberkas corned beef porchetta jowl short loin meatball. Beef ribs turducken ad ribeye meatloaf do shankle landjaeger aute tongue. Shank pariatur strip steak, filet mignon aliqua pastrami cow magna ipsum velit andouille consequat burgdoggen.

    Short ribs anim ex nulla, in ut magna proident ullamco. Doner dolore ribeye prosciutto, bacon beef ribs buffalo hamburger. Ham meatball in laboris cillum dolore. Exercitation pig dolore jerky chuck, sed venison deserunt reprehenderit quis ut. Elit veniam hamburger, andouille ad sint ball tip. Sunt sint et sausage in ut elit, hamburger aliqua lorem aute in dolore filet mignon. Adipisicing biltong doner tri-tip flank hamburger.

See the Pen Accordion Small by AFD WEB (@AFD-WEB) on CodePen.

Callout

Callouts are used to bring focus to important content or to highlight an action. They can be very versatile and are used in many areas of the A&F web site.

Basic Callouts VIEW HTML HIDE HTML

This is a callout.

You can put anything you want inside it.

See the Pen Callouts by AFD WEB (@AFD-WEB) on CodePen.

Advanced Callouts VIEW HTML HIDE HTML

Callout floated right with button

Important

Spicy jalapeno bacon ipsum dolor amet chuck short ribs anim strip steak kielbasa pancetta. Eu t-bone chuck chicken ad. Ham hock tempor bacon rump, pastrami beef ribs chislic spare ribs picanha doner. Frankfurter nisi drumstick, ribeye eiusmod occaecat nulla picanha ham hock ut. Jowl drumstick prosciutto ut cillum andouille. Deserunt velit capicola occaecat, prosciutto anim hamburger frankfurter exercitation chislic in meatball in.

Callout with a head

This is a callout head

This is a primary callout with a 2 column grid inside.
  • Spicy jalapeno bacon ipsum dolor amet
  • Deserunt velit capicola occaecat
  • Frankfurter nisi drumstick, ribeye eiusmod
  • Meatball mollit ribeye
  • Pastrami beef ribs chislic spare ribs
  • Ham hock tempor bacon rump
  • Incididunt short loin occaecat
  • Porchetta flank salami minim

Callout with no padding

This is a callout head

Column Column 2
Data 1 Data 4
Data 2 Data 5
Data 3 Data 6

See the Pen Callout Advanced by AFD WEB (@AFD-WEB) on CodePen.

Forms

Forms are used to highlight downloaded content on your pages.

Forms Container VIEW HTML HIDE HTML

Basic Form Container

Department Documents and Forms

Advanced Form Container

Department Documents and Forms

Categorized Section

Categorized Section with Nesting

See the Pen Forms Container by AFD WEB (@AFD-WEB) on CodePen.