This is our [gitlab-ui](https://gitlab.com/gitlab-org/gitlab-ui) roadmap which contains our CSS Cleanup/Restructuring and the implementation of Reusable Components based on our design system. gitlab-ui will from now on have our **base CSS implementation and all reusable components** in one package to group all efforts of generic styling in one UI project. ## CSS Roadmap 1. **“Stop the cascading”** - Implementation of rules how we are doing CSS from here on * Stylelint * [x] Stylelint in pipeline * [x] [Style-lint per file](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/26409) * [x] [Style-lint GitLab specific in preparation of Refactoring](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/26409) * [ ] [Danger rules to warn about new additions to page css](https://gitlab.com/gitlab-org/gitlab-ce/issues/59532) * [ ] Documentation addition on components and utilities first * [ ] [SCSS Compilation move to Webpack](https://gitlab.com/gitlab-org/gitlab-ce/issues/29346) 2. **Spring cleaning** - Cleaning our current page specific implementation etc. through an async Hackathon (spend 1-2 days each) to minimize side effects for new implementations. Those tasks should reduce hopefully the page specific CSS by a lot and to an absolute minimum in the first place * We assign randomly page specific CSS files (perfect example with ee->ce integration issues) in the team, time boxed task,make decisions: * Reduce stylelint warnings to 0 for that file * Can we replace it with component or utility CSS? * Are there parts that we can delete? * Can we put it in a page specific bundle? * [ ] Test run with example issue for 1 file * [ ] Created Issues for all the page specific files * [ ] All files are done 3. **Future CSS** - Get a setup that we have the CSS close to the thing that we are working on. * Suggested new CSS setup * [ ] gitlab-ui * Bootstrap * Vue-Bootstrap * Move Component specific CSS from CE/EE to gitlab-ui * [ ] CE/EE * Import gitlab-ui SCSS * [x] [Include minimal required CSS](https://gitlab.com/gitlab-org/gitlab-ui/issues/160) * [x] [Share SCSS variables with JS](https://gitlab.com/gitlab-org/gitlab-ui/issues/165) * Page specific CSS (much less then right now) ## Component roadmap * [ ] [Wrap Vue-Bootstrap Components](https://gitlab.com/groups/gitlab-org/-/epics/574) * [ ] Style Vue-Bootstrap Components * [ ] [Move shared components from CE/EE to gitlab-ui](https://gitlab.com/groups/gitlab-org/-/epics/672) * [ ] Style Shared Components * [x] [Charts in gitlab-ui](https://gitlab.com/groups/gitlab-org/-/epics/673)