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

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

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

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.

  • _site: Output website folder that contains the website's published output files and webpages.
    • css – This folder contains the minified CSS files that are generated through compilation of the CSCC files.
    • fonts – Contains icon fonts and type fonts used by the State Web Template.
    • images – This folder contains the structural images used by the State Web Template.
    • js – Contains the compiled, minified JavaScript files that are used by the State Web Template. Any third party JavaScript libraries are also included in this folder.
  • pages: This folder contains the site’s unpublished web pages. 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 uncompiled 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.).
    • scss: Contains all the raw SASS stylesheets files.
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.