This package provides the necessary SCSS and fonts to utilize Odyssey, Okta's design system.
For guidance on how and when to implement individual components, please see our online docs.
dist/odyssey.css
- A precompiled version of Odyssey for those who don't need the benefits of Sass.
src/scss
- The SCSS source files for Odyssey, ready to be @import
'd into your project.
src/scss/odyssey.scss
- The main compilation sheet for Odyssey.
Using yarn:
$ yarn add @okta/odyssey
If you prefer npm, use the following command instead:
$ npm install --save @okta/odyssey
Usage of the Odyssey Sass files assumes the use of a SCSS pre-processor. All Sass files use the *.scss
file extension and syntax.
Make sure your asset pipeline utilizes autoprefixer to ensure vendor prefixes are automatically added to your compiled CSS.
To add a Odyssey to your build, import the compilation sheet directly.
@import 'node_modules/odyssey/src/scss/odyssey';
This will import all functions, mixins, abstracts, components, and layouts into your build.
If you are looking for a more limited selection, you can also import select components, etc individually.
Odyssey utilizes stylelint for our live linting as well as our lint tests.
You can check the current syntax rule configuration in stylelint.json
.