Download and setup
Common web template resources
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.
- 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.
- Select a framework
Current frameworks include HTML, Eleventy, NET core, MVC, and React. You’ll usually pick the framework you’re currently on.
- 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.
- 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.
- 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/
- The CSS and JavaScript source files in the
- 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.
- 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.
- 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.
- 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
npm install
npm run build
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 ---