The Style Guide
This is the style guide. It’s a quick intro to the visual style for your new site! So, whenever someone asks, “what color was that?” Or you find yourself pondering which icon might work best for a button … Or you want a little light reading on how to use the CMS to update this site. You’ve stumbled upon the right place.
Jump to:
Logos
There are several variations of the logo available for download. There are light and dark text variations with and without the “Elementary School PTA” text included. Each variation comes with four file types: 2 sizes of PNG (for web and use in Word documents), and SVG and EPS files (for printing at any size).
This is an h1 heading
This is an h2 heading
This is an h3 heading
This is an h4 heading
This is an h5 heading
This is an h6 heading
I recommend never using an h1 or h2 heading within your content. For the best structure, the site’s title (the logo at the top of the page) is set as the only h1. Page titles are set automatically as an h2. For the remainder of your content, I recommend starting with h3 and working down from there as sections “nest” within.
Paragraphs are long-ish bodies of text that define the majority of written content. Try to keep paragraphs to no more than 5 sentences. Each paragraph should focus on a single concept. It shouldn't overstay its welcome.
Some text may have different inline styles, like bold concepts.
Other sections of text may need a different style of emphasis. Because
this is the web, there will be plenty of links.
There's a change that paragraphs may even contain a little bit of <code>.
- This is an unordered list.
- Lists contain similar, delineated content.
- Use unordered lists when the order of content doesn't matter.
- Think ingredients or packing lists
- Use ordered lists for sequential information.
- Each item in the list should build on the previous.
- Much better than this list.
- Think recipes or order of award recipients (first place, second place, etc.)
| Title | Name | |
|---|---|---|
| President | Sue Miyashita | president@elespta.com |
| 1st VP - Programs | Ann Marie Griffith | programs@elespta.com |
| 2nd VP - Fundraising | Kris Perini | fundraising@elespta.com |
| 3rd VP - Volunteers | Michele Sherrod | volunteers@elespta.com |
| 4th VP - Public Relations | Sara Gulosh | publicrelations@elespta.com |
| Secretary | Bradi Ertel | secretary@elespta.com |
| Treasurer | Robin Vickers | treasurer@elespta.com |
| Principal | Cindy Foust | cefoust@henrico.k12.va.us |
Colors
-
Blue#06c rgba(0,102,204,1)
-
Teal#00cca6 rgba(0,205,166,1)
-
Purple#583774 rgba(88,55,116,1)
-
Yellow#f1ce2e rgba(241,206,46,1)
-
Light Blue#c0d9f3 rgba(192,217,243,1)
-
Dark Blue#00468c rgba(0,70,140,1)
-
Tan#dfdace rgba(223,218,206,1)
-
Dark Grey#494c4f rgba(73,76,79,1)
Iconography
Icons add visual interest and emotional impact. They should mostly be used with elements that are interactive, like buttons and navigation, to draw the user's attention.
Navigation
- pta-programs
- pta-volunteer
- pta-funds
- pta-news
- pta-events
- pta-about
News & Events Categories
- pta-academic For academic calendar/news
- pta-drink For social events
- pta-ideas For PTA meetings
- pta-megaphone For spirit nights
- pta-star For spotlight
Fundraising Icons
- pta-swag
- pta-shop
- pta-money
Social / Contact Icons
- pta-facebook
- pta-twitter
- pta-mail
Miscellaneous Icons
- pta-gem
- pta-green
- pta-heart
- pta-like
- pta-location
- pta-next
- pta-pencil
- pta-photo
- pta-plane
- pta-previous
- pta-search
- pta-wallet
- pta-world
The Grid
To create a section of gridded content, first create a <div> with
a class of row. Then add divs within with a class of column
or columns and a corresponding number (as represented below). There are
twelve segments to the grid so the columns should add up to twelve.
You can also use offset-two to leave blank space to the left
of a column. Or you can use push-two and pull-two
to swap the order columns. (Useful if you want content to appear to the left on desktop and
below on mobile).
.six.push-six
.six.pull-six
You can also have separate grid classes for different resolutions by adding sm-,
md-, and lg- in front of the sizes, offsets, and push/pull classes.
The smallest grid has 4 columns, and the medium and large grids both still have 12.
Style Guide
A brief guide to the basic visual styles for the site, including typography, colors, iconography, elements, and the grid.
Using the CMS
A quick introduction to editing the site using the Craft CMS, including how to post news and events and create new pages.
On Blocks
A step-by-step intro to block components and their various permutations, with annotated examples of each.