The package is designed for two use cases:
remunit — however, this requires that the font size on the
htmlelement is set to
16px(default in all modern browsers).
It is also possible to load the bundled css files from a CDN:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@youseedk/dna/ys-bundle.min.css" />
will always load the latest version.
If a specific version is needed, insert the version number into the URL, ie.:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@email@example.com/ys-bundle.min.css" />
will load version 1.0.0.
The package is organized in the following structure:
dna/ ├── css/ │ ├── base │ ├── elements │ ├── icons │ ├── layout │ ├── settings ├── scss/ ├── svg/ ├── ys-bundle.css └── ys-bundle.min.css
The bundle files (
ys-bundle.min.css) is the only file you need to import if you want to add all elements from YouSee DNA. This is the quick and easy option, but it might not be preferable in some use cases. In those use cases the subfolders contain what’s needed for building a custom stylesheet that only contains the needed elements.
css folder contains minified css-files that can be imported into any build step.
css/base contains the bare minimums, and the
ys-base.css file is required for all use cases.
css/elements containes ui elements, such as buttons, input fields, typography, cards etc.
css/icons is needed if you choose to use the icon sprite or any of the SVG’s included.
css/layout is the grid.
css/settings includes CSS Custom Properties (also known as CSS variables) for colors, breakpoints etc.
scss folder contains scss-variables for colors, breakpoints etc.
svg contains all icons, both those used in the UI and the YouSee icon set, as seperate files and as two SVG sprites.