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
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
- List items with numbers
- List items with numbers
- List items with numbers
- List items with alphabet
- List items with alphabet
- List items with alphabet
See the Pen Text Content 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!My Favorite Icons
Icon | Icon Name |
fa-turtle | |
fa-burger-soda | |
fa-rocket-launch |
Icon Sizing
fa-2x | |
fa-4x | |
fa-6x |
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
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).
Your content goes here
Your content goes here
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).
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
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
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.
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
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.
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.
Advanced Callouts VIEW HTML HIDE HTML
Callout floated right with button
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.