Yay CartoAssets

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+tmp

.jshintrc

@@ -0,0 +1,13 @@
+{
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "sub": true,
+  "undef": true,
+  "boss": true,
+  "eqnull": true,
+  "node": true
+}

.styleguide

@@ -0,0 +1,26 @@
+{
+	"sgComment": "SG",
+	"srcFolder": ".",
+	"outputFile": "./styleguide/index.html",
+	"templateFile": "./styleguide/_template.html",
+	"themeFile": "./styleguide/theme.css",
+	"highlightFolder": "./node_modules/highlight.js/styles",
+	"highlightStyle": "github",
+	"excludeDirs": [
+		"target",
+		"node_modules"
+	],
+	"fileExtensions": {
+		"scss": true,
+		"sass": true,
+		"css": true,
+		"less": true
+	},
+	"walkerOptions": {
+		"followLinks": false
+	},
+	"customVars": {
+		"sampleVar": "Hello from customVars!"
+	},
+	"jqFile": "./node_modules/jquery/dist/jquery.js"
+}

.tmp/src/scss/components/shapes.css

@@ -0,0 +1 @@
+.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}

.tmp/src/scss/core/normalize.css

@@ -0,0 +1 @@
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

.tmp/src/scss/core/reset.css

@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after{content:'';content:none}q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

.tmp/src/scss/helpers/normalize.css

@@ -0,0 +1 @@
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

.tmp/src/scss/helpers/reset.css

@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after{content:'';content:none}q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

Gruntfile.js

@@ -0,0 +1,80 @@
+module.exports = function(grunt) {
+  require('load-grunt-tasks')(grunt);
+
+  grunt.initConfig({
+    concat: {
+      dist: {
+        options: {},
+        files: {
+          'dist/cartostyles.css': [
+            '.tmp/src/scss/**/*.css'
+          ]
+        }
+      }
+    },
+    sass: {
+      dist: {
+        options: {
+          sourceMap: false,
+          outputStyle: 'compressed'
+        },
+        files: [{
+          expand: true,
+          src: [
+            'src/scss/**/*.scss'
+          ],
+          dest: '.tmp',
+          ext: '.css'
+        }]
+      }
+    },
+    cssmin: {
+      dist: {
+        options: {
+          check: 'gzip'
+        },
+        files: {
+          'dist/cartostyles.css': [
+            'dist/cartostyles.css'
+          ]
+        }
+      }
+    },
+    watch: {
+      scss: {
+        files: [
+          'src/scss/**/*.scss'
+        ],
+        tasks: [
+          'sass',
+          'concat',
+          'cssmin'
+        ],
+        options: {
+          spawn: false,
+          livereload: 35732
+        }
+      }
+    }
+  });
+
+  grunt.registerTask('default', ['sass', 'concat', 'cssmin', 'watch:scss']);
+
+};
+
+//
+// var gulp  = require('gulp');
+// var shell = require('gulp-shell');
+// var watch = require('gulp-watch');
+//
+// gulp.task('watch', function() {
+//   gulp.watch('path/to/watch/for/changes/**/*.scss', ['makeStyleguide']);
+// });
+//
+// gulp.task('makeStyleguide',
+//   shell.task(
+//     ['styleguide']
+//   )
+// );
+//
+// gulp.task('default', ['watch']);

LICENSE-MIT

@@ -0,0 +1,22 @@
+Copyright (c) 2016 xavijam
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,9 @@
+# CartoAssets
+
+> Share frontend assets between different CartoDB repositories
+
+
+- CSS styleguide.
+- JS styleguide.
+- CSS components.
+- Font icon?

dist/cartostyles.css

