State Web Template NPM package
You can use NPM JS code sharing registry to install the California State Web Template core package. It contains all the necessary State Web Template CSS, JavaScript, and fonts files.
How this works
The NPM package can be used by multiple frameworks such as React, .NET, eleventy, and others.
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 rel="stylesheet" href="~/lib/state-template/dist/css/cagov.core.min.css" > <link rel="stylesheet" href="~/lib/state-template/dist/css/colortheme-oceanside.min.css"> <script src="~/lib/state-template/dist/js/cagov.core.min.js"></script>
Eleventy
Add the following code into your eleventy.js file:
module.exports = function(eleventyConfig) {
// Copy state template core files to site output
eleventyConfig.addPassthroughCopy({
"node_modules/@cagovweb/state-template/dist": "state-template"
});
};Also, add these State Web Template's core CSS and JS files references into the head tag:
<head> ... <!-- State Web Template core files --> <link rel="stylesheet" href="/state-template/css/cagov.core.min.css"> <link rel="stylesheet" href="/state-template/css/colortheme-oceanside.css"> <script src="/state-template/js/cagov.core.min.js"></script> </head>
Documentation
For more information about the State Web Template NPM package and usage, visit the State Web Template NPM package page.