Download and setup

Common web template resources

Template frameworks core code without sample content
State web template website with all sample content
CDN (content delivery network)

Here are the steps to follow when implementing the V6 State Web Template.

Template implementation roadmap

These are the high-level steps to take when you upgrade to the latest template.

  1. Back up your current site

    Before you start, save a copy of your current site. If there’s an issue, you won’t lose your current site.

  2. Select a framework

    Current frameworks include HTML, Eleventy, NET core, MVC, and React. You’ll usually pick the framework you’re currently on.

  3. Understand the differences in the code and HTML structure

    You’ll want to compare your current CSS and JS files to the state template’s files (especially if you have custom styles). This helps you understand the work you need to do. Learn how to do a code comparison in GitHub.

    This may affect your HTML, requiring structural code updates.

  4. Download or clone the State Web Template from GitHub

    You can clone it from our Template GitHub Repository.

    You can also download or access the different frameworks. Review Common web template resources. This is also a good time to have your security office perform a scan of the files.

  5. Look for CSS, JavaScript, and structural changes

    Most changes are made in:

    • The CSS and JavaScript source files in the /src/scss/ and /src/js/ folders
    • Includes and modules folders /src/_includes/ and /src/_includes/modules/
  6. Replace older library files with the updated ones

    The web template has CSS and JavaScript (JS) code base. You will replace these source files with newer ones or point to the corresponding CDN links found on the state web template CDN page. If you have a custom CSS or JS code, you may need to update that too. Keep your customizations separate from the core template source code for an easier update process.

  7. Integrate the new template into your environment

    From your code comparison, make the necessary changes and updates to your code. Usually, incremental versions will not require any structural template adjustments. You only need to replace core CSS and JS files or update the CDN links.

  8. Perform necessary tests and reviews

    After core source code has been updated, you should thoroughly review and test your website or web application. This includes QA, code and heuristic reviews, and accessibility testing. Do not forget to inspect for code level errors or conflicts.

  9. Release to production

    Yay! You’re now ready to follow your organization's change management and release process. You may want to QA every web page and get more people to verify that everything works as expected. Sometimes releasing to production produces some bugs.

Folder structure and files

  • _site: Contains the output files.
  • Pages: The site’s web pages are saved here. These are the pages a developer or content editor can edit.
  • src: Source folder. Contains includes, modules, fonts, images, SCSS and JavaScript files.
  • Images: Contains all the images used by the website.
  • js: Contains JavaScript files used by the website. Third party JavaScript libraries are also included in this folder.
  • _includes: Contains the common template components or code used on some or all pages on the website. Examples: header, footer, navigation, etc.).
StateTemplate/
 ├── _site/
 └── pages/
     ├── index.html
     └── etc...
         └── sample/
             ├── accordions.html
             ├── color.html
             └── etc...
 └── src/
     └── _includes/
          ├── global-footer.njk
          ├── etc...
          └── layouts/
          ├── base.njc
          └── etc...
          └── modules/
              ├── accordion.html
              └── etc...
     └── fonts/
     └── images/
     └── js/
     └── scss/
 ├── eleventy.js
 ├── package.json
 └── rollup.config.js

Using Eleventy

Step 1. Clone or download the template for GitHub

Clone: State Web Template GitHub Repository
Download: Latest template releases for download
Framework: Eleventy framework

Step 2. Set up your pages

To start, you can use the sample State Template web pages. If your website doesn’t use NPM or Eleventy, you can use these clean starter template codes:

Step 3. Install Node.js

Make sure your local machine has Node installed. To see if Node is installed, open Windows Command Prompt, Powershell or a similar command line tool. Type:

node -v

This should print the version number. If you don’t have Node, you can download it from nodejs.org and install it.

Step 4. Use NPM to run the state web template locally

1. Use this command to install all the necessary npm packages to your local website directory.
npm install
            
2. Use this command to build and generate your website's pages, css and js files.
npm run build
            
3. Use this command to run the website in your http://localhost:8080/ and watch for any updates you are making to webpages or scss and js files.
npm run start
            

Output

All web content is generated into the /_site/ folder, which is the website's final output folder.

Documentation for Eleventy

CSS

State Web Template core css files are generated from SASS files. They can be found in the /src/scss/ folder. Multiple SASS files are compiled during the build process into core output CSS files. They are generated in the /_site/css/ folder. A State Web Template webpage requires these two CSS files:

<link rel="stylesheet" href="/css/cagov.core.css">
<link rel="stylesheet" href="/css/colortheme-oceanside.css">
Custom CSS

You can add global custom CSS into /src/scss/custom/custom.scss file. Those styles will be compiled into cagov.core.css file. There is also an option to apply custom CSS to a specific page. To do that you need to add your custom CSS file into /src/scss/custom/ folder and make reference to it in the page's front matter under customcss key. Here is an example:

---
title: California State Web Template
layout: landing.njk
customcss: /css/custom/homepage.css
---

JavaScript

A State Web Template webpage requires cagov.core.js JavaScript file to function. That file is generated by rollup.js processor from multiple JavaScript files that can be found in /src/js/ folder. If your website doesn't use a site generator place the following near the end of your pages, right before the closing </body> tag.

Includes

If you are using the eleventy site generator, you can build your page using the template include files. The template offers several common components (such as page headers, footers, navigation, etc.) using njk includes.

You can also add any other html or njk includes to your page like this:

{% include "../../src/_includes/modules/header-primary-banner.html" %}

The path to the module include is relative to the directory of your page.

Page layout options

State Web Template eleventy page generation codebase uses several layout page options.

Layout njk
Full-width landing.njk
Standard page page.njk
Narrower standard page version one-col.njk
Full width page with main navigation with icons navicons-landing.njk
Main navigation with icons navicons.njk
Search results page search.njk
Page with dynamic left side navigation components.njk

To use one of these options, you need to specify the layout key in your front matter data at the beginning of your page.

---
title: Your page title
layout: page.njk
---