@@ -0,0 +1 @@
+.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}mark{background:#ff0;color:#000}sub,sup{line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}optgroup{font-weight:700}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "cartoassets",
+  "description": "Share frontend assets between different CartoDB repositories",
+  "version": "0.1.4",
+  "homepage": "https://github.com/cartodb/CartoAssets",
+  "author": {
+    "name": "xavijam",
+    "email": "xavijam@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/cartodb/CartoAssets.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cartodb/CartoAssets/issues"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/cartodb/CartoAssets/blob/master/LICENSE-MIT"
+    }
+  ],
+  "engines": {
+    "node": ">= 0.8.0"
+  },
+  "devDependencies": {
+    "jquery": "~2.2.0",
+    "highlight.js": "~9.1.0",
+    "markdown-styleguide-generator": "~2.0.4",
+    "grunt-sass": "1.1.0",
+    "grunt-contrib-concat": "0.5.1",
+    "grunt-contrib-cssmin": "0.14.0",
+    "grunt-contrib-watch": "0.6.1",
+    "grunt-shell": "1.1.2",
+    "load-grunt-tasks": "*"
+  },
+  "peerDependencies": {
+    "grunt": "~0.4.5"
+  },
+  "keywords": [
+    "library",
+    "CartoDB",
+    "share",
+    "assets"
+  ]
+}

src/scss/components/shapes.scss

@@ -0,0 +1,20 @@
+/* SG
+# Shapes/dot
+
+You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
+
+```
+<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
+<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
+```
+*/
+// Shapes styles
+// ----------------------------------------------
+
+.CDB-Shape-dot {
+  display: inline-block;
+  width: 8px;
+  min-width: 8px;
+  height: 8px;
+  border-radius: 8px;
+}

src/scss/utilities/_mixins.scss

