Add SCSS style guide. (#12850)

elastic · Jul 14, 2017 · ebebfe2 · ebebfe2
1 parent d538497
commit ebebfe2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md
@@ -7,6 +7,7 @@ recommended for the development of all Kibana plugins.
 - [Angular](style_guides/angular_style_guide.md)
 - [React](style_guides/react_style_guide.md)
 - [CSS](style_guides/css_style_guide.md)
+- [SCSS](style_guides/scss_style_guide.md)
 - [HTML](style_guides/html_style_guide.md)
 - [API](style_guides/api_style_guide.md)
 - [Architecture](style_guides/architecture_style_guide.md)

diff --git a/style_guides/css_style_guide.md b/style_guides/css_style_guide.md
@@ -1,6 +1,22 @@
 
 # CSS Style Guide
 
+## Original style guide
+
+Our style guide is an extension of [CSS Guidelines by Harry Roberts](https://cssguidelin.es/). The rules we especially focus on are:
+
+* [Multiple files](https://cssguidelin.es/#multiple-files)
+* [Indenting](https://cssguidelin.es/#indenting)
+* [Commenting](https://cssguidelin.es/#commenting)
+* [Naming conventions](https://cssguidelin.es/#naming-conventions) (see "Naming convention", below, for exceptions)
+* [CSS selectors](https://cssguidelin.es/#css-selectors)
+* [Specificity](https://cssguidelin.es/#specificity)
+* [Architectural principles](https://cssguidelin.es/#architectural-principles)
+
+Please see the [SCSS Style Guide](scss_style_guide.md) for additional rules pertaining to SCSS.
+
+## Contents
+
 - [CSS Style Guide](#css-style-guide)
   - [Selecting elements](#selecting-elements)
   - [Using the preprocessor](#using-the-preprocessor)

diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md
@@ -0,0 +1,16 @@
+
+# SCSS Style Guide
+
+## Original style guide
+
+Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sass-guidelin.es/). The rules we especially focus on are:
+
+* [Syntax & formatting](https://sass-guidelin.es/#syntax--formatting) (exceptions below)
+* [Naming conventions](https://sass-guidelin.es/#naming-conventions) (see the [CSS Style Guide](css_style_guide.md) for infomation on exceptions)
+* [Variables](https://sass-guidelin.es/#variables)
+* [Mixins](https://sass-guidelin.es/#mixins)
+
+## Syntax and formatting
+
+The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using
+hex values.