diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2019-05-14 19:08:53 +0300 |
---|---|---|
committer | Paul Slaughter <pslaughter@gitlab.com> | 2019-05-14 19:13:22 +0300 |
commit | 631cf1e5042a0d533dfaf114de348e63aac78324 (patch) | |
tree | 971eb31e7cc51695d9d3f08290d7856b9fe35223 /doc/development/fe_guide | |
parent | bb9f0f4f71afa49a70853efef8760b70d2e3480c (diff) |
Add utility-first css section to fe docs
Diffstat (limited to 'doc/development/fe_guide')
-rw-r--r-- | doc/development/fe_guide/style_guide_scss.md | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/doc/development/fe_guide/style_guide_scss.md b/doc/development/fe_guide/style_guide_scss.md index 7a01ec3c84c..c0d078300bb 100644 --- a/doc/development/fe_guide/style_guide_scss.md +++ b/doc/development/fe_guide/style_guide_scss.md @@ -29,6 +29,25 @@ New utility classes should be added to [`utilities.scss`](https://gitlab.com/git - `{shade}` is on of the shades listed on [colors](https://design.gitlab.com/foundations/colors/) - `{size}` is a number from 1-6 from our [Type scale](https://design.gitlab.com/foundations/typography) +#### When should I create component classes? + +We recommend a "utility-first" approach. + +1. Start with utility classes. +2. If composing utility classes into a component class removes code duplication and encapsulates a clear responsibility, do it. + +This encourages an organic growth of component classes and prevents the creation of one-off unreusable classes. Also, the kind of classes that emerge from "utility-first" tend to be design-centered (e.g. `.button`, `.alert`, `.card`) rather than domain-centered (e.g. `.security-report-widget`, `.commit-header-icon`). + +Examples of component classes that were created using "utility-first" include: + +- [`.circle-icon-container`](https://gitlab.com/gitlab-org/gitlab-ce/blob/579fa8b8ec7eb38d40c96521f517c9dab8c3b97a/app/assets/stylesheets/framework/icons.scss#L85) +- [`.d-flex-center`](https://gitlab.com/gitlab-org/gitlab-ce/blob/900083d89cd6af391d26ab7922b3f64fa2839bef/app/assets/stylesheets/framework/common.scss#L425) + +Inspirations: + +- https://tailwindcss.com/docs/utility-first +- https://tailwindcss.com/docs/extracting-components + ### Naming Filenames should use `snake_case`. |