Assignments

Style Guide

Purpose of this Style Guide:

The purpose of this style guide is to inform anyone potential developers on how exactly each page on this site should be designed and coded. Having a style guide makes developing easier, for one for the developer, and two for the audience. Making all the pages of the site designed the same will make it easier for the audience to look at and to navigate through the site.

First we start with the Musts:

  • All pages must be in accordance to xhtml standards.
  • All pages must be valid and well-formed.
  • All pages must be not display any inappropriate or obscene material.
  • All pages must be compiled using the stated Divs listed below.

Divs:

  • Each section of the site are seperated into Divs. Changes must be made in the respective Div.
  • Divs are: header, navi, subnavi, content, aside, and footer.

Header:

  • The Header will contain the name of the site (CaseySchumacher.com), the font, size, color, will remain constant.
  • The Site Name's font style will be Cooper Black, with size of 40, and color as #000000.
  • The background color will fade, top to bottom, from white to #0000FF.
  • The background can be made as an image and repeated throughout the width, since its just color fading; it should match up.
  • The Header will be 100% wide and a height of 1inch.
  • The Header's very top left will have the logo for the site. The logo is "CS". The Image will be made at a later time.

Navigation:

  • The Navigation bar should be always under the site header; which will be discussed later (or discussed previous).
  • The Navigation will hold the main navigation links of: Home, Assignments, About Me, and Portfolio.
  • The Navigation's text style will be Verdana at size 12.
  • The Navigation text color will be #000080 and will be underlined because it’s a link.
  • The Navigation background color will be silver, or #C0C0C0.
  • The Navigation bar will eventually become tabs and then will not need to be underlined.

Content:

  • The Content will be well-formed having only 1 <h1>, and <h2> and <h3> will fall in place with eachother.
  • The Content's text style will be Verdana at size 12.
  • The Content's color will be Black.
  • Only the Content's <h1> header can be a different font and color than the rest of the Content.
  • The acceptable font style and color change for the <h1> is Courier and #000080.
  • The Content will remain at 80% of the width of the browser.

SubNavigation:

  • The SubNavi's links will change with each different section of the website (navigation links).
  • The SubNavi will keep the same font size and font throughout. These are Verdana and 12, respectively.
  • The SubNavi links will have a font color of #000000.
  • The SubNavi background will keep the same color also, it will remain #808080 throughout.
  • The SubNavi Links will be Underlined, due to they being links.
  • The SubNavi will remain at 10% of the width of the browser, and will stay on the far left side of the page.

Aside:

  • The Aside will be used for personal fun stuff, ie picture slideshow, or images, etc.
  • The Aside will have the same background color as the SubNavi, #808080.
  • The Aside will remain at the remaining 10% of the browser, and will stay to the far right of the page.

Footer:

  • The Footer will contain tools and legal statement.
  • The Footer will reside under the SubNavi, Content, and Aside.
  • The Footer will have a font style of Verdana , size of 8, and color of #FFFFFF.
  • The Footer will have a background color of #000080.
  • The Footer will have a height of .5 inch.