Download and setup

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.

   • Structural elements
   • Components
   • Patterns

   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

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

npm install
            

npm run build
            

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.

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
---