Finish CSS Basics

.scss-lint.yml

@@ -0,0 +1,175 @@
+scss_files: './'
+exclude: [
+  './node_modules/**/*',
+]
+
+linters:
+
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BorderZero:
+    enabled: true
+
+  ColorKeyword:
+    enabled: false
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: false
+
+  ElsePlacement:
+    enabled: true
+    style: same_line
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: false
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short
+
+  HexNotation:
+    enabled: true
+    style: lowercase
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    character: space
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: false
+
+  NameFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    allow_leading_underscore: true
+
+  NestingDepth:
+    enabled: true
+    max_depth: 3
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: ['text-size-adjust']
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: true
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_BEM
+    class_convention: '^[a-z][a-z0-9-]*(?:__[a-z][a-z0-9-]*)?(?:--[a-z][a-z0-9-]*)?$'
+    id_convention: 'a^' # Regular expression aiming at failing all the time, so that ID are actually forbidden
+    ignored_names: ['veeseoLogo', 'veeseoRA2VW2', 'imageContainer']
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: false
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: true
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: false
+
+  UrlQuotes:
+    enabled: true
+
+  VendorPrefixes:
+    enabled: true
+    identifier_list: base
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true

README.md

@@ -11,10 +11,10 @@ This project requires node `>= 4.0.0` due to [hapi](https://github.com/hapijs/ha
 
 ### Global packages
 
-[Stylelint](https://github.com/stylelint/stylelint) must be installed globally before making CSS changes in the codebase.
+[scss-lint](https://github.com/brigade/scss-lint) must be installed globally before making Sass / CSS changes in the codebase.
 
 ```sh
-$ npm install -g stylelint
+$ npm install -g scss-lint
 ```
 
 ### Install the project:
@@ -48,4 +48,4 @@ $ npm start
 ### Enabled pre-commit hooks:
 
 - `lint:js` - lint staged JS files against [semistandard](https://github.com/Flet/semistandard)
-- `lint:css` - lint staged CSS files against [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
+- `lint:scss` - lint staged Scss / CSS files against [scss-lint](https://github.com/brigade/scss-lint)

babel.server.js

@@ -4,6 +4,7 @@ require('dotenv').config();
 var cssModulesHook = require('css-modules-require-hook');
 
 cssModulesHook({
+  extensions: ['.scss', '.css'],
   generateScopedName: process.env.NODE_ENV === 'production'
     ? '[hash:base64:5]'
     : '[name]__[local]___[hash:base64:5]',

package.json

@@ -11,9 +11,9 @@
     "postinstall": "webpack -p --config ./webpack.config.prod.js",
     "server": "NODE_PATH=\"./src\" node ./babel.server",
     "server:dev": "webpack-dev-server --config webpack.config.dev.js",
-    "lint": "npm run lint:js && npm run lint:css",
+    "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "semistandard --verbose | snazzy",
-    "lint:css": "stylelint ./src/**/**/**/**/*.css",
+    "lint:scss": "scss-lint",
     "lint:staged": "lint-staged",
     "copy:html": "node ./scripts/copy-html.js",
     "copy:assets": "node ./scripts/copy-assets.js",
@@ -60,29 +60,27 @@
     "chai": "^3.5.0",
     "concurrently": "^2.2.0",
     "css-loader": "^0.23.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "lint-staged": "^2.0.2",
-    "postcss-loader": "^0.9.1",
-    "postcss-modules-values": "^1.1.3",
-    "postcss-theme": "^1.1.1",
     "enzyme": "^2.4.1",
+    "extract-text-webpack-plugin": "^1.0.1",
     "inject-then": "^2.0.5",
+    "lint-staged": "^2.0.2",
     "mocha": "^2.5.3",
     "mocha-webpack": "^0.4.0",
+    "postcss-loader": "^0.9.1",
     "pre-commit": "^1.1.3",
     "react-addons-test-utils": "^15.2.1",
     "react-hot-loader": "^1.3.0",
+    "sass-loader": "^4.0.0",
     "semistandard": "^8.0.0",
     "sinon": "^1.17.4",
     "snazzy": "^4.0.0",
     "style-loader": "^0.13.1",
-    "stylelint-config-standard": "^11.0.0",
     "webpack-dev-server": "^1.14.1",
     "webpack-node-externals": "^1.2.0"
   },
   "lint-staged": {
     "*.@(js|jsx)": "lint:js",
-    "*.css": "lint:css"
+    "*.@(scss|css)": "lint:scss"
   },
   "pre-commit": {
     "run": "lint:staged",

src/app.js

@@ -1,4 +1,4 @@
-import 'assets/styles/global.css';
+import 'assets/styles/reset.css';
 
 import React from 'react';
 import { createStore } from 'redux';

src/assets/styles/_breakpoints.scss

@@ -0,0 +1,2 @@
+$breakpoint-small: 900px !default;
+$breakpoint-sidebar: 600px !default;

src/assets/styles/_globals.scss

@@ -0,0 +1,11 @@
+//
+// Warning: Make sure this manifest never outputs CSS
+// and only import variables, mixins, functions etc.
+// as this file is included in _every_ component
+//
+@import 'mixins';
+@import 'breakpoints';
+@import 'layout';
+@import 'colors';
+@import 'typography';
+@import 'overrides';

src/assets/styles/_layout.scss

@@ -0,0 +1,3 @@
+$container-max-width: 1200px;
+
+$spacing-gutter: 20px;

src/assets/styles/_mixins.scss

@@ -0,0 +1,39 @@
+///
+/// Viewport sized typography with minimum and maximum values
+///
+/// @author Eduardo Boucas (@eduardoboucas)
+///
+/// @param {Number}   $responsive  - Viewport-based size
+/// @param {Number}   $min         - Minimum font size (px)
+/// @param {Number}   $max         - Maximum font size (px)
+///                                  (optional)
+/// @param {Number}   $fallback    - Fallback for viewport-
+///                                  based units (optional)
+///
+/// @example scss - 5vw font size (with 50px fallback),
+///                 minumum of 35px and maximum of 150px
+///  @include responsive-font(5vw, 35px, 150px, 50px);
+///
+@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
+  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
+  $min-breakpoint: $min / $responsive-unitless * 100;
+
+  @media (max-#{$dimension}: #{$min-breakpoint}) {
+    font-size: $min;
+  }
+
+  @if $max {
+    $max-breakpoint: $max / $responsive-unitless * 100;
+
+    @media (min-#{$dimension}: #{$max-breakpoint}) {
+      font-size: $max;
+    }
+  }
+
+  @if $fallback {
+    font-size: $fallback;
+  }
+
+  font-size: $responsive;
+}

src/components/Button/button.scss

@@ -0,0 +1,5 @@
+@import 'globals';
+
+.root {
+  font-family: $font-primary;
+}

src/components/Button/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './container.scss';
+
+const Button = ({ children, text, type }) => (
+  <button type={type || 'button'} className={styles.root}>
+    {children || text}
+  </button>
+);
+
+export default Button;

src/components/ButtonLink/button-link.scss

@@ -0,0 +1,21 @@
+@import 'globals';
+
+.root {
+  display: block;
+  text-align: center;
+  padding: 0.75em 1em;
+  border-radius: 4px;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-family: $font-primary;
+  color: $color-button-primary-text;
+  background-color: $color-button-primary-bg;
+  letter-spacing: $heading-2-letter-spacing;
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  background-color: $color-button-primary-bg-hover;
+  color: $color-button-primary-text-hover;
+}

src/components/ButtonLink/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './button-link.scss';
+
+const ButtonLink = ({ children, text, href }) => (
+  <a href={href || '#'} className={styles.root}>
+    {children || text}
+  </a>
+);
+
+export default ButtonLink;

src/components/Clearfix/clearfix.scss

@@ -0,0 +1,5 @@
+.root::after {
+  content: '';
+  display: table;
+  clear: both;
+}

src/components/Clearfix/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './container.scss';
+
+const Clearfix = ({ children }) => (
+  <div className={styles.root}>
+    {children}
+  </div>
+);
+
+export default Clearfix;