initial Commit of WIP

This the first try to create an Whitesmith Sass Scaffold and starter framework to unify
frontend code style

README.md

@@ -0,0 +1,29 @@
+# SCAFFOLD
+----
+This scaffold depends on bower, so you better get it.
+
+## Bower
+Just `bower install` it!
+
+#### Bower with Rails
+If on a Rails application we need to tell asset pipeline where to get bower_components
+
+1. Add `.bowerrc` and point the target
+
+```JSON
+
+{
+  "directory": "vendor/assets/bower_components"
+}
+```
+
+1. Tell asset pipeline where the components are, in `config/application.rb`
+
+```Ruby
+
+# tell asset pipeline where bower components are
+config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
+``
+
+----
+# Whitesmith ™

application.css.scss

@@ -0,0 +1,86 @@
+/*!
+ _    _ _     _ _                      _ _   _     
+| |  | | |   (_) |                    (_) | | |    
+| |  | | |__  _| |_ ___  ___ _ __ ___  _| |_| |__  
+| |/\| | '_ \| | __/ _ \/ __| '_ ` _ \| | __| '_ \ 
+\  /\  / | | | | ||  __/\__ \ | | | | | | |_| | | |
+ \/  \/|_| |_|_|\__\___||___/_| |_| |_|_|\__|_| |_|
+                                                  
+	
+	WEB:  https://whitesmith.co
+	MAIL: [email protected]                                           
+*/
+
+/*
+    APPLICATION.SCSS
+    ----------------
+
+    the SASS manifest. Import all needed partials and other manifestos here
+    Mind the order, from low to hight specificity:
+
+    1. VENDOR, EXTERNAL LIBRARYS
+    2. SETTINGS
+    3. TOOLS
+    4. BASE
+    5. OBJECTS
+    6. COMPONENTS
+    7. UTILITIES
+
+
+    Notes:
+    For .sass, .scss files use import and not require
+    for .css files you can use both *= require or @import, but require must be bellow this section
+    On components, import from more atomic to molecule ones
+
+    Requires:
+
+    //*="require lib path without quotes"
+	*= normalize-css/normalize
+	*= flexboxgrid/dist/flexboxgrid
+*/
+
+/* VENDOR */
+@import
+    "normalize-css/normalize",
+    "sassy-maps/sass/sassy-maps",
+    "flexboxgrid/dist/flexboxgrid",
+    "mappy-breakpoints/_mappy-breakpoints";
+
+
+/* SETTINGS */
+@import "settings/s.globals";
+
+
+/* TOOLS */
+@import
+    "tools/t.functions",
+    "tools/t.mixins";
+
+
+/* BASE */
+@import
+ 	"base/b.reset",
+	"base/b.box-sizing",
+	"base/b.fonts",
+	"base/b.page",
+	"base/b.html-elements";
+
+
+/* OBJECTS */
+@import
+    "objects/o.media",
+    "objects/o.layout",
+    "objects/o.main",
+    "objects/o.container";
+
+
+/* COMPONENTS */
+@import
+    "components/c.bar",
+
+
+/* UTILITIES*/
+@import
+    "utilities/helpers",
+    "utilities/colorize";
+

base/_b.box-sizing.scss

@@ -0,0 +1,19 @@
+/*
+    BASE.BOX-SIZING
+    ----
+   
+    More sensible default box-sizing:
+	css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 
+==================================================== */
+
+html {
+  box-sizing: border-box;
+}
+
+* {
+	&,
+	&:before,
+	&:after {
+		box-sizing: inherit;
+	}
+}

base/_b.fonts.scss

@@ -0,0 +1,13 @@
+/*
+    BASE.FONTS
+    ----
+    
+    Importing Custom Fonts here
+==================================================== */
+
+
+// @mixin font-face($font-family, $file-path, $font-weight, $font-style, $RoR: false);
+
+body {
+    font: normal 1rem/$base-line-height "Helvetica Neue", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,"Open Sans", sans-serif;
+}

base/_b.html-elements.scss

@@ -0,0 +1,81 @@
+/*
+    BASE.HTML-ELEMENTS
+    ----
+    
+    Resets that aren't on reset :p
+    We should probably break this into a partial
+    per element, but it seems too much work
+==================================================== */
+
+
+/*
+    Default Headings 
+    ----
+
+    h1,h2,h3,h4,h5,h6
+*/
+@for $i from 1 to 7 {
+    h#{$i} { 
+        margin: 0;
+        // font-size: 1em; 
+        // font-weight: getFontWeight('semibold');
+    }
+}
+
+
+/* Links */
+a,
+a:hover {
+    color: inherit;
+    text-decoration: none;
+}
+
+
+
+/*
+  TABLE
+  ----
+
+  Ensure tables fill up as much space as possible.
+*/
+table {
+  width: 100%;
+}
+
+
+/*
+	IMAGES
+	----
+
+	From inuit.css
+	1. Fluid images for responsive purposes.
+	2. Offset `alt` text from surrounding copy.
+	3. Setting `vertical-align` removes the whitespace that appears under `img`
+	  elements when they are dropped into a page as-is. Safer alternative to
+	  using `display: block;`.
+*/
+img {
+  max-width: 100%; /* [1] */
+  font-style: italic; /* [2] */
+  vertical-align: middle; /* [3] */
+}
+
+
+/**
+ * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
+ *    not make the image fluid.
+ */
+img[width], /* [1] */
+img[height] {  /* [1] */
+  max-width: none;
+}
+
+
+hr{
+  margin: 0 auto;
+  width: 100%;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.18;
+  padding: 8px 0px;
+}

base/_b.page.scss

@@ -0,0 +1,33 @@
+/*
+    BASE.PAGE
+    ----
+    
+    High-level, page-level styling.
+    Based on inuit.css framework
+
+     1. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
+       navigating between pages that do/do not have enough content to produce
+       scrollbars naturally.
+    2. Ensure the page always fills at least the entire height of the viewport.
+    3. Prevent certain mobile browsers from automatically zooming fonts.
+    4. Fonts on OSX will look more consistent with other systems that do not
+       render text using sub-pixel anti-aliasing.
+       
+==================================================== */
+
+
+html {
+    font-size: 100%;
+    // overflow-y: scroll; /* [1] */
+    height: 100%; /* [2] */
+    -webkit-text-size-adjust: 100%; /* [3] */
+        -ms-text-size-adjust: 100%; /* [3] */
+    -moz-osx-font-smoothing: grayscale; /* [4] */
+     -webkit-font-smoothing: antialiased; /* [5] */
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}

base/_b.reset.scss

@@ -0,0 +1,40 @@
+/*
+    BASE.RESET
+    ----
+    
+    Based on inuit.css
+    A very simple reset that sits on top of Normalize.css.
+==================================================== */
+
+body,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+dl, dd, ol, ul,
+fieldset, legend,
+figure,
+hr {
+  margin:  0;
+  padding: 0;
+}
+
+
+/**
+ * Remove trailing margins from nested lists.
+ */
+li > {
+
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+
+}
+
+
+/**
+ * Remove default table spacing.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "Project-name",
+  "homepage": "https://github.com/whitesmith/repo-name",
+  "authors": [
+    "Whitesmith <[email protected]>"
+  ],
+  "description": "",
+  "main": "",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "vendor/assets/components",
+    "test",
+    "tests"
+  ],
+  "devDependencies": {
+    "sassy-maps": "^0.4.0",
+    "mappy-breakpoints": "^0.2.3",
+  },
+  "dependencies": {
+    "normalize-css": "^4.1.1",
+    "flexboxgrid": "^6.3.0",
+  }
+}