Base Lightspeed helpers and components CSS
npm install @lightspeed/flame-cssA pure CSS alternative offering to basic Flame React components.
@TODO:
- [ ] Hook flame-tokens/flame-foundations as primary variables
- [x] Storybook setup
- [x] Write all stories
- [ ] Visual Snapshot testing
You will need to import the .css file into the root of your app.
Before doing so, please ensure you have the appropriate loaders before importing a .css file
If you never added style-loader into your webpack config, we recommend you follow the instructions provided by
the style-loader webpack documentation.
Once done, you will want to import this at the root of your application
``js`
// index.js
import '@lightspeed/flame-css/dist/css/style.min.css';
The Flame design system uses Lato as it's primary font.
Add this tag to your
to load the required fonts:`html
href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext"
rel="stylesheet"
/>
`Additionally, you will need to set your application html/body to use these fonts.
The following is the recommended font-stack to use:
`css
html,
body {
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
}
`Caveat
Although we are bundling the sass source code, for the most part, you should only be using the generated css file.
flame-css is not meant to be a complete replacement to flame, as it lacks many more complex functionalities
that just are not possible without some front-end framework.However,
flame-css` provides all the necessary basic components and basic utility functions to build out the complex functionalities in whatever framework you choose.