kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Add utility-first css section to fe docs

This commit is contained in:
Paul Slaughter 2019-05-14 11:08:53 -05:00
parent bb9f0f4f71
commit 631cf1e504
No known key found for this signature in database
GPG Key ID: DF5690803C68282A
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
doc/development/fe_guide/style_guide_scss.md
View File

@ -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`.