import {Meta} from '@storybook/addon-docs';
import Code from './assets/code-brackets.svg';
import Colors from './assets/colors.svg';
import Comments from './assets/comments.svg';
import Direction from './assets/direction.svg';
import Flow from './assets/flow.svg';
import Plugin from './assets/plugin.svg';
import Repo from './assets/repo.svg';
import StackAlt from './assets/stackalt.svg';

<Meta title="Started/Introduction" />

# Welcome to FFWD UI

Component-driven UI framework across FFWD products.

The Introduction is still in progress…

# CSS

This project uses [**Stylus**](https://stylus-lang.com/) as a CSS pre-processor. **Rollup** and one of its plugins **PostCSS** will help in the compliation stage.
Defaultly an imported `*.module.styl` file is expected for each UI component. Both Vite(for Storybook development stage) and PostCSS(for libs distributing stage) will take care of `*.module.styl` as a CSS module when compling.

## Things need to know
> CSS class name must be in camel case.

This constraint makes sure the style development flow keep clear in compiling stage.
For instance, VSCode plugin **CSS Modules** supports converting **kebab case** into **camel case** in code intelligence, which is fine when you coding. However, that convertion only happens in a runtime, meaning you will have to make sure the compiler process the convertion as well when distributing. FFWD UI includes two building flows, which are Vite and Rollup, if you write class name as **kebab case**, you will have to take care of both compilers to handle the naming convertion, which would easily cause potential styling issues. Follow the convention of using **camel case** on CSS class name is a big save.