WIP

Author: michaelthorne

README.md

@@ -1,3 +1,25 @@
 # ITCSS Boilerplate
 
-Inverted Triangle CSS architecture by Harry Roberts @csswizardry
+Inverted Triangle CSS architecture boilerplate. Includes a Gulp task to build CSS for production.
+
+## Setup
+
+``` bash
+# install dependencies
+npm install
+
+# build for development
+gulp build
+
+# build for production with minification
+gulp build --dist
+```
+
+## What is ITCSS?
+
+ITCSS stands for _Inverted Triangle CSS_. It is a sane, scalable, managed CSS architecture from [CSS Wizardry](https://csswizardry.com/).
+
+## Further reading
+
+- [Manage large CSS projects with ITCSS](http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528)
+- [Five insights from the year with Inverted Triangle CSS.](https://www.xfive.co/blog/itcss-year-after/)

src/main.scss

@@ -6,16 +6,27 @@
  * TABLE OF CONTENTS
  *
  * SETTINGS
+ * Global..............
+ *
  * TOOLS
+ *
  * GENERIC
+ *
  * ELEMENTS
+ *
  * OBJECTS
+ *
  * COMPONENTS
+ *
  * UTILITIES
  */
 
-// SETTINGS
+/**
+ * #SETTINGS
+ */
 @import "settings/settings.global";
 
-// GENERIC
-@import "./node_modules/normalize.css/normalize";
+/**
+ * #GENERIC
+ */
+@import "node_modules/normalize.css/normalize";

src/settings/_settings.color.scss

@@ -0,0 +1,26 @@
+/* -------------------------------------------------------------------------- *\
+   #COLOR
+\* -------------------------------------------------------------------------- */
+
+// Brand
+$color-brand:           $brand-color;
+$color-brand-secondary: $brand-color-secondary;
+
+// Neutral
+$color-black:           #111;
+$color-gray:            #aaa;
+$color-silver:          #ddd;
+$color-white:           #fff;
+
+// Social
+$color-facebook:        #3b5998;
+$color-linkedin:        #0077b5;
+$color-twitter:         #1da1f2;
+$color-youtube:         #ff0000;
+
+// Utility
+$color-error:           #ff4136;
+$color-warning:         #ff851b;
+$color-highlighter:     #ffdc00;
+$color-success:         #2ecc40;
+$color-information:     #0074d9;

src/settings/_settings.global.scss

@@ -1,3 +1,11 @@
 /* -------------------------------------------------------------------------- *\
    #GLOBAL
 \* -------------------------------------------------------------------------- */
+
+// Color
+$brand-color:           #001f3f;
+$brand-color-secondary: #01ff70;
+
+// Font
+$font:           Arial, sans-serif;
+$font-secondary: Georgia, serif;