@cagovweb/state-template
v6.3.1
Published
California State Web Template NPM Package
Downloads
361
Readme
California State Web Template NPM Package
This is the NPM Package for the California State Web Template, an HTML template and website standard offered by the California Department of Technology to state agencies and departments within the State of California and beyond.
The California State Web Template is designed to promote a responsive and standard look and feel to ensure a uniform user experience across state entities. The web template includes many usability, security and accessibility requirements and is updated regularly to meet evolving industry standards and best practices.
The state web template is an open source project which you can find on the CA Office of Digital Services GitHub repository. There are various technology versions of the web template available for consumption. Collaboration is highly encouraged and user feedback and contributions are always considered and often implemented.
This package is based on Bootstrap v5.3.0
How to use
React
Option 1 - default theme
//import with default Oceanside theme - includes core JS and CSS
import "@cagovweb/state-template";Option 2 - specific theme
//import with specific theme
//Core CSS first
import "@cagovweb/state-template/dist/css/cagov.core.css";
//Choose Theme
import "@cagovweb/state-template/dist/css/colortheme-oceanside.css";
//Core JS last
import "@cagovweb/state-template/dist/js/cagov.core.js";.Net Core (Visual Studio)
You can use Library Manager (LibMan) to automatically sync the client JS/CSS with your Visual Studio projects.
Create libman.json in your project root folder
{
"version": "1.0",
"libraries": [
{
"provider": "jsdelivr",
"library": "@cagovweb/state-template@latest",
"destination": "wwwroot/lib/state-template/"
}
]
}In your layout files you can reference the files in the lib folder
<link href="~/lib/state-template/dist/css/cagov.core.min.css" rel="stylesheet">
<link href="~/lib/state-template/dist/css/colortheme-oceanside.min.css" rel="stylesheet">
<script src="~/lib/state-template/dist/js/cagov.core.min.js"></script>Eleventy
.eleventy.js (see reference)
module.exports = function(eleventyConfig) {
// Copy state template core files to site output
eleventyConfig.addPassthroughCopy({
"node_modules/@cagovweb/state-template/dist": "state-template"
});
};At references in your template files
<head>
...
<link rel="stylesheet" href="state-template/css/cagov.core.min.css"/>
<link rel="stylesheet" href="state-template/css/colortheme-oceanside.min.css"/>
<script type="text/javascript" src="state-template/js/cagov.core.min.js"></script>
</head>Documentation
For more information on how to use the state web template, please visit webstandards.ca.gov. There you will find documentation on how to get started, how to customize the template, how to follow the web standards and best practices, and how to join the community of web developers and designers working with the state web template.
You can also visit template.webstandards.ca.gov to see examples of websites built with the state web template and learn more about the upcoming design system that will replace the state web template in the future.
License
The state web template is licensed under the MIT License. See LICENSE for details.
Status
