Getting Started with California State Template

The following page includes examples of applying California State Template css, js and ssi files to a web page. Here are the steps you need to quickly set you your site with California State Template.

To get started you need to download Californis State Template from GitHub. Once downloaded, unzip the compressed folder and you’ll see something like this:

StateTemplate/
├── css/
│   ├── cagov.core.css
│   ├── cagov.font-only.css
│   ├── colorscheme-oceanside.css
│   └── Other color scheme css files
└── fonts/
	├── CaGov.eot
	└── etc.
└── images/
	├── cdfa_logo.png
	├── Ca-Gov-Logo-Gold.svg
	└── etc.
└── js/
	├── cagov.core.js
	├── search.js
	└── libs/ Folder with all thrid party js libraties and plugins
└── sample/ Folder with all the sample html files and modules
└── source/ Folder with all the source scss and js files
└── ssi/ Folder with all the server side includes
└── templates/ Folder with dreamweaver template files

Before moving forward let's assume that your website has similar folder stucture. For more information about State Template's structure go to our Structure page.

CSS

Copy-paste the stylesheet links into your <head> before all other stylesheets to load our CSS.

<link href='https://fonts.googleapis.com/css?family=Asap+Condensed:400,600|Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/v6.5/css/cagov.core.css">
<link rel="stylesheet" href="/v6.5/css/colorscheme-oceanside.css">

colorscheme-oceanside.css can be replaced with a color scheme file of your choice.

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery and our own cagov.core.js. Place the following <script>s in the <head> section right after stylesheet links.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js"></script>

Finally, place the rest of js reffernces near the end of your pages, right before the closing </body> tag

<script src="/js/cagov.core.js"></script>

Note: Load your website faster by using State Template CDN

Clean Starter Template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link href='https://fonts.googleapis.com/css?family=Asap+Condensed:400,600|Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

		<!-- State Template CSS -->
		<link rel="stylesheet" href="/v6.5/css/cagov.core.css">
		<link rel="stylesheet" href="/v6.5/css/colorscheme-oceanside.css">

		<title>California State Webpage</title>
		<!-- Required JS -->
		<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
		<script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js" type="text/javascript"></script>
	</head>
	<body>
		<h1>California State Webpage</h1>
	   
		<!-- State Template JavaScript -->
		<script src="/js/cagov.core.js" ></script>
	</body>
</html>

Note: Template above does not include any State Template content, modules or server side includes.

Server Side Includes

Another way to set up the Californisa State Template web page is by using Server Side Includes. Several common components (such as page headers, footers, navigation, etc.) are included in pages using Server Side Includes (SSI). Here is code example using SSI in California State Template web page:

<!doctype html>
<html lang="en">
	 <head>
			<meta charset="utf-8">
			<title>State Template</title>
			<meta name="Author" content="State of California" />
			<meta name="Description" content="State of California" />
			<meta name="Keywords" content="California, government" />
			<!--#include virtual="/v6.5/ssi/head-css-js.html" -->
	</head>
	<body>
		  <header role="banner" id="header" class="global-header fixed">
				<div id="skip-to-content"><a href="#main-content">Skip to Main Content</a></div>
				<!--#include virtual="/v6.5/ssi/utility-header.html" -->
				<!--#include virtual="/v6.5/ssi/settings-bar.html" -->
				<!--#include virtual="/v6.5/ssi/branding.html" -->
				<!--#include virtual="/v6.5/ssi/mobile-controls.html" -->
				<div class="navigation-search">
					<!--#include virtual="/v6.5/ssi/navigation.html" -->
					<div id="head-search" class="search-container">
						<!--#include virtual="/v6.5/ssi/search.html" -->
					</div>
				</div>
				<div class="header-decoration"></div>
			</header>
			<div id="main-content" class="main-content">
				<div class="container">
					<main class="main-primary">
					Page content
					</main>
			   </div>
		   </div>
			<!--#include virtual="/v6.5/ssi/global-footer.html" -->
			<!--#include virtual="/v6.5/ssi/scripts.html" -->
	</body>
</html>

Note: The web server that hosts the State Template should be configured to process SSI's with the .html extension.

Getting Started with California State Template

Contents

CSS

JS

Clean Starter Template

Server Side Includes