ovh/ovh-ui-kit

automate bootstrap detection and set rem-base automatically.

mlarose opened this issue · 2 comments

mlarose commented

Context

Bootstrap overrides the rem-base to 10px. To use ovh-ui-kit in a project with bootstrap, you need to add some configuration to your project as outlined in the documentation.

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";

Is it possible to detect bootstrap (by variable) and set @rem-base accordingly?

jimmyfortinx commented

I searched through bootstrap variables and nothing could be bootstrap-only. They use generic names for all variables.

Maybe we could use a custom variable like @ovh-ui-kit-enable-bootstrap: true ?

neolitec commented

We will have to detect Bootstrap version because version 2 does not need rem-base(10px) to be declared (html element has font-size set to 100%).