What you need to know about the Design System depends on your role and discipline.
7 | 8 | ## Developers 9 | 10 | Learn [what’s different](/technical-approach/) about California’s Design System approach and how to install components. Learn about [Design System webpage structure](/structure/) and layout options. 11 | 12 | ## UX and visual designers 13 | 14 | Start with the [visual design style guide](/style/design/). Learn about the [UI components](/components/) you can incorporate into your design. 15 | 16 | ## Everyone 17 | 18 | Everyone can benefit from the [Design System principles](/principles/). 19 | -------------------------------------------------------------------------------- /docs/pages/guides.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Guides 3 | --- -------------------------------------------------------------------------------- /docs/pages/pages.11tydata.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | layout: 'page', 3 | eleventyComputed: { 4 | permalink: (article) => 5 | `${article.page.filePathStem.replace('/docs/pages', '')}/index.html`, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /docs/site/_data/componentSets.js: -------------------------------------------------------------------------------- 1 | const components = require('./editable/components.json'); 2 | 3 | const filterByType = (type) => 4 | Object.entries(components).reduce((bucket, [key, properties]) => { 5 | if (properties.type === type) { 6 | bucket.push({ 7 | slug: key, 8 | ...properties, 9 | }); 10 | } 11 | return bucket; 12 | }, []); 13 | 14 | module.exports = { 15 | structural: filterByType('structural'), 16 | navigation: filterByType('navigation'), 17 | visual: filterByType('visual'), 18 | content: filterByType('content'), 19 | }; 20 | -------------------------------------------------------------------------------- /docs/site/_data/description.js: -------------------------------------------------------------------------------- 1 | const defaults = require('./editable/defaults.json'); 2 | 3 | module.exports = defaults.page.description; 4 | -------------------------------------------------------------------------------- /docs/site/_data/editable/componentStages.json: -------------------------------------------------------------------------------- 1 | { 2 | "In research": { 3 | "description": "In research components have not been thoroughly tested by developers. Learn more about component maturity." 4 | }, 5 | "Alpha": { 6 | "description": "Alpha components have not been thoroughly tested by developers. Learn more about component maturity." 7 | }, 8 | "Beta": { 9 | "description": "Learn more about component maturity." 10 | }, 11 | "Production": { 12 | "description": "Learn more about component maturity." 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docs/site/_data/editable/defaults.json: -------------------------------------------------------------------------------- 1 | { 2 | "site": { 3 | "name": "California Design System", 4 | "keywords": "California, government, design system" 5 | }, 6 | "page": { 7 | "description": "California Design System", 8 | "social_image_path": "/img/thumbnail.png", 9 | "social_image_width": 500, 10 | "social_image_height": 500, 11 | "social_image_alt_text": "California Design System" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /docs/site/_data/env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dev: process.env.NODE_ENV === 'development', 3 | }; 4 | -------------------------------------------------------------------------------- /docs/site/_data/layout.js: -------------------------------------------------------------------------------- 1 | // A default layout for all pages. 2 | module.exports = 'landing'; 3 | -------------------------------------------------------------------------------- /docs/site/_data/metadata.js: -------------------------------------------------------------------------------- 1 | const defaults = require('./editable/defaults.json'); 2 | 3 | // Note that several metadata properties need to be in EleventyComputed. 4 | // See ./eleventyComputed.js. 5 | module.exports = { 6 | site_name: defaults.site.name, 7 | social_image_width: defaults.page.social_image_width, 8 | social_image_height: defaults.page.social_image_height, 9 | social_image_alt_text: defaults.page.social_image_alt_text, 10 | }; 11 | -------------------------------------------------------------------------------- /docs/site/_data/root.js: -------------------------------------------------------------------------------- 1 | const defaultRoot = 2 | process.env.NODE_ENV === 'development' 3 | ? 'http://localhost:8080' 4 | : 'https://designsystem.webstandards.ca.gov'; 5 | 6 | module.exports = process.env.ROOT || defaultRoot; 7 | -------------------------------------------------------------------------------- /docs/site/_data/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "urls": { 3 | "/markdown/": { "exclude": true }, 4 | "/front-matter/": { "exclude": true } 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /docs/site/_includes/layouts/page.njk: -------------------------------------------------------------------------------- 1 | {% extends "layouts/index.njk" %} 2 | {% block content %} 3 |{{ principle.description | safe }}
7 |8 |10 |{{ principle.example | safe }}
9 |
13 | Try going to our homepage. There are also great resources, especially for content design, at the Office of Data and Innovation's Innovation Hub. 14 |
15 |
16 |