Eleventy

This is the simple and lightweight California State Web Template version that is using eleventy framework for site generation.

Using Eleventy

Step 1. Download the template from GitHub

Download: Latest template releases for download

Step 2. 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 3. 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/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.

Custom JS

You can import custom JS into /src/js/index.js file. Those scripts will be compiled into global cagov.core.js

There is also an option to apply custom JS to a specific page. To do that you need to add customjs key with paths array to your custom JS files in the page front matter like this:

External paths

---
title: California State Web Template
layout: landing.njk
customjs: ["https://path-to-your-script-1.js", "https://path-to-your-script-2.js"]
---

Local paths

add your custom JS files into /js/libs/ folder and make references to them in the page's front matter:

 ---
title: California State Web Template
layout: landing.njk
customjs: ["/js/libs/your-script-1.js", "/js/libs/your-script-2.js"]
---

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

If you would like to see a sample of the Eleventy Framework in action, visit the State Web Template website Github repository .

Folder structure and files

Discover what’s in the V6 State Web Template package.

StateTemplate/
├── _site/
   └── css/
   │   ├── cagov.core.css
   │   ├── cagov.font-only.css
   │   ├── colorscheme-oceanside.css
   │   └── Other color scheme css files
   └── fonts/
   │   ├── CaGov.eot
   │   └── etc.
   └── images/
   │   ├── template-logo.png
   │   ├── Ca-Gov-Logo-Gold.svg
   │   └── etc.
   └── js/
       ├── cagov.core.js
       ├── search.js
       └── libs/ 
   └── index.html
   └── etc...
└── 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
      

View the Legacy version for previous structure example.