State Template Structure

This section describes the high-level items that are included in the State Template package that will be provided to State agencies and departments through WebTools.

Example Pages

The California State Template is an HTML template and Sample Website offered by the California Office of Technology Services (OTECH) to various other agencies and departments within the State of California. The template allows OTECH to provide California Government entities with guidelines for how their websites should be created and developed, and allows OTECH to maintain consistent branding for State websites. The State Template is offered to other State entities through a website called WebTools.

The 2014 State Template was built to be very modular. Most components can be moved and swapped with other components. In some cases, one module might be used inside of another module for greater flexibility in presentation.

In some cases modules may look the same or similar visually, but their styles are kept separate to make them more flexible. This modular approach is what minimizes backwards compatibility concerns with future template updates.

Microdata

Adding microdata is the process of nesting additional metadata within content to provide machines (specifically web crawlers for search engines) with specific information about a piece of content. This allows for additional information to be presented in search engine results (such as “Rich Snippets” in the case of Google).

The new 2014 State Template implements microdata for certain modules (such as Events or News) that can have additional metadata associated with them. In these cases, examples of markup with microdata (using Schema.org attributes) have been included for those modules. The example list in the State Template package shows the modules that have microdata markup available, and the example pages provide a tabbed interface to choose between regular markup, and markup enhanced with microdata.

Server Side Iincludes

Several common components (such as page headers, footers, navigation, etc.) are included in pages using Server Side Includes (SSI). Note that the web server that hosts the State Template should be configured to process SSI's with the .html extension.

Icon Fonts

Icon Fonts are also included as part of the State Template. These icon fonts were developed by OTECH, with some additions from other sources.

The Sample Pages included with the State Template package include a list of available icon fonts, as well as instructions on how to use them in page markup.

Mime Type Configurations

Newer versions of IIS (such as 8.5) already have mime types defined for fonts. However, older versions may need to be configured to serve those mime types for fonts. The same may apply for other web servers such as Apache HTTP Server. Below is a list of the mime types that must be defined for the 2014 State Template.

  • .eot - application/vnd.ms-fontobject
  • .ttf - application/octet-stream
  • .svg - image/svg+xml
  • .woff - application/x-woff

File and Folder Structure

The following is the file and folder structure for the 2014 State Template package.

  • css – This folder contains the minified CSS files that are generated through compilation of the LESS files.
  • fonts – Contains icon fonts and type fonts used by the State Template.
  • images – This folder contains the structural images used by the State Template.
  • js – Contains the compiled, minified JavaScript files that are used by the State Template. Third party JavaScript libraries are also included in this folder.
  • sample – The “sample” folder contains various HTML files that provide example code and individual component documentation for the State Template.
  • ssi – This folder contains the common template components used on various pages in the State Template (for example, header, footers, navigation, etc.).
  • templates – Contains template files for the State Template that will be utilized by webmasters that use Adobe Dreamweaver.