Merge 1ff1787 into d84ad6b

.codeclimate.yml

@@ -0,0 +1,15 @@
+engines:
+  tslint:
+    enabled: true
+    channel: beta
+  fixme:
+    enabled: true
+ratings:
+  paths:
+  - "src/**/*"
+  - "**.ts"
+  - "**.tsx"
+  - "**.scss"
+exclude_paths:
+- dist/
+- node_modules/

.sass-lint.yml

@@ -9,3 +9,11 @@ rules:
     - convention: hyphenatedbem
   declarations-before-nesting: true
   extends-before-declarations: true
+  hex-notation:
+    - style: uppercase
+  indentation:
+    - size: 4
+  nesting-depth:
+    - max-depth: 4
+  hex-length:
+    - style: long

README.md

@@ -1,7 +1,7 @@
 # A very opinionated frontend boilerplate
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/Lapanti/ts-react-boilerplate.svg)](https://greenkeeper.io/)
-[![Build Status](https://img.shields.io/travis/Lapanti/ts-react-boilerplate/master.svg?style=flat-square)](https://travis-ci.org/Lapanti/ts-react-boilerplate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?style=flat-square)](https://david-dm.org/lapanti/ts-react-boilerplate) [![DevDependency Status](https://img.shields.io/david/dev/lapanti/ts-react-boilerplate.svg?style=flat-square)](https://david-dm.org/lapanti/ts-react-boilerplate?type=dev) [![Coverage Status](https://img.shields.io/coveralls/Lapanti/ts-react-boilerplate/master.svg?style=flat-square)](https://coveralls.io/github/Lapanti/ts-react-boilerplate?branch=master)
+[![Build Status](https://img.shields.io/travis/Lapanti/ts-react-boilerplate/master.svg?style=flat-square)](https://travis-ci.org/Lapanti/ts-react-boilerplate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?style=flat-square)](https://david-dm.org/lapanti/ts-react-boilerplate) [![DevDependency Status](https://img.shields.io/david/dev/lapanti/ts-react-boilerplate.svg?style=flat-square)](https://david-dm.org/lapanti/ts-react-boilerplate?type=dev) [![Coverage Status](https://img.shields.io/coveralls/Lapanti/ts-react-boilerplate/master.svg?style=flat-square)](https://coveralls.io/github/Lapanti/ts-react-boilerplate?branch=master)[![Code Climate](https://img.shields.io/codeclimate/github/Lapanti/ts-react-boilerplate.svg?style=flat-square)](https://codeclimate.com/github/Lapanti/ts-react-boilerplate) [![Code Climate](https://img.shields.io/codeclimate/issues/github/Lapanti/ts-react-boilerplate.svg?style=flat-square)](https://codeclimate.com/github/Lapanti/ts-react-boilerplate/issues)
 
 ## Purpose
 

docs/STYLES.md

@@ -30,7 +30,7 @@ from which the first command `merge-default-rules` indicates that I do not want
 
 All of our style-sheets will live inside a folder `src/styles` and the first will be the "main"-stylesheet, called `styles.scss` (*`scss` is the **Sass** file extension*)
 ```scss
-@import '_variables.scss';
+@import 'variables.scss';
 @import 'index.scss';
 @import 'button.scss';
 @import 'todocomponent.scss';
@@ -49,7 +49,7 @@ which will include the font from Google's CDN.
 
 ### Variables
 
-Next we will define those things we call `variables` in **Sass** in their own file called `_variables.scss`
+Next we will define those things we call `variables` in **Sass** in their own file called `variables.scss`
 ```scss
 // Colors
 $primary-color: #343488;
@@ -63,7 +63,7 @@ where the underscore in the beginning of the file name is just a convention to d
 
 Next up is the styles for the `Index`-page, inside a file called `index.scss`
 ```scss
-@import '_variables.scss';
+@import 'variables.scss';
 
 .index {
     align-items: center;
@@ -109,7 +109,7 @@ Next up is the styles for the `Index`-page, inside a file called `index.scss`
 ```
 where we introduce **nesting**. I will just explain the simplest use case so you understand what is happening
 ```scss
-@import '_variables.scss';
+@import 'variables.scss';
 .index {
     align-items: center;
     display: flex;
@@ -139,7 +139,7 @@ where we see that first we have defined a block for the class `index`, which sty
 
 In a file called `button.scss` we are going to write our styles for the `Button`-component
 ```scss
-@import '_variables.scss';
+@import 'variables.scss';
 
 .btn {
     background-color: $tertiary-color;
@@ -154,7 +154,7 @@ which are very simple, like the component itself.
 
 The styles for our `TodoComponent` will be set in a file called `todocomponent.scss`
 ```scss
-@import '_variables.scss';
+@import 'variables.scss';
 
 .todo {
     display: flex;
@@ -180,7 +180,7 @@ which is a rather simple style as well, just a little **flexbox** in there.
 
 Now this is something a bit more interesting, we are going to make our `Loader`-component finally come to life, by creating the styles for it inside `loader.scss``
 ```scss
-@import '_variables.scss';
+@import 'variables.scss';
 
 .loader {
     animation: .8s fadein .2s linear forwards;

src/styles/button.scss

@@ -1,4 +1,4 @@
-@import '_variables.scss';
+@import 'variables';
 
 .btn {
     background-color: $tertiary-color;

src/styles/index.scss

@@ -1,4 +1,4 @@
-@import '_variables.scss';
+@import 'variables';
 
 .index {
     align-items: center;

src/styles/loader.scss

@@ -1,4 +1,4 @@
-@import '_variables.scss';
+@import 'variables';
 
 .loader {
     animation: .8s fadein .2s linear forwards;
@@ -10,12 +10,12 @@
     top: -50vh;
     width: 200vw;
     z-index: 1000;
-    
-    &__spinner:before {
+
+    &__spinner::before {
         animation: spinner .6s linear infinite;
-        border: 2px solid #cccccc;
+        border: 2px solid $loader-border-color;
         border-radius: 50%;
-        border-top-color: #333333;
+        border-top-color: $loader-top-border-color;
         box-sizing: border-box;
         content: '';
         height: 120px;
@@ -38,6 +38,7 @@
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }

src/styles/styles.scss

@@ -1,8 +1,8 @@
-@import '_variables.scss';
-@import 'index.scss';
-@import 'button.scss';
-@import 'todocomponent.scss';
-@import 'loader.scss';
+@import 'variables';
+@import 'index';
+@import 'button';
+@import 'todocomponent';
+@import 'loader';
 
 body {
     background-color: $tertiary-color;

src/styles/todocomponent.scss

@@ -1,4 +1,4 @@
-@import '_variables.scss';
+@import 'variables';
 
 .todo {
     display: flex;

src/styles/_variables.scss → src/styles/variables.scss

@@ -3,3 +3,5 @@ $primary-color: #343488;
 $secondary-color: #5656AA;
 $tertiary-color: #F0F0FF;
 $modal-background: rgba(100, 100, 100, .8);
+$loader-border-color: #CCCCCC;
+$loader-top-border-color: #333333;