GD Business Unit Template Guide

This guide was created to provide an overview of the methods used to create the templates for the business unit websites.

Templates

• Home Page
• Interior Page
• Style Guide

Download

Click the links below to download the template files. The files can be downloaded as a zip or tar.gz file. The package contains the files necessary for the template home and interior page layouts, as well as an Adobe Photoshop layered file.

• gdtemplates.zip
• gdtemplates.tgz

External Libraries and Plug-ins

Modern, responsive web development often requires the use of javascript libraries, web fonts and custom cascading style sheets (CSS) to properly display web content across different devices and platforms.

JavaScript

• jQuery | Cross-platform JavaScript library
• moderizr.js | Used for feature detection and touchevents
• conformity.js | jQuery plugin for equal height elements based on row
• Owl Carousel | Plugin for slideshow functionality

Web Fonts

• Lato – 300, 300 italic, 400, 400 italic, 700, 700 italic

CSS

• Font Awesome | Icon Font Set

SASS

Our development team uses SASS as a scripting language to create our custom CSS. SASS allows developers to use things like variables, nested rules, inline imports and more. It also helps to keep things organized and allows you to create stylesheets faster. Learn more about SASS at http://sass-lang.com.

SASS requires that your development environment be able to compile the SASS into CSS. Learn more about how to configure at http://sass-lang.com/install.

However, if you would prefer to work directly with the CSS, you can just ignore all of the SASS files and edit the styles.css file directly.

About the Layout

Template Wrappers

There are two wrappers used in this template. One displays content full-width:

<div class="container"></div>

The other is used to restrict content to a certain width:

<div class="inner-wrapper"></div>

When creating a page, the wrappers should be used in conjuction, like so:

<div class="container"> <div class="inner-wrapper"> Page content goes here. </div> </div>

Singularity.gs

This template uses the Singularity grid system. Please view Spanning the Grid for info on how to use the grid-span mixin. Listed below are the mixins that come packaged with this template. Additional options can easily be added in the _custom.scss file.

Column Layouts

This template also comes packaged with the ability to create column layouts. Add the class "column-#" to the wrapper div and styling will be applied to the interior divs. Listed below are the classes that come packaged with this template. Additional classes can be added in the _custom.scss file. Add "eqheight" class to ensure column items all have the same height.

.column-2

.column-3

.column-4