ed-hcds-components contains accessible code for building a user interface for Hennepin County digital products.
Contains HTML, CSS, and JS for each component
Contains combined CSS output from utilities and primitives
Precompiled CSS of all files. This file, along with JS files in some components, contain the complete design system.
This file does not contain any JS.
Contains variables for colors and spacing
Contains utility classes similar to Tailwind CSS
To use a component, copy and paste the component HTML into your project, then replace any placeholder text with real content. Adjust the component’s HTML and JS as needed to fit your project needs.
If you have any questions or issues, visit office hours on Tuesdays and Thursdays from 3 p.m. to 3:30 p.m., or submit a support ticket
axe Accessibility Linter Accessibility linting for HTML, Angular, React, Markdown, Vlue, and React Native
CSS Navigation Adds autocomplete and "Go to defintion" for CSS classes.
CSS Variable Autocomplete Adds autocomplete and "Go to defintion" for CSS variables.
Figma for VS Code Integrates Figma and VS Code.
htmltagwrap Highlight code then press alt+W to instantly wrap the selected in opening/closing brackets
Live Server Host a local server window inside VS Code, so that you don't need to switch between VS Code and browsers.
Prettier Use for code formatting. Currently using default settings.
Live Sass Compiler Use to update compiled CSS from index.scss after any file save in project.
Live Sass Compiler currently uses these settings
{
"telemetry.enableTelemetry": false,
"telemetry.enableCrashReporter": false,
"update.mode": "none",
"security.workspace.trust.untrustedFiles": "open",
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"liveServer.settings.donotShowInfoMsg": true,
"figma.autocompleteBlocks": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.useEditorConfig": false,
"git.autofetch": true,
"editor.wordWrap": "on",
"git.suggestSmartCommit": false,
"terminal.integrated.defaultProfile.windows": "Git Bash",
"liveSassCompile.settings.compileOnWatch": false,
"liveSassCompile.settings.watchOnLaunch": true,
"liveSassCompile.settings.useNewCompiler": true,
"liveSassCompile.settings.showOutputWindowOn": "Warning",
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/CSS",
"savePathReplacementPairs": null
},
{
"format": "compressed",
"extensionName": "min.css",
"savePath": "/CSS",
"savePathReplacementPairs": null,
"generateMap": null
}
],
"liveSassCompile.settings.excludeList": [
"/**/node_modules/**",
"/.vscode/**"
],
"liveSassCompile.settings.autoprefix": ["defaults"],
"window.zoomLevel": 2,
"liveSassCompile.settings.forceBaseDirectory": ""
}