From 97f41366af438a3cdbeedfcb4bec37545699ed40 Mon Sep 17 00:00:00 2001 From: Lapanti Date: Sun, 23 Apr 2017 23:07:05 +0300 Subject: [PATCH 1/4] #24: Add .codeclimate.yml and badge to README.md --- .codeclimate.yml | 17 +++++++++++++++++ README.md | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 .codeclimate.yml diff --git a/.codeclimate.yml b/.codeclimate.yml new file mode 100644 index 0000000..6250a62 --- /dev/null +++ b/.codeclimate.yml @@ -0,0 +1,17 @@ +engines: + tslint: + enabled: true + channel: beta + scss-lint: + enabled: true + fixme: + enabled: true +ratings: + paths: + - "src/**/*" + - "**.ts" + - "**.tsx" + - "**.scss" +exclude_paths: +- dist/ +- node_modules/ diff --git a/README.md b/README.md index 33f3866..b1fe7e9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # A very opinionated frontend boilerplate -[![Build Status](https://travis-ci.org/Lapanti/ts-react-boilerplate.svg?branch=master&style=flat)](https://travis-ci.org/Lapanti/ts-react-boilerplate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat)](https://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate) [![DevDependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?type=dev&style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate?type=dev) [![Coverage Status](https://coveralls.io/repos/github/Lapanti/ts-react-boilerplate/badge.svg?branch=master&style=flat)](https://coveralls.io/github/Lapanti/ts-react-boilerplate?branch=master) +[![Build Status](https://travis-ci.org/Lapanti/ts-react-boilerplate.svg?branch=master&style=flat)](https://travis-ci.org/Lapanti/ts-react-boilerplate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat)](https://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate) [![DevDependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?type=dev&style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate?type=dev) [![Coverage Status](https://coveralls.io/repos/github/Lapanti/ts-react-boilerplate/badge.svg?branch=master&style=flat)](https://coveralls.io/github/Lapanti/ts-react-boilerplate?branch=master) [![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 From ca320011274439eb898e6c24101d53c239eac462 Mon Sep 17 00:00:00 2001 From: Lapanti Date: Sun, 23 Apr 2017 23:10:02 +0300 Subject: [PATCH 2/4] #24: Add code quality badge --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b1fe7e9..c036445 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # A very opinionated frontend boilerplate -[![Build Status](https://travis-ci.org/Lapanti/ts-react-boilerplate.svg?branch=master&style=flat)](https://travis-ci.org/Lapanti/ts-react-boilerplate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat)](https://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate) [![DevDependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?type=dev&style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate?type=dev) [![Coverage Status](https://coveralls.io/repos/github/Lapanti/ts-react-boilerplate/badge.svg?branch=master&style=flat)](https://coveralls.io/github/Lapanti/ts-react-boilerplate?branch=master) [![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) +[![Build Status](https://travis-ci.org/Lapanti/ts-react-boilerplate.svg?branch=master&style=flat)](https://travis-ci.org/Lapanti/ts-react-boilerplate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat)](https://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate) [![DevDependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?type=dev&style=flat)](https://david-dm.org/lapanti/ts-react-boilerplate?type=dev) [![Coverage Status](https://coveralls.io/repos/github/Lapanti/ts-react-boilerplate/badge.svg?branch=master&style=flat)](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 From d88193962f978bd7568cb3aed8eab0125928f36a Mon Sep 17 00:00:00 2001 From: Travis CI Date: Thu, 24 Aug 2017 14:10:01 +0300 Subject: [PATCH 3/4] (#24): Update SCSS files and rules --- .lesshintrc | 18 ------------------ .sass-lint.yml | 8 ++++++++ docs/STYLES.md | 14 +++++++------- src/styles/button.scss | 2 +- src/styles/index.scss | 2 +- src/styles/loader.scss | 11 ++++++----- src/styles/styles.scss | 10 +++++----- src/styles/todocomponent.scss | 2 +- src/styles/{_variables.scss => variables.scss} | 2 ++ 9 files changed, 31 insertions(+), 38 deletions(-) delete mode 100644 .lesshintrc rename src/styles/{_variables.scss => variables.scss} (66%) diff --git a/.lesshintrc b/.lesshintrc deleted file mode 100644 index 482b034..0000000 --- a/.lesshintrc +++ /dev/null @@ -1,18 +0,0 @@ -{ - "fileExtensions": [".less"], - "attributeQuotes": true, - "duplicateProperty": { "enabled": true }, - "emptyRule": true, - "finalNewline": true, - "hexValidation": true, - "idSelector": { "enabled": true }, - "importantRule": true, - "importPath": { "enabled": true, "exclude": ["_variables"] }, - "spaceAfterPropertyColon": { "enabled": true }, - "spaceAroundComma": { "enabled": true }, - "spaceAroundOperator": { "enabled": true }, - "spaceBeforeBrace": { "enabled": true }, - "stringQuotes": { "enabled": true }, - "trailingSemicolon": true, - "urlQuotes": true -} \ No newline at end of file diff --git a/.sass-lint.yml b/.sass-lint.yml index 712f761..f4d1fd4 100644 --- a/.sass-lint.yml +++ b/.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 \ No newline at end of file diff --git a/docs/STYLES.md b/docs/STYLES.md index 53f90fa..976d5d2 100644 --- a/docs/STYLES.md +++ b/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; diff --git a/src/styles/button.scss b/src/styles/button.scss index ef88b35..c60045e 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -1,4 +1,4 @@ -@import '_variables.scss'; +@import 'variables'; .btn { background-color: $tertiary-color; diff --git a/src/styles/index.scss b/src/styles/index.scss index 8546ab2..390f824 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,4 @@ -@import '_variables.scss'; +@import 'variables'; .index { align-items: center; diff --git a/src/styles/loader.scss b/src/styles/loader.scss index 95084e5..960cfbf 100644 --- a/src/styles/loader.scss +++ b/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; } diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 7ced321..d58d39f 100644 --- a/src/styles/styles.scss +++ b/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; diff --git a/src/styles/todocomponent.scss b/src/styles/todocomponent.scss index 6aa76e1..600aa04 100644 --- a/src/styles/todocomponent.scss +++ b/src/styles/todocomponent.scss @@ -1,4 +1,4 @@ -@import '_variables.scss'; +@import 'variables'; .todo { display: flex; diff --git a/src/styles/_variables.scss b/src/styles/variables.scss similarity index 66% rename from src/styles/_variables.scss rename to src/styles/variables.scss index 4d2fecd..283d97e 100644 --- a/src/styles/_variables.scss +++ b/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; From 1ff178708720248c0acbf38e5890a7a35f418f05 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Thu, 24 Aug 2017 14:12:19 +0300 Subject: [PATCH 4/4] (#24): Disable SCSS-lint on CodeClimate as it is not in use --- .codeclimate.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 6250a62..ae9a996 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -2,8 +2,6 @@ engines: tslint: enabled: true channel: beta - scss-lint: - enabled: true fixme: enabled: true ratings: