# Goal Build a framework with reusable Vue components for GitLab so that we can accelerate frontend development and maintain UI consistency. We want to have one framework which can then be reused in the CE/EE repos and maybe in external frontend repos if this makes sense in the future. The output should be a main framework JS file (which contains Basic components + Utils) and Single component files for bigger controls which are not used that often for single imports (for example `import glContentViewer from 'gitlab-ui/es/components/content_viewer'`. The framework will contain: * Basic components (those will be globally registered with Vue.use as they will be used throughout) * Button, Badge, Card, Form, etc from vue-bootstrap which will be wrapped * GitLab Components that are widely used: Icon, FileIcon, ClipboardButton, etc. * Single Components (Single imported as they most probably have also dependencies to other Libraries * For Example ContentViewer -> PDFViewer  # Basic Roadmap 1. :white\_check\_mark: [GitLab CE/EE] Upgrade to Bootstrap 4 - Completed in https://gitlab.com/gitlab-org/gitlab-ce/issues/45185 - Bootstrap 4 board for fixing bugs created by the upgrade - https://gitlab.com/groups/gitlab-org/-/boards/614034 1. :white\_check\_mark: Create new project to store UI components - https://gitlab.com/gitlab-org/frontend/gitlab-ui 1. CSS Setup - gitlab-org/frontend/gitlab-ui#5 1. Webpack/Built Setup - gitlab-org/frontend/gitlab-ui#9 1. NPM Setup - gitlab-org/frontend/gitlab-ui#4 1. Wrap First Bootstrap Vue component - gitlab-org/frontend/gitlab-ui#11 1. [GitLab CE/EE] Add UI Components as a dependency and use the first Component 1. [GitLab CE/EE] Move Vue shared components to our UI Components repo - gitlab-org/frontend/gitlab-ui#10 1. Create automated documentation from components - gitlab-org/frontend/gitlab-ui#6 1. Merge component documentation into design.gitlab.com - gitlab-org/frontend/gitlab-ui#7 1. Full component testing pipeline - gitlab-org/frontend/gitlab-ui#8 1. Visual Regression Testing for single components - gitlab-org/frontend/gitlab-ui#12 1. Create Storybook for components (For development team) - gitlab-org/frontend/gitlab-ui#13 As soon as we have the basic roadmap fulfilled and a good workflow we can then port more and more components to gitlab-ui, at the beginning I would suggest 3 of each kind so we can see a couple of different cases. #### CSS Lab topics 1. Finish markdown typography CSS in csslab 1. Document markdown typography in design.gitlab.com 1. Implement markdown typography changes in GitLab