State Template v4

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.

As technologies evolve (for example, responsive design), OTECH performs a redesign of the State Template and offers it to State agencies and departments through WebTools. Previous versions of the State Template include the 2013 responsive design template, the 2010 fixed design template, and the 2007 fluid design template.

As part of the v.4 redesign of the California State Template, OTECH is now creating a new "semantic" version of the State Template. This template uses semantically named HTML 5 tags and CSS classes to provide greater flexibility when updating the State Template in the future. The overall goal is to be able to change the look-and-feel of the State template in the future through LESS and CSS, without having to drastically change the HTML markup. This would allow State entities to update their websites with greater ease when a new version of the State Template is released, and also provides them more incentive to do so.

State Template v4 provides major improvements and benefits:

  • Re-architected to utilize industry standard frameworks:
    • Bootstrap – for mobile first development

      Bootstrap is a commonly used front-end framework created by Twitter for creating websites. It basically provides scaffolding for page layouts and various templates for forms, buttons, navigation, and other commonly used website elements. Bootstrap also provides JavaScript for certain interactive functionality (such as dynamic navigation, hover effects, etc.). It also provides features for developing responsive websites.

      The 2014 State Template is built on top of Bootstrap to create the basic layout and look-and-feel of the State Template. Using this framework provides the scaffolding and templates that can be reused throughout the website, without having to define explicit markup and CSS for such commonly used elements. Bootstrap also utilizes LESS, allowing for the 2014 State Template to use semantically named classes that are based on Bootstrap classes.

      Learn more about Bootstrap

    • {Less} – extends the CSS language

      LESS is a dynamic stylesheet language that gets compiled to CSS that can be consumed by browsers. Using LESS over traditional CSS provides greater flexibility as LESS provides the ability to use variables, nesting, mixins, operators, and functions.

      For the 2014 State Template, LESS (combined with semantically named classes) is used to allow OTECH flexibility in enhancing the State Template, and also for changing the look-and-feel of future templates with greater ease over traditional CSS.

      Learn more about {Less}

    • GRUNT – javascript task runner

      Grunt is a JavaScript task runner that executes on top of the Node.js runtime environment. For the 2014 State Template, Grunt is used for performing the following tasks: Compiling LESS files into CSS files, Combining multiple CSS or JS files into a single CSS or JS file (to reduce the number of requests made by a browser), Minification of CSS and JS files (to reduce the size of files and thus bandwidth usage).

      Learn more about GRUNT

    • Node js – cross-platform runtime environment

      Node.js is an open source, cross-platform runtime environment that executes JavaScript code on the server-side (vs. client-side in a browser). For purposes of the development of the 2014 State Template, Node.js is used by applications such as Grunt, described in the next section.

      Learn more about Node js

    • HTML5 – markup and semantic elements
  • Fully mobile and responsive design now with layout breakpoints
  • Re-architected to support semantic microdata referencing schema.org
    • Enabling greater integrated answers from intelligent services:
      Siri, Google Now, Cortana, etc.
    • Enabling enhanced search results from the major search vendors
  • Because of standardized architecture and semantic markup, future migrations are significantly simplified!
  • Improved Accessibility due to utilizing industry frameworks and accessibility plugins including content semantics



For Your Information

The State Template v4 features a complete restructuring of the HTML markup, CSS, and JavaScript in addition to new content templates incorporating semantic naming conventions while preserving the familiar look-and-feel of the 2013 Responsive Template.

Additionally, technologies such as LESS were introduced and new content modules also added for State agencies and departments to utilize when developing their websites.

If you are interested in obtaining the uncompiled or source version of the State Template for testing and adding new functionality please contact us Here.

Download State Template v4


NOTE: The State Template Package available on WebTools has been compressed and optimized for better performance. This means that you will not see CSS files that are formatted in a standard and editable way as in the previous versions of the State Template. Detailed instructions about using the template are included in the State Template downloadable package and the Instructions Page.