hds-core-test v0.4.2
hds-core
Base styles and individual HTML component styles for the Helsinki Design System.
Getting started
What's included
hds-core/
├── examples/ # html example pages using core components
├── src/ # source css
└── lib/
├── components/ # collection of HDS component styles
│ ├── all.css # bundled stylesheet including all components
│ ├── <component name>.css # individual component stylesheet
│ :
│
├── icons/ # collection of HDS icon styles
│ ├── all.css # bundled stylesheet including all icons
│ ├── icon.css # base styles for icons
│ ├── icon-<icon name>.css # individual icon stylesheet
│ :
│
├── utils/ # utility stylesheets
├── variables/ # collection of css variables and base styles
├── helsinki.css # default theme
└── engel.css # example alternative theme
Installing the package from npm:
$ yarn add hds-core
Using the styles
At the minimum you'll need two stylesheets to use the core components: helsinki.css
(the base theme) and components/all.css
. If you use any of the icons, you'll also need icons/all.css
. Do note that the all.css
-files bundle all the components and icons into single stylesheets and thus are large in filesize.
Therefore, we do recommend that you use individual stylesheets where needed. For reference, see the files in examples
folder. For example buttons.html.
Helsinki fonts
Due to copyright reasons the Helsinki fonts are not included in the package. To test your implementation you can use the example_fonts
stylesheet in examples/css/example_fonts.css.
Overriding styles
Helsinki Design System uses a number of CSS variables to control coloring and layout. You can override these variables where needed. See the alternative theme (Engel)src/engel.css for an example.
Built with
- PostCSS
- hds-core follows the BEM methodology
4 years ago