Include minimal required CSS
- gitlab-ui doesn't work standlone (requires CSS)
- current CSS import is very confusing both here and on design.gitlab
Idea
- Move Bootstrap CSS to gitlab-ui
- Add variables.scss (similar to Boostrap's) where all vars use
!default
- Replace all bootstrap imports in CE with
@import "@gitlab/ui"; /* node_modules/@gitlab/ui/style.scss */
We could then delete most of the variables.scss in CE if wanted, as they are defined here already.
Why
This will have no visible changes on CE side. What it does do:
- Answers the "where to put gitlab-ui styles" question
- Simplifies importing our components to design.gitlab (fixes https://gitlab.com/gitlab-org/design.gitlab.com/issues/234)
- Simplifies importing colors for JS use (helps #165 (closed))
- Makes gitlab-ui usable as a standalone project
Advocates
From @pslaughter
Whether we officially realize it or not,
gitlab-ui
is our extension ofbootstrap
(which should probably have been a fork from the start). It makes total sense for the client ofgitlab-ui
to easily import the CSS (bootstrap is just an implementation detail and should be bundled if it's a necessary dependency)
A commit in CE being able to break gitlab-ui (!149 (comment 132608527)) to me feels like we are doing dependency in the wrong direction / circular dependency.
🤔 Not sure what to do about it in the short term though.
From @samdbeckham #60 (comment 138816945)
Maybe the solution is to include CSS inside GitLab UI, at least to some degree. This is getting into our CSS discussion a little here, but what if we had all the base CSS in CE and started moving some of the component CSS into GitLab UI? The
.button
CSS, or the.badge
CSS for example. It would clean up application CSS, make CSS changes in GitLab UI easier, and potentially allow us to code-split our CSS (though that last point is an entirely uninformed conclusion).