Flame css

A 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

Installing

$3

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';
`

$3

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.