@@ -0,0 +1,236 @@
+// Mixins
+// - Necessary SCSS functions
+// - Browser support:
+//  · IE => 10
+//  · Chrome => 21
+//  · Sarafi => 6
+//  · Firefox => 24
+//  · Opera => 12
+// --------------------------------------------------
+
+/* ADDS A BROWSER PREFIX TO THE PROPERTY */
+@mixin css3-prefix($property, $value) {
+  -webkit-#{$property}: #{$value};
+   -khtml-#{$property}: #{$value};
+     -moz-#{$property}: #{$value};
+      -ms-#{$property}: #{$value};
+       -o-#{$property}: #{$value};
+          #{$property}: #{$value};
+}
+
+// Display inline
+@mixin inline-block() {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+// Display flex functions
+@mixin display-flex() {
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+}
+@mixin flex($v) {
+  -webkit-box-flex: $v;
+  -moz-box-flex:  $v;
+  -webkit-flex:  $v;
+  -ms-flex:  $v;
+  flex:  $v;
+}
+@mixin flex-direction($v) {
+  -webkit-flex-direction: $v;
+  -moz-flex-direction: $v;
+  -ms-flex-direction: $v;
+  flex-direction: $v;
+  // IE10 doesn't support this property
+}
+@mixin flex-grow($v) {
+  -webkit-flex-grow: $v;
+  -moz-flex-grow: $v;
+  -ms-flex-grow: $v;
+  flex-grow: $v;
+  // IE10 fallback
+  -ms-flex: $v 0 auto;
+}
+@mixin flex-wrap($v) {
+  -webkit-flex-wrap: $v;
+  -moz-flex-wrap: $v;
+  -ms-flex-wrap: $v;
+  flex-wrap: $v;
+  // IE10 doesn't support this property
+}
+@mixin flex-order($v) {
+  -webkit-flex-order: $v;
+  -webkit-box-ordinal-group: $v;
+  -moz-box-ordinal-group: $v;
+  -moz-flex-order: $v;
+  -ms-flex-order: $v;
+  -ms-order: $v;
+  box-ordinal-group: $v;
+  flex-order: $v;
+  order: $v;
+}
+@mixin justify-content($v, $ie-v: "") {
+  -webkit-justify-content: $v;
+  -moz-justify-content: $v;
+  -ms-justify-content: $v;
+  justify-content: $v;
+  // Hello IE10
+  -ms-flex-pack: if($ie-v != "", $ie-v, $v);
+}
+@mixin align-items($v, $ie-v: "") {
+  -webkit-align-items: $v;
+  -moz-align-items: $v;
+  -ms-align-items: $v;
+  align-items: $v;
+  // Hello IE10
+  -ms-flex-align: if($ie-v != "", $ie-v, $v);
+}
+@mixin align-content($v, $ie-v: "") {
+  -webkit-align-content: $v;
+  -moz-align-content: $v;
+  -ms-align-content: $v;
+  align-content: $v;
+  // Hello IE10
+  -ms-flex-align: if($ie-v != "", $ie-v, $v);
+}
+
+// CSS3 typical functions
+@mixin opacity($v) {
+  opacity:$v;
+  filter:alpha(opacity=($v*100)); // IE10
+}
+
+@mixin grayscale() {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
+}
+
+
+@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
+  background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+  background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+  background-image:    -moz-linear-gradient(top, $startColor, $endColor);
+  background-image:     -ms-linear-gradient(top, $startColor, $endColor);
+  background-image:      -o-linear-gradient(top, $startColor, $endColor);
+  background-image:         linear-gradient(top, $startColor, $endColor);
+  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
+}
+
+@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
+  background-color: $startColor;
+  background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
+  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
+  background-image:    -moz-linear-gradient(left, $startColor, $endColor);
+  background-image:     -ms-linear-gradient(left, $startColor, $endColor);
+  background-image:      -o-linear-gradient(left, $startColor, $endColor);
+  background-image:         linear-gradient(left, $startColor, $endColor);
+  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
+}
+
+@mixin image-2x($image, $width, $height, $x: 0, $y: 0) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+         (-o-min-device-pixel-ratio: 2.6/2),
+         (-webkit-min-device-pixel-ratio: 1.3),
+         (min-device-pixel-ratio: 1.3),
+         (min-resolution: 1.3dppx) {
+    /* on retina, use image that's scaled by 2 */
+    background: url($image);
+    background-size: $width $height;
+    background-position: $x $y;
+  }
+}
+
+@mixin transform($params) {
+  @include css3-prefix('transform', $params);
+}
+
+@mixin transform-style($style: preserve-3d) {
+  @include css3-prefix('transform-style', $style);
+}
+
+@mixin transition($properties...) {
+
+  @if length($properties) >= 1 {
+    @include css3-prefix('transition', $properties);
+  }
+
+  @else {
+    @include css3-prefix('transition', $what: all, $length: 1s, $easing: ease-in-out);
+  }
+}
+
+
+/* FONT FACE */
+@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
+  @font-face {
+    font-family: $fontFamily;
+    src: url($eotFileSrc)  format('eot'),
+         url($woffFileSrc) format('woff'),
+         url($ttfFileSrc)  format('truetype'),
+         url($svgFileSrc + $svgFontID) format('svg');
+  }
+}
+
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+  @-ms-keyframes #{$animation-name} {
+    @content;
+  }
+  @-o-keyframes #{$animation-name} {
+    @content;
+  }
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+@mixin text-overflow() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin animation($str) {
+  @include css3-prefix('animation', $str);
+}
+
+@mixin line-clamp($lines) {
+  height: $lines * $sLineHeight-normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: $sLineHeight-normal;
+    width: 2 * $sLineHeight-normal;
+    @include background-horizontal(rgba(255,255,255,0), rgba(255,255,255,1));
+  }
+}
+
+@mixin media-query() {
+  @media only screen and (min-width: 320px) and (max-width: 960px)  {
+    @content;
+  }
+}
+@mixin media-query-mobile() {
+  @media only screen and (max-width: 600px) {
+    @content;
+  }
+}

src/scss/utilities/helpers.scss

@@ -0,0 +1,29 @@
+// Helper classes
+// ----------------------------------------------
+
+@import 'mixins';
+
+.u-tSpace {
+  margin-top: 4px;
+}
+.u-tSpace-xl {
+  margin-top: 12px;
+}
+.u-rSpace {
+  margin-right: 4px;
+}
+.u-rSpace--m {
+  margin-right: 8px;
+}
+.u-rSpace--xl {
+  margin-right: 12px;
+}
+.u-lSpace {
+  margin-left: 4px;
+}
+.u-lSpace--xl {
+  margin-left: 12px;
+}
+.u-iBlock {
+  @include inline-block();
+}

