OVH UI Kit (Less)
A css toolkit for the OVH brand.
Installation
Dependencies
These dependency will be installed automatically:
npm
Install withnpm install ovh-ui-kit
yarn
Install withyarn add ovh-ui-kit
bower (deprecated)
Install withbower install --save ovh-ui-kit
Usage
Integration
Use in HTML file
... ...
grunt and grunt-contrib-less
Use with "path/to/ovh-ui-kit/packages/oui/stylekit"; // or you can import every component a-la-carte: "path/to/ovh-ui-kit/packages/oui-button/button"; "path/to/ovh-ui-kit/packages/oui-radio/radio"; "path/to/ovh-ui-kit/packages/oui-formfield/formfield";
webpack and less-loader
Use withWebpack provide the ~
prefix for package imports:
"~ovh-ui-kit/packages/oui/stylekit.less"; // or a-la-carte: "~ovh-ui-kit/packages/oui-button/button.less"; "~ovh-ui-kit/packages/oui-radio/radio.less"; "~ovh-ui-kit/packages/oui-formfield/formfield.less";
bootstrap 3
Use withFor those who want to use ovh-ui-kit with bootstrap on the same project you need change
the rem-base
to 10px
otherwise components proportions will not be respected.
'~bootstrap/less/bootstrap'; // Sets rem-base to 10px because bootstrap sets font-size: 10px on the html element. @rem-base: rem-base10px; "~ovh-ui-kit/packages/oui/stylekit.less";
Develop
Run in development mode
- Clone and install
ovh-ui-kit
git clone https://github.com/ovh-ux/ovh-ui-kit.gitcd ovh-ui-kityarn installyarn link
- Run
ovh-ui-kit
with ovh-ui-kit-documentation
git clone https://github.com/ovh-ux/ovh-ui-kit-documentation.gitcd ovh-ui-kit-documentationyarn installyarn link ovh-ui-kityarn start
Hot reload
Once you have yarn start
-ed the project, you can edit anything with an automatic browser refresh as a result.
Contributing
You've developed a new cool feature? Fixed an annoying bug? We'd be happy to hear from you!
see CONTRIBUTING
And read this quick start.
Related links
- Contribute: https://github.com/ovh-ux/ovh-ui-kit/blob/master/CONTRIBUTING.md
- Report bugs: https://github.com/ovh-ux/ovh-ui-kit/issues
- Get latest version: https://github.com/ovh-ux/ovh-ui-kit
Documentation
Documentation is available from the packages/
folder, every package is self-documented throught a README.md
file.
License
See https://github.com/ovh-ux/ovh-ui-kit/blob/master/LICENSE