OVH UI Kit (Less)

A css toolkit for the OVH brand.

Installation

Dependencies

These dependency will be installed automatically:

• less-plugin-remcalc

Install with npm

npm install ovh-ui-kit

Install with yarn

yarn add ovh-ui-kit

Install with bower (deprecated)

bower install --save ovh-ui-kit

Usage

Integration

Use in HTML file

    ...
  <link rel="stylesheet" href="path/to/ovh-ui-kit/dist/oui.css">
    ...

Use with grunt and grunt-contrib-less

@import "path/to/ovh-ui-kit/packages/oui/stylekit";
 
// or you can import every component a-la-carte: 
 
@import "path/to/ovh-ui-kit/packages/oui-button/button";
@import "path/to/ovh-ui-kit/packages/oui-radio/radio";
@import "path/to/ovh-ui-kit/packages/oui-formfield/formfield";

Use with webpack and less-loader

Webpack provide the ~ prefix for package imports:

@import "~ovh-ui-kit/packages/oui/stylekit.less";
 
// or a-la-carte: 
 
@import "~ovh-ui-kit/packages/oui-button/button.less";
@import "~ovh-ui-kit/packages/oui-radio/radio.less";
@import "~ovh-ui-kit/packages/oui-formfield/formfield.less";

Use with bootstrap 3

For 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.

@import '~bootstrap/less/bootstrap';
 
// Sets rem-base to 10px because bootstrap sets font-size: 10px on the html element. 
@rem-base: rem-base(10px);
 
@import "~ovh-ui-kit/packages/oui/stylekit.less";

Develop

Run in development mode

1. Clone and install ovh-ui-kit

git clone https://github.com/ovh-ux/ovh-ui-kit.git
cd ovh-ui-kit
yarn install
yarn link

1. Run ovh-ui-kit with ovh-ui-kit-documentation

git clone https://github.com/ovh-ux/ovh-ui-kit-documentation.git
cd ovh-ui-kit-documentation
yarn install
yarn link ovh-ui-kit
yarn 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