build: add css formatter (csscomb)

CONTRIBUTING.md

@@ -128,9 +128,8 @@ from the main (upstream) repository:
 To ensure consistency throughout the source code, keep these rules in mind as you are working:
 
 * All features or bug fixes **must be tested** by one or more specs (unit-tests).
-* We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at
-  **100 characters**. An automated formatter is available, see
-  [DEVELOPER.md](DEVELOPER.md#clang-format).
+* We follow [Google's JavaScript Style Guide][js-style-guide] and [Google's CSS Style Guide](html-css-style-guide),
+  but wrap all code at **100 characters**. An automated formatter is available, see [DEVELOPER.md](DEVELOPER.md#clang-format).
 
 ## <a name="commit"></a> Commit Message Guidelines
 
@@ -216,4 +215,5 @@ closes #1
 [jsfiddle]: http://jsfiddle.net/
 [plunker]: http://plnkr.co/edit
 [runnable]: http://runnable.com/
-[js-style-guide]: https://google.github.io/styleguide/javascriptguide.xml
+[js-style-guide]: https://google.github.io/styleguide/jsguide.html
+[html-css-style-guide]: https://google.github.io/styleguide/htmlcssguide.xml

DEVELOPER.md

@@ -20,7 +20,7 @@ npm install
 ### 2. Configuration (optional)
 A few servers are set up for this project and the settings for them are available in the `src/server/.settings.json` file.
 These are the default values that can be altered via an override:
-```Javascript
+```JavaScript
 {
   httpServer: {
     host: 'localhost',
@@ -81,14 +81,14 @@ Every release a python script will generate a post on reddit. To improve this sc
 ```
 
 ## <a name="clang-format"></a> ClangFormat
-ClangFormat will format the code according to the style-guide ([CONTRIBUTING.md](CONTRIBUTING#rules)) of this project.
+ClangFormat will format `TypeScript` and `JavaScript` code according to the style-guide ([CONTRIBUTING.md](CONTRIBUTING#rules)) of this project.
 The following command will format all `.ts` files:
 ```shell
 npm run format
 ```
 
 ### Visual Studio Code
-A plugin for VSCode is available: [xaver.clang-format](https://marketplace.visualstudio.com/items?itemName=xaver.clang-format)
+A plugin for VSCode is available: [Clang-Format](https://marketplace.visualstudio.com/items?itemName=xaver.clang-format)
 ```shell
 ext install clang-format
 ```
@@ -100,15 +100,35 @@ Following VSCode settings are required:
 }
 ```
 
+## <a name="tslint"></a> CSScomb
+CSScomb will format `CSS` code according to the style-guide ([CONTRIBUTING.md](CONTRIBUTING#rules)) of this project.
+The following command will format all `.css` files:
+```shell
+npm run format:css
+```
+
+### Visual Studio Code
+A plugin for VSCode is available: [CSScomb](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb)
+```shell
+ext install vscode-csscomb
+```
+
+Following VSCode settings are required:
+```JSON
+{
+  "csscomb.preset": "./config/csscomb.json"
+}
+```
+
 ## <a name="tslint"></a> TSLint / Codelyzer
-TSLint and Codelyzer will perform static code analysis to improve the readability and cohesion.
+TSLint and Codelyzer will perform static code analysis to improve the readability and cohesion of the code.
 The following command will check all `.ts` files:
 ```shell
 npm run lint
 ```
 
 ### Visual Studio Code
-A plugin for VSCode is available: [eg2.tslint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)
+A plugin for VSCode is available: [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)
 ```shell
 ext install tslint
 ```

config/csscomb.json

@@ -0,0 +1,34 @@
+{
+  "exclude": [
+    ".git/**",
+    "build/**",
+    "config/**",
+    "node_modules/**"
+  ],
+  "always-semicolon": true,
+  "block-indent": "  ",
+  "color-case": "lower",
+  "color-shorthand": true,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": false,
+  "lines-between-rulesets": 1,
+  "quotes": "single",
+  "remove-empty-rulesets": true,
+  "space-after-colon": " ",
+  "space-after-combinator": " ",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": "\n",
+  "space-before-closing-brace": "\n",
+  "space-before-colon": "",
+  "space-before-combinator": " ",
+  "space-before-opening-brace": " ",
+  "space-before-selector-delimiter": "",
+  "space-between-declarations": "\n",
+  "strip-spaces": true,
+  "tab-size": 2,
+  "unitless-zero": true,
+  "vendor-prefix-align": true,
+  "sort-order": [],
+  "sort-order-fallback": "abc"
+}

package.json

@@ -58,6 +58,7 @@
     "format": "npm run clang-format -- --glob=\"@(src|config)/**/!(browser-providers.conf).@(ts|js)\" -i",
     "format:client": "npm run clang-format -- --glob=\"src/client/**/*.@(ts|js)\" -i",
     "format:server": "npm run clang-format -- --glob=\"src/server/**/*.@(ts|js)\" -i",
+    "format:css": "npm run csscomb -- src",
     "lint": "npm run tslint -- src/**/*.ts",
     "lint:client": "npm run tslint -- src/client/**/*.ts -e **/*.spec.ts -e **/*.e2e.ts -e **/testing/**",
     "lint:server": "npm run tslint -- src/server/**/*.ts -e **/*.spec.ts -e **/*.e2e.ts -e **/testing/**",
@@ -92,7 +93,8 @@
     "webdriver-manager": "./node_modules/.bin/webdriver-manager",
     "protractor": "./node_modules/.bin/protractor",
     "karma": "./node_modules/.bin/karma",
-    "standard-version": "./node_modules/.bin/standard-version"
+    "standard-version": "./node_modules/.bin/standard-version",
+    "csscomb": "./node_modules/.bin/csscomb -c ./config/csscomb.json"
   },
   "dependencies": {
     "@angular/common": "2.2.3",
@@ -138,6 +140,7 @@
     "copy-webpack-plugin": "^4.0.0",
     "coveralls": "^2.11.13",
     "css-loader": "^0.26.0",
+    "csscomb": "^3.1.7",
     "glob": "^7.0.3",
     "html-webpack-plugin": "^2.14.0",
     "istanbul-instrumenter-loader": "1.1.0",

src/client/about/about.css

@@ -7,18 +7,18 @@ lb-about p {
 }
 
 lb-about span {
-    width: 220px;
-    display: inline-block;
+  display: inline-block;
+  width: 220px;
 }
 
 lb-about a {
   text-decoration: underline;
 }
 
 lb-about img {
-  height: 100px;
   -webkit-clip-path: circle(50% at 50% 50%);
-  clip-path: circle(50% at 50% 50%);
+          clip-path: circle(50% at 50% 50%);
+  height: 100px;
 }
 
 lb-about .contributor {