From 2c14662adf5d39a6364b4493419919793ebb7532 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 14 Jul 2017 16:35:18 -0700 Subject: [PATCH 1/5] bemify mixin --- package.json | 1 + .../src/global_styling/mixins/_bemify.scss | 15 +++++++++++++++ .../src/global_styling/mixins/_index.scss | 1 + 3 files changed, 17 insertions(+) create mode 100644 ui_framework/src/global_styling/mixins/_bemify.scss diff --git a/package.json b/package.json index b1a98b36fffc3..5d8db3c4e02ef 100644 --- a/package.json +++ b/package.json @@ -206,6 +206,7 @@ "@elastic/eslint-plugin-kibana-custom": "1.0.3", "angular-mocks": "1.4.7", "babel-eslint": "7.2.3", + "bemify": "0.1.4", "chai": "3.5.0", "chance": "1.0.6", "cheerio": "0.22.0", diff --git a/ui_framework/src/global_styling/mixins/_bemify.scss b/ui_framework/src/global_styling/mixins/_bemify.scss new file mode 100644 index 0000000000000..c5098cff3757b --- /dev/null +++ b/ui_framework/src/global_styling/mixins/_bemify.scss @@ -0,0 +1,15 @@ +// Bemify lets us use mixins to define namespacing +// https://github.com/franzheidl/bemify + +$state-prefix: null; + +@import '../../../../node_modules/bemify/sass/_bemify'; + +@mixin state($state) { + @at-root { + &.#{$state} { + @content; + } + } +} + diff --git a/ui_framework/src/global_styling/mixins/_index.scss b/ui_framework/src/global_styling/mixins/_index.scss index addb915b9770e..b75760d8db917 100644 --- a/ui_framework/src/global_styling/mixins/_index.scss +++ b/ui_framework/src/global_styling/mixins/_index.scss @@ -1,3 +1,4 @@ +@import 'bemify'; @import 'naming'; @import 'responsive'; @import 'typography'; From 27b0f3fe874c4e1c7ddf2cf47a631dd24a5f17a9 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 14 Jul 2017 16:53:26 -0700 Subject: [PATCH 2/5] styleguide addition --- style_guides/scss_style_guide.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md index 2b34238312adb..53375e2c4c622 100644 --- a/style_guides/scss_style_guide.md +++ b/style_guides/scss_style_guide.md @@ -15,6 +15,10 @@ Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sa The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using hex values. +### Bemify for namespacing + +We use the [bemify](https://github.com/franzheidl/bemify) for namespacing the sass into a BEM format. We use `component`, `child`, `modifier` and `state` as our mixin names. We've adjusted the plugin's state mixin so that you need to write out the full selector (`@include state('is-happening')`). + ## Dealing with extends Don't extend classes. The only time use should use an extend is when you are extending a placeholder. Even then, do it rarely and only for code maintainability. From 12dd3a9843ab8e468e07ca86b01507fc8251f86d Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Sat, 15 Jul 2017 14:09:45 -0700 Subject: [PATCH 3/5] styleguide example --- style_guides/scss_style_guide.md | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md index 53375e2c4c622..345521aa1a27e 100644 --- a/style_guides/scss_style_guide.md +++ b/style_guides/scss_style_guide.md @@ -19,6 +19,40 @@ hex values. We use the [bemify](https://github.com/franzheidl/bemify) for namespacing the sass into a BEM format. We use `component`, `child`, `modifier` and `state` as our mixin names. We've adjusted the plugin's state mixin so that you need to write out the full selector (`@include state('is-happening')`). +#### Example + +``` +// Generates .kuiBtn +@include component('kuiBtn') { + color: white; + background: gray; + padding: 20px; + + // Generates .kuiBtn__icon + @include child('icon') { + display: inline-block; + margin-right: 4px; + color: white; + + // Generates .kuiBtn_icon--danger + @include modifier('danger') { + color: red; + } + } + + // Generates .kuiBtn--primary + @include modifier('primary') { + background: blue; + } + + // Generates .kuiBtn.is-loading + @include state('is-loading') { + opacity: .5; + cursor: not-allowed; + } +} +``` + ## Dealing with extends Don't extend classes. The only time use should use an extend is when you are extending a placeholder. Even then, do it rarely and only for code maintainability. From 0d0f966adf42c513baf9a8b0fb7cdea3f31a6e46 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Sat, 15 Jul 2017 14:10:58 -0700 Subject: [PATCH 4/5] typo --- style_guides/scss_style_guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md index 345521aa1a27e..3859adf34aabf 100644 --- a/style_guides/scss_style_guide.md +++ b/style_guides/scss_style_guide.md @@ -34,7 +34,7 @@ We use the [bemify](https://github.com/franzheidl/bemify) for namespacing the sa margin-right: 4px; color: white; - // Generates .kuiBtn_icon--danger + // Generates .kuiBtn__icon--danger @include modifier('danger') { color: red; } From 4efefe9142aa872570a180b6083fe371a9dfbf6f Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Sat, 15 Jul 2017 22:06:56 -0700 Subject: [PATCH 5/5] Update docs --- style_guides/scss_style_guide.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md index 3859adf34aabf..3d87529613a84 100644 --- a/style_guides/scss_style_guide.md +++ b/style_guides/scss_style_guide.md @@ -17,36 +17,36 @@ hex values. ### Bemify for namespacing -We use the [bemify](https://github.com/franzheidl/bemify) for namespacing the sass into a BEM format. We use `component`, `child`, `modifier` and `state` as our mixin names. We've adjusted the plugin's state mixin so that you need to write out the full selector (`@include state('is-happening')`). +We use [bemify](https://github.com/franzheidl/bemify) for namespacing the sass into a BEM format. We use `component`, `child`, `modifier` and `state` as our mixin names. We've adjusted the plugin's state mixin so that you need to write out the full selector (`@include state('isHappening')`). #### Example ``` -// Generates .kuiBtn -@include component('kuiBtn') { +// Generates .kuiButton +@include component('kuiButton') { color: white; background: gray; padding: 20px; - // Generates .kuiBtn__icon + // Generates .kuiButton__icon @include child('icon') { display: inline-block; margin-right: 4px; color: white; - // Generates .kuiBtn__icon--danger + // Generates .kuiButton__icon--danger @include modifier('danger') { color: red; } } - // Generates .kuiBtn--primary + // Generates .kuiButton--primary @include modifier('primary') { background: blue; } - // Generates .kuiBtn.is-loading - @include state('is-loading') { + // Generates .kuiButton.isLoading + @include state('isLoading') { opacity: .5; cursor: not-allowed; }