src/scss/utilities/normalize.scss

@@ -0,0 +1,578 @@
+/* ==========================================================================
+   Normalize.scss settings
+   ========================================================================== */
+/**
+ * Includes legacy browser support IE6/7
+ *
+ * Set to false if you want to drop support for IE6 and IE7
+ */
+
+$legacy_browser_support: false !default;
+
+/* Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *  `em` units.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  @if $legacy_browser_support {
+    *font-size: 100%; /* 3 */
+  }
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+  @if $legacy_browser_support {
+    *display: inline;
+    *zoom: 1;
+  }
+}
+
+/**
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a {
+  &:active, &:hover {
+    outline: 0;
+  };
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+@if $legacy_browser_support {
+  blockquote {
+    margin: 1em 40px;
+  }
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+@if $legacy_browser_support {
+  h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+  }
+
+  h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+  }
+
+  h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+  }
+
+  h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+  }
+
+  h6 {
+    font-size: 0.67em;
+    margin: 2.33em 0;
+  }
+}
+
+/**
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+@if $legacy_browser_support {
+
+  /**
+   * Addresses margins set differently in IE 6/7.
+   */
+
+  p,
+  pre {
+    *margin: 1em 0;
+  }
+
+  /*
+   * Addresses CSS quotes not supported in IE 6/7.
+   */
+
+  q {
+    *quotes: none;
+  }
+
+  /*
+   * Addresses `quotes` property not supported in Safari 4.
+   */
+
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+@if $legacy_browser_support {
+
+  /* ==========================================================================
+     Lists
+     ========================================================================== */
+
+  /*
+   * Addresses margins set differently in IE 6/7.
+   */
+
+  dl,
+  menu,
+  ol,
+  ul {
+    *margin: 1em 0;
+  }
+
+  dd {
+    *margin: 0 0 0 40px;
+  }
+
+  /*
+   * Addresses paddings set differently in IE 6/7.
+   */
+
+  menu,
+  ol,
+  ul {
+    *padding: 0 0 0 40px;
+  }
+
+  /*
+   * Corrects list images handled incorrectly in IE 7.
+   */
+
+  nav ul,
+  nav ol {
+    *list-style: none;
+    *list-style-image: none;
+  }
+
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * 1. Remove border when inside `a` element in IE 8/9/10.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+
+img {
+  border: 0;
+  @if $legacy_browser_support {
+    *-ms-interpolation-mode: bicubic; /* 2 */
+  }
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  @if $legacy_browser_support {
+    _font-family: 'courier new', monospace;
+  }
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *  Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ * 4. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+  @if $legacy_browser_support {
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+  }
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *  and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *  `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ *  Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+  @if $legacy_browser_support {
+    *overflow: visible;  /* 4 */
+  }
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ *  Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+  @if $legacy_browser_support {
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+  }
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 3. Corrects text not wrapping in Firefox 3.
+ * 4. Corrects alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+  @if $legacy_browser_support {
+    white-space: normal; /* 3 */
+    *margin-left: -7px; /* 4 */
+  }
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

src/scss/utilities/reset.scss

@@ -0,0 +1,40 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote {
+  &:before, &:after {
+    content: '';
+    content: none; } }
+
+q {
+  &:before, &:after {
+    content: '';
+    content: none; } }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }

styleguide/_template.html

@@ -0,0 +1,91 @@
+<head>
+  <link href='../dist/cartostyles.css' type='text/css' rel='stylesheet'>
+</head>
+
+{{> theme}}
+{{> highlight}}
+{{> jquery}}
+
+<script>
+    var j = jQuery.noConflict(true);
+    j(function() {
+
+        // Show section in Styleguide
+        j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
+
+        // Click on link with subheadings
+        j('#styleguide-menu .submenulink').click(function(event) {
+            event.preventDefault();
+            var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
+            var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
+            j('#styleguide-menu .on').removeClass('on');
+            if (!isCurSubmenuOn) {
+                jqCurSubmenu.addClass('on');
+                j(this).addClass('on');
+            }
+            showSection(j(this).data('section'));
+        });
+
+        // Click on link without subheadings
+        j('#styleguide-menu .sectionlink').click(function(event) {
+            event.preventDefault();
+            j('#styleguide-menu .on').removeClass('on');
+            j(this).addClass('on');
+            showSection(j(this).data('section'));
+        });
+
+        // Show/Hide sections
+        function showSection(section) {
+            j('#styleguide .section').hide();
+            var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
+            jqCurSections.show();
+        }
+    });
+</script>
+
+<div id="styleguide-menu">
+	<ul>
+	{{#each menu}}
+		<li>
+			{{#if headings.0.name}}
+                <a class="submenulink" href="#" data-section="{{name}}">{{name}}</a>
+                <ul class="submenu" data-submenu="{{../name}}">
+                {{#each headings}}
+                    <li><a href="#{{id}}">{{name}}</a></li>
+                {{/each}}
+                </ul>
+			{{/if}}
+            {{#unless headings.0.name}}
+                <a class="sectionlink" href="#" data-section="{{name}}">{{name}}</a>
+            {{/unless}}
+		</li>
+	{{/each}}
+	</ul>
+</div>
+
+<div id="styleguide">
+	{{#each sections}}
+		<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">
+
+            <div class="comment">
+                <h1>{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
+                {{{comment}}}
+            </div>
+
+            {{#if code}}
+                <div class="result">
+                    {{{code}}}
+                </div>
+            {{/if}}
+
+            {{#if markup}}
+                <div class="markup hljs">
+<pre>
+{{{markup}}}
+</pre>
+                </div>
+            {{/if}}
+
+		</div>
+	{{/each}}
+</div>

styleguide/theme.css

@@ -0,0 +1,122 @@
+#styleguide {
+    float: left;
+    width: 80%;
+}
+
+#styleguide .section {
+    display: none;
+    margin-bottom: 2em;
+    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+    -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+    box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+}
+
+#styleguide .result,
+#styleguide .comment {
+    padding: 1em;
+    border: 1px solid #ddd;
+}
+
+#styleguide .result {
+    border-top: none;
+}
+
+#styleguide .comment {
+    background-color: rgb(245, 245, 245);
+}
+
+#styleguide .section .comment code {
+    color: #3fbead;
+    font-family: Consolas, Monaco, 'Andale Mono', monospace;
+    font-size: 13px;
+}
+
+#styleguide .markup {
+    border: 1px solid #ddd;
+    border-top: none;
+}
+
+#styleguide code,
+#styleguide pre {
+    border: none;
+    font-family: Consolas, Monaco, 'Andale Mono', monospace;
+    font-size: 13px;
+    line-height: 20px;
+    direction: ltr;
+    text-align: left;
+    white-space: pre-wrap;
+    word-spacing: normal;
+    margin: 0;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+
+/* menu */
+#styleguide-menu {
+    width: calc(20% - 1em - 2px);
+    float: left;
+    margin-right: 1em;
+    padding: 1em 0;
+
+    border: 1px solid #ddd;
+    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+    -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+    box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.43);
+}
+
+#styleguide-menu .submenu {
+    display: none;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+#styleguide-menu .submenu.on{
+    display: block;
+}
+
+#styleguide-menu ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+#styleguide-menu li {
+    padding: 0;
+    margin: 0;
+}
+
+
+
+#styleguide-menu a {
+    display: block;
+    width: calc(100% - 2em + 2px);
+    padding: 0.3em 1em;
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.87);
+
+}
+
+#styleguide-menu ul ul a {
+    padding: 0.3em 1em 0.3em 2em;
+    width: calc(100% - 3em + 2px);
+}
+
+#styleguide-menu a:visited,
+#styleguide-menu a:hover,
+#styleguide-menu a:active {
+    display: block;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+#styleguide-menu a:hover {
+    background-color: rgba(250, 255, 70, 0.3);
+}
+
+#styleguide-menu a.on {
+    background-color: rgba(0, 0, 0, 0.1);
+}