Icon font re-generated

Gulpfile.js

@@ -2,6 +2,14 @@ var gulp = require('gulp');
 var iconfont = require('gulp-iconfont');
 var iconfontCss = require('gulp-iconfont-css');
 
+String.prototype.toCamelCase = function() {
+  var str = this.replace('--', '');
+  return str.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
+    if (p2) return p2.toUpperCase();
+    return p1.toLowerCase();
+  });
+};
+
 gulp.task('default', function(){
   gulp.src(['./icon-font/svgs/*.svg'])
 

icon-font/svgs/icon-font_98_Drop.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="269px" height="373px" viewBox="0 0 269 373" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_98_Drop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-1116.000000, -10000.000000)" fill="#000000">
+            <g id="icon-font_98_Drop" sketch:type="MSLayerGroup" transform="translate(1116.000000, 10000.000000)">
+                <path d="M134.333333,313 C92.8508325,313 60,282.202345 60,245.1875 C60,232.386133 72.2701659,200.696653 93.2691446,160.081141 C97.9582888,151.011557 103.021535,141.58606 108.403599,131.879172 C119.582984,111.716452 131.593704,91.2983774 143.60654,71.7061927 C147.811298,64.8484962 151.712368,58.5896977 155.207074,53.0624149 C156.424352,51.1371478 157.501891,49.4438912 158.426884,47.9991564 C158.747077,47.49905 159.024363,47.0672163 159.257142,46.7057164 C159.391798,46.4965977 159.478766,46.3619079 159.516446,46.3037064 L134.333333,30 L109.150221,46.3037064 C109.251703,46.4604588 109.46939,46.7981023 109.797337,47.3089768 C110.356535,48.1800954 111.014162,49.209217 111.764267,50.3886716 C113.921843,53.7812127 116.37838,57.6837283 119.086205,62.0346996 C126.837951,74.4903127 135.028105,88.0093004 143.273319,102.094735 C161.021502,132.414246 176.495036,161.027794 188.133757,185.829273 C201.396663,214.091799 208.666667,235.728808 208.666667,245.1875 C208.666667,282.202345 175.815834,313 134.333333,313 L134.333333,313 Z M268.666667,245.1875 C268.666667,224.077242 259.353773,196.360178 242.450323,160.33985 C229.921571,133.641764 213.643057,103.539655 195.054057,71.7837596 C186.51779,57.2011148 178.050529,43.2247249 170.02669,30.3319082 C167.21306,25.8109291 164.652761,21.7435735 162.392838,18.1901034 C161.596819,16.938454 160.893676,15.8381045 160.2893,14.8966074 C159.919101,14.3199124 159.659518,13.917287 159.516446,13.6962936 C147.69369,-4.56543119 120.972977,-4.56543119 109.150221,13.6962936 C108.919332,14.0529302 108.497151,14.7085673 107.896358,15.6469382 C106.910951,17.186034 105.772425,18.9751268 104.493447,20.9979791 C100.855991,26.7510375 96.809796,33.2426715 92.4559596,40.3435066 C80.0156706,60.6328403 67.5732658,81.784773 55.9297348,102.784609 C50.2764341,112.98069 44.9398521,122.915015 39.9712432,132.52513 C14.3574093,182.06654 0,219.146627 0,245.1875 C0,316.235905 60.5483675,373 134.333333,373 C208.118299,373 268.666667,316.235905 268.666667,245.1875 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/template.jst.ejs

@@ -12,7 +12,7 @@
   font-style: normal;
 }
 
-.IconFont {
+.CDB-IconFont {
   display: inline-block;
   font-family: 'CartoIcon';
   font-style: normal;
@@ -28,16 +28,18 @@ All available icons in CartoDB.
 
 ```
 <% _.each(glyphs, function(glyph) { %>
+<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
   <div class="box">
-    <i class="IconFont IconFont-<%= glyph.fileName.split("_")[2] %> Size-large"></i>
+    <i class="CDB-IconFont CDB-IconFont--<%= name %> Size-large"></i>
-    <h4 class="Text Size-small"><%= glyph.fileName.split("_")[2] %></h4>
+    <h4 class="Text Size-small"><%= name %></h4>
   </div>
 <% }); %>
 ```
 */
 
 <% _.each(glyphs, function(glyph) { %>
-.IconFont-<%= glyph.fileName.split("_")[2] %>::before {
+<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
+.CDB-IconFont--<%= name %>::before {
   content: '\<%= glyph.codePoint %>';
 }
 <% }); %>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cartoassets",
   "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "homepage": "https://github.com/cartodb/CartoAssets",
   "author": {
     "name": "xavijam",

src/fonts/cartoIcon.svg

@@ -292,6 +292,9 @@
     <glyph glyph-name="icon-font_97_Spinner"
       unicode="&#xE05F;"
       horiz-adv-x="500" d=" M249.9965300000004 500C232.7276000000002 500 218.7374099999997 489.2538100000002 218.7374099999997 475.9999399999997L218.7374099999997 366.6902800000007C218.7374099999997 353.4294699999992 232.7276000000002 342.6902300000002 249.9965300000004 342.6902300000002C267.2585099999997 342.6902300000002 281.2556399999994 353.4294699999992 281.2556399999994 366.6902800000007L281.2556399999994 475.9999399999997C281.2556399999994 489.2538100000002 267.2585099999997 500 249.9965300000004 500zM249.9965300000004 157.3097699999999C232.7276000000002 157.3097699999999 218.7374099999997 146.56358 218.7374099999997 133.3097199999993L218.7374099999997 24.0000600000003C218.7374099999997 10.7392400000008 232.7276000000002 0 249.9965300000004 0C267.2585099999997 0 281.2556399999994 10.7392400000008 281.2556399999994 24.0000600000003L281.2556399999994 133.3097199999993C281.2556399999994 146.56358 267.2585099999997 157.3097699999999 249.9965300000004 157.3097699999999zM475.9999399999997 280.6860300000008L366.6902800000007 280.6860300000008C353.4294699999992 280.6860300000008 342.6902300000002 266.6958400000003 342.6902300000002 249.4338599999992C342.6902300000002 232.1649400000006 353.4294699999992 218.1677999999993 366.6902800000007 218.1677999999993L475.9999399999997 218.1677999999993C489.2468599999993 218.1677999999993 500 232.1649400000006 500 249.4338599999992C500 266.6958400000003 489.2468599999993 280.6860300000008 475.9999399999997 280.6860300000008zM157.3028200000008 249.4338599999992C157.3028200000008 266.6958400000003 146.5566299999991 280.6860300000008 133.3027700000002 280.6860300000008L23.9931099999994 280.6860300000008C10.7392400000008 280.6860300000008 0 266.6958400000003 0 249.4338599999992C0 232.1649400000006 10.7392400000008 218.1677999999993 23.9931099999994 218.1677999999993L133.3027700000002 218.1677999999993C146.5566299999991 218.1677999999993 157.3028200000008 232.1649400000006 157.3028200000008 249.4338599999992zM354.6173199999994 310.4099800000004L431.9107000000004 387.7033599999995C441.2814799999997 397.0741500000004 438.9822000000004 414.5792500000007 426.7703099999999 426.7842000000001C414.5584099999997 438.9961000000003 397.0671999999995 441.2814799999997 387.7033599999995 431.9176399999997L310.4030299999995 354.6173199999994C301.0322500000002 345.2465300000004 303.3245800000004 327.7622599999995 315.5364800000007 315.5503700000009C327.7414200000003 303.3454199999997 345.2395799999995 301.0322500000002 354.6173199999994 310.4099800000004zM145.3757299999998 189.5900199999997L68.0892999999996 112.3035899999995C58.7115699999995 102.9258499999996 61.0108500000006 85.4346399999995 73.2158 73.2296900000001C85.4276900000004 61.0247400000008 102.9189100000003 58.7185200000004 112.2966400000005 68.0892999999996L189.5900199999997 145.3826800000006C198.9608100000005 154.7534699999997 196.6615299999994 172.2516300000007 184.4496299999992 184.4635199999993C172.2446799999998 196.6754199999996 154.7465200000006 198.9677499999998 145.3757299999998 189.5900199999997zM354.2074799999991 189.1871200000005C344.8297399999992 198.5648600000004 327.34548 196.2655799999993 315.1335799999997 184.06063C302.9286300000004 171.8487299999997 300.6224000000002 154.3575199999996 310.0001400000001 144.9797899999994L387.2935199999993 67.6864100000003C396.6643000000004 58.3156199999994 414.1694100000005 60.6149000000005 426.3743599999998 72.8198499999999C438.5793099999992 85.0317500000001 440.8716399999994 102.5229600000002 431.5008500000004 111.8868000000002L354.2074799999991 189.1871200000005zM144.9728400000004 310.0070899999992C154.3436299999994 300.6363000000001 171.8417900000004 302.9355799999994 184.0536800000009 315.1474699999999C196.2586300000003 327.3524199999993 198.5509700000002 344.8436299999994 189.1801799999994 354.2144200000003L111.8868000000002 431.5077999999994C102.5090700000001 440.8785900000003 85.0247999999992 438.5862500000003 72.8198499999999 426.3743599999998C60.6079599999994 414.1694100000005 58.3017299999992 396.6712499999994 67.6725200000001 387.3004600000004L144.9728400000004 310.0070899999992z" />
+    <glyph glyph-name="icon-font_98_Drop"
+      unicode="&#xE060;"
+      horiz-adv-x="269" d=" M134.3333330000001 60C92.8508325 60 60 90.7976550000003 60 127.8125C60 140.613867 72.2701658999999 172.3033469999991 93.2691446 212.9188589999994C97.9582888 221.9884430000002 103.021535 231.4139400000004 108.403599 241.1208279999992C119.582984 261.2835479999995 131.593704 281.7016225999996 143.60654 301.2938073000005C147.811298 308.1515037999998 151.712368 314.4103023000007 155.207074 319.9375851000005C156.424352 321.8628521999999 157.501891 323.5561087999995 158.426884 325.0008436000008C158.747077 325.5009499999997 159.024363 325.9327837000001 159.2571419999999 326.2942836000002C159.391798 326.5034023000008 159.478766 326.6380921 159.516446 326.6962936L134.3333330000001 343L109.150221 326.6962936C109.251703 326.5395411999998 109.46939 326.2018977000007 109.797337 325.6910231999991C110.356535 324.8199046000009 111.0141619999999 323.7907830000004 111.764267 322.6113284000003C113.921843 319.2187873000003 116.37838 315.3162716999996 119.0862050000001 310.9653003999993C126.837951 298.5096873000002 135.028105 284.9906996000009 143.273319 270.9052649999994C161.0215020000001 240.5857539999997 176.495036 211.9722060000004 188.1337570000001 187.1707270000006C201.396663 158.9082010000002 208.666667 137.2711920000002 208.666667 127.8125C208.666667 90.7976550000003 175.815834 60 134.3333330000001 60L134.3333330000001 60zM268.666667 127.8125C268.666667 148.9227580000006 259.3537730000001 176.6398219999992 242.4503230000001 212.6601499999997C229.921571 239.3582360000001 213.643057 269.4603449999995 195.0540570000001 301.2162403999992C186.51779 315.7988851999999 178.050529 329.7752751000008 170.02669 342.6680918000002C167.2130600000001 347.1890709 164.6527610000001 351.2564265000001 162.392838 354.8098965999998C161.596819 356.0615460000008 160.893676 357.1618954999995 160.2893 358.1033926C159.919101 358.6800875999998 159.6595179999999 359.0827129999998 159.516446 359.3037064C147.6936900000001 377.5654311899998 120.972977 377.5654311899998 109.150221 359.3037064C108.9193319999999 358.9470698000005 108.497151 358.2914326999999 107.896358 357.3530618000005C106.910951 355.8139659999997 105.772425 354.0248732 104.4934470000001 352.0020208999995C100.855991 346.2489624999999 96.809796 339.7573284999999 92.4559596 332.6564933999998C80.0156706 312.3671596999993 67.5732658 291.2152270000006 55.9297348 270.2153909999998C50.2764341 260.0193099999997 44.9398521000001 250.0849849999995 39.9712432000001 240.47487C14.3574093 190.9334600000002 0 153.8533729999999 0 127.8125C0 56.7640950000005 60.5483675 0 134.3333330000001 0C208.118299 0 268.666667 56.7640950000005 268.666667 127.8125z" />
   </font>
 </defs>
 </svg>

styleguide/_template.html

@@ -77,11 +77,876 @@
       <p>Important notes about this styleguide</p>
     </div>
     <div class="result">
+      <p>This is a preliminar WIP of the new dashboard stylesheet, based on the naming conventions of <a href="https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md">suitcss</a> and <a href="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06">Medium’s CSS is actually pretty good.</a></p>
+
+      <p><strong>General rules</strong></p>
+
       <ul>
         <li>All new elements added in this repository should have included a 'CDB-' namespace.</li>
+        <li>
+          <strong>Don't create default styles for common elements</strong> (e.g. <code>input { padding: 10px 0 }</code>). It will make more difficult edit styles for the future custom elements and the <code>!important</code> use will grow.</li>
+        <li>
+          <strong>Avoid creating new classes with only one attribute</strong> (e.g. <code>.marginRight { margin-right: 10px }</code> ). It is impossible to manage the amount of cases we would like to cover.</li>
       </ul>
-    </div>
+
-    <div class="markup">
+      <hr>
+
+      <p><strong>Table of contents</strong></p>
+
+      <ul>
+        <li>
+          <a href="#components">Components</a>
+
+          <ul>
+            <li><a href="#componentname">ComponentName</a></li>
+            <li><a href="#componentname--modifiername">ComponentName--modifierName</a></li>
+            <li><a href="#componentname-descendentname">ComponentName-descendentName</a></li>
+            <li><a href="#componentnameis-stateofcomponent">ComponentName.is-stateOfComponent</a></li>
+          </ul>
+        </li>
+        <li><a href="#javascript">JavaScript</a></li>
+        <li><a href="#structure-sample">Structure sample</a></li>
+        <li><a href="#a-word-on-precompilers">Precompilers</a></li>
+        <li><a href="#colors">Colors</a></li>
+        <li><a href="#z-index">Z-Index</a></li>
+        <li>
+          <a href="#formatting">Formatting</a>
+
+          <ul>
+            <li><a href="#spacing">Spacing</a></li>
+            <li><a href="#quotes">Quotes</a></li>
+            <li><a href="#colors-1">Colors</a></li>
+          </ul>
+        </li>
+        <li><a href="#things-to-add-to-the-guide">Things to add to the guide</a></li>
+      </ul>
+
+      <hr>
+
+      <h2>
+        <a id="components" class="anchor" href="#components" aria-hidden="true"><span class="octicon octicon-link"></span></a>Components</h2>
+
+      <p>Syntax: <code>&lt;ComponentName&gt;[--modifierName|-descendentName]</code></p>
+
+      <h4>
+        <a id="componentname" class="anchor" href="#componentname" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName</h4>
+
+      <p>The component's name <strong>must be written in camel case</strong>.</p>
+
+<div class="highlight highlight-source-css"><pre><span class="pl-e">.MyComponent</span> { <span class="pl-c">/* … */</span> }</pre></div>
+
+      <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>MyComponent<span class="pl-pds">"</span></span>&gt;
+  …
+&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
+
+<h4>
+  <a id="componentname--modifiername" class="anchor" href="#componentname--modifiername" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName--modifierName</h4>
+
+<p>A component modifier is a class that modifies the presentation of the base component in some form. </p>
+
+<ol>
+  <li>Modifier names <strong>must be written in camel case</strong> and be <strong>separated from the component name by two hyphens</strong>. </li>
+  <li>
+    <strong>The class should be included in the HTML in addition to the base component class</strong>.</li>
+</ol>
+
+<div class="highlight highlight-source-css"><pre><span class="pl-c">/* Core button */</span>
+<span class="pl-e">.Btn</span> { <span class="pl-c">/* … */</span> }
+
+<span class="pl-c">/* Default button style */</span>
+<span class="pl-e">.Btn--default</span> { <span class="pl-c">/* … */</span> }</pre></div>
+
+<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Btn Btn--default<span class="pl-pds">"</span></span>&gt;
+  …
+&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
+
+<h4>
+  <a id="componentname-descendentname" class="anchor" href="#componentname-descendentname" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName-descendentName</h4>
+
+<ol>
+  <li>A component descendent is a class that is attached to a descendent node of a component. </li>
+  <li>It's responsible for applying presentation directly to the descendent on behalf of a particular component. </li>
+  <li>
+    <strong>Descendent names must be written in camel case</strong>.</li>
+</ol>
+
+<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet<span class="pl-pds">"</span></span>&gt;
+  &lt;<span class="pl-ent">header</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-header<span class="pl-pds">"</span></span>&gt;
+    &lt;<span class="pl-ent">img</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-avatar<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>{{src}}<span class="pl-pds">"</span></span> <span class="pl-e">alt</span>=<span class="pl-s"><span class="pl-pds">"</span>{{alt}}<span class="pl-pds">"</span></span>&gt;
+    …
+  &lt;/<span class="pl-ent">header</span>&gt;
+  &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-bodyText<span class="pl-pds">"</span></span>&gt;
+    …
+  &lt;/<span class="pl-ent">div</span>&gt;
+&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
+
+<h4>
+  <a id="componentnameis-stateofcomponent" class="anchor" href="#componentnameis-stateofcomponent" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName.is-stateOfComponent</h4>
+
+<p>Use <code>is-stateName</code> to reflect changes to a component's state. </p>
+
+<ol>
+  <li>The state name <strong>must be camel case</strong>. </li>
+  <li>
+    <strong>Never style these classes directly</strong>: they should always be used as an adjoining class.</li>
+</ol>
+
+<p>This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).</p>
+
+<p><strong>Right:</strong></p>
+
+<div class="highlight highlight-source-css"><pre><span class="pl-e">.Tweet</span> { <span class="pl-c">/* … */</span> }
+<span class="pl-e">.Tweet.is-expanded</span> { <span class="pl-c">/* … */</span> }
+
+&lt;<span class="pl-ent">article</span> class="Tweet is-expanded"&gt;
+  …
+&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
+
+<p><strong>Wrong:</strong></p>
+
+<div class="highlight highlight-source-css"><pre><span class="pl-e">.Tweet</span> { <span class="pl-c">/* … */</span> }
+<span class="pl-e">.Tweet.expanded</span> { <span class="pl-c">/* … */</span> }</pre></div>
+
+<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet expanded<span class="pl-pds">"</span></span>&gt;
+  …
+&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
+
+<p>We should always rely on the same terminology to express state of a component: i.e.: a common term for <code>is-active</code>, <code>is-expanded</code>, <code>is-selected</code>, <code>is-highlighted</code>, ... </p>
+
+<h2>
+  <a id="javascript" class="anchor" href="#javascript" aria-hidden="true"><span class="octicon octicon-link"></span></a>JavaScript</h2>
+
+<p>Syntax: <code>js-&lt;targetName&gt;</code></p>
+
+<p>JavaScript-specific classes reduce the risk that changing the structure or theme of components will inadvertently affect any required JavaScript behaviour and complex functionality. It is not neccesarry to use them in every case, just think of them as a tool in your utility belt. If you are creating a class, which you dont intend to use for styling, but instead only as a selector in JavaScript, you should probably be adding the js- prefix. In practice this looks like this:</p>
+
+<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>/login<span class="pl-pds">"</span></span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Btn Btn-primary js-login<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">a</span>&gt;</pre></div>
+
+<p><strong>JavaScript-specific classes should not, under any circumstances, be styled.</strong></p>
+
+<hr>
+
+<h2>
+  <a id="a-word-on-precompilers" class="anchor" href="#a-word-on-precompilers" aria-hidden="true"><span class="octicon octicon-link"></span></a>A word on (Pre)compilers</h2>
+
+<p>Since we use Rails as a backend, we make use of Sprockets to make all the dirty work with stylesheets (and javascripts). Many of the stylesheets are constructed by simply writing <code>require_directory</code> —<a href="http://markdotto.com/2014/07/23/githubs-css/">this is awesome, but it also kind of sucks</a>.</p>
+
+<p>Preferably we should use <code>@import</code> instead of <code>require</code> when possible.
+  <a href="http://pivotallabs.com/structure-your-sass-files-with-import/">http://pivotallabs.com/structure-your-sass-files-with-import/</a></p>
+
+<p>When using require we should list the required files in the order they must be applied, as an added control to avoid undesired behaviours.</p>
+
+<p><strong>Bad:</strong></p>
+
+<pre><code>/*
+*= require dashboard/header
+*= require dashboard/table
+*/
+</code></pre>
+
+<p><strong>Worse:</strong></p>
+
+<pre><code>/*
+*= require_tree dashboard
+*/
+</code></pre>
+
+<p><strong>Good:</strong></p>
+
+<pre><code>@import "dashboard/header";
+@import "dashboard/tables";
+</code></pre>
+
+<p><strong>Better:</strong></p>
+
+<pre><code>@import
+"dashboard/header",
+"dashboard/tables";
+</code></pre>
+
+<hr>
+
+<h2>
+  <a id="structure-sample" class="anchor" href="#structure-sample" aria-hidden="true"><span class="octicon octicon-link"></span></a>Structure sample</h2>
+
+<pre><code>
+.Btn {}
+
+  .Btn--m {}
+
+  .Btn--highlight {}
+
+  .Btn--green {}
+
+  .Btn.is-active {}
+
+.Menu {}
+
+  .Menu-item {}
+
+  .Menu-link {}
+
+.Header {}
+
+  .Navbar {}
+
+    .Navbar-header {}
+
+      .Navbar-brand {}
+
+      .Navbar-searchField {}
+
+      .Navbar-searchButton {}
+
+    .Navbar-menu {}
+
+      .Navbar-menuItem {}
+
+      .Navbar-menuLink {}
+
+.Dashboard {}
+
+  .Dashboard-header {}
+
+    .Dashboard-avatar {}
+
+    .Dashboard-title {}
+
+    .Dashboard-menu {}
+
+  .Dashboard-subHeader {}
+
+    .Dashboard-subMenu {}
+
+      .Dashboard-subMenuItem {}
+
+      .Dashboard-subMenuLink {}
+
+
+.Block {}
+
+  .Block-thumbnail {}
+
+  .Block-title {}
+
+  .Block-description {}
+
+  .Block-tags {}
+
+  .Block-status {}
+
+  .Block-footer {}
+</code></pre>
+
+  <hr>
+
+  <h2>
+    <a id="colors" class="anchor" href="#colors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Colors</h2>
+
+  <h4>
+    <a id="colorsscss" class="anchor" href="#colorsscss" aria-hidden="true"><span class="octicon octicon-link"></span></a>colors.scss</h4>
+
+  <p>Syntax: <code>$c&lt;colorName&gt;</code></p>
+
+  <h4>
+    <a id="sample" class="anchor" href="#sample" aria-hidden="true"><span class="octicon octicon-link"></span></a>Sample</h4>
+
+  <div class="highlight highlight-source-css"><pre>// Colors
+// --------------------------------------------------
+// Paragraphs
+$cTypography-headers:           rgba(#333, 1);
+$cTypography-paragraphs:        rgba(#666, 1);
+$cTypography-secondary:         rgba(#999, 1);
+$cTypography-help:              rgba(<span class="pl-e">#CCC</span>, 1);
+$cTypography-headersOverBlack:  rgba(<span class="pl-e">#FFF</span>, 1);
+$cTypography-<span class="pl-ent">link</span>:              rgba(#0090D7, 1);
+$cTypography-linkHover:         rgba(#62B4E3, 1);
+$cTypography-linkSelected:      rgba(#333, 1);
+
+// Structure
+$cStructure-mainBkg:  rgba(<span class="pl-e">#FFF</span>, 1);
+$cStructure-mainLine: rgba(<span class="pl-e">#DDD</span>, 1);
+$cStructure-grayBkg:  rgba(<span class="pl-e">#F9F9F9</span>, 1);
+$cStructure-softLine: rgba(<span class="pl-e">#EEE</span>, 1);
+
+// Highlight
+$cHighlight-main:     rgba(#0090D7, 1);
+$cHighlight-positive: rgba(#8FB83F, 1);
+$cHighlight-negative: rgba(<span class="pl-e">#C74B43</span>, 1);
+$cHighlight-alert:    rgba(<span class="pl-e">#C67B44</span>, 1);</pre></div>
+
+    <p>Don't use named colors, try to use meaningful names.</p>
+
+    <hr>
+
+    <h2>
+      <a id="z-index" class="anchor" href="#z-index" aria-hidden="true"><span class="octicon octicon-link"></span></a>Z-Index</h2>
+
+    <h4>
+      <a id="z-indexscss" class="anchor" href="#z-indexscss" aria-hidden="true"><span class="octicon octicon-link"></span></a>z-index.scss</h4>
+
+    <div class="highlight highlight-source-css"><pre>// Z-Index Scale (private vars)
+// --------------------------------------------------
+@zIndex-1:   100;
+@zIndex-2:   200;
+@zIndex-3:   300;
+@zIndex-4:   400;
+@zIndex-5:   500;
+@zIndex-6:   600;
+@zIndex-7:   700;
+@zIndex-8:   800;
+@zIndex-9:   900;
+@zIndex-10: 1000;</pre></div>
+
+      <h4>
+        <a id="z-index-file-use" class="anchor" href="#z-index-file-use" aria-hidden="true"><span class="octicon octicon-link"></span></a>z-index file use</h4>
+
+<pre><code>// Z-Index Applications
+// --------------------------------------------------
+@zIndex-1--screenForeground:        @zIndex-1;
+@zIndex-1--followUpVisibility:      @zIndex-1;
+@zIndex-1--prlWelcome:              @zIndex-1;
+@zIndex-1--appImageDropdown:        @zIndex-1;
+@zIndex-1--surfaceUnder:            @zIndex-1;
+@zIndex-1--blockGroup:              @zIndex-1;
+
+(…)
+
+@zIndex-9--zoomOverlayTarget:       @zIndex-9;
+@zIndex-9--navOverlayTouch:         @zIndex-9;
+@zIndex-9--overlay:                 @zIndex-9;
+@zIndex-9--dialog:                  @zIndex-9;
+@zIndex-9--tooltip:                 @zIndex-9;
+</code></pre>
+
+        <hr>
+
+        <h2>
+          <a id="formatting" class="anchor" href="#formatting" aria-hidden="true"><span class="octicon octicon-link"></span></a>Formatting</h2>
+
+        <p>From: <a href="https://gist.github.com/fat/a47b882eb5f84293c4ed">https://gist.github.com/fat/a47b882eb5f84293c4ed</a></p>
+
+        <p>The following are some high level page formatting style rules.</p>
+
+        <p><a name="user-content-property-value"></a></p>
+
+        <h3>
+          <a id="property-value" class="anchor" href="#property-value" aria-hidden="true"><span class="octicon octicon-link"></span></a>Property: value</h3>
+
+        <p>There should be a blank space between a property and a value:</p>
+
+        <p><strong>Right:</strong></p>
+
+<div class="highlight highlight-source-css"><pre><span class="pl-e">.content-edit</span> { <span class="pl-c1"><span class="pl-c1">background</span></span>: <span class="pl-c1">red</span> }</pre></div>
+
+        <p><strong>Wrong:</strong></p>
+
+<div class="highlight highlight-source-css"><pre><span class="pl-e">.content-edit</span> {<span class="pl-c1"><span class="pl-c1">background</span></span>:<span class="pl-c1">red</span>}</pre></div>
+
+        <p>If you have to define an only one property, leave blank spaces between brackets.</p>
+
+        <p><a name="user-content-spacing"></a></p>
+
+        <h3>
+          <a id="spacing" class="anchor" href="#spacing" aria-hidden="true"><span class="octicon octicon-link"></span></a>Spacing</h3>
+
+        <p>CSS rules should be comma seperated but live on new lines:</p>
+
+        <p><strong>Right:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span>,
+<span class="pl-e">.content-edit</span> {
+  …
+}</pre></div>
+
+        <p><strong>Wrong:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span>, <span class="pl-e">.content-edit</span> {
+  …
+}</pre></div>
+
+        <p>CSS blocks should be seperated by a single new line. not two. not 0.</p>
+
+        <p><strong>Right:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span> {
+  …
+}
+<span class="pl-e">.content-edit</span> {
+  …
+}</pre></div>
+
+        <p><strong>Wrong:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span> {
+  …
+}
+
+<span class="pl-e">.content-edit</span> {
+  …
+}</pre></div>
+
+        <hr>
+
+        <h3>
+          <a id="quotes" class="anchor" href="#quotes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Quotes</h3>
+
+        <p>Quotes are optional in CSS and LESS. We use double quotes as it is visually clearer that the string is not a selector or a style property.</p>
+
+        <p><strong>Right:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre>background-image: url("/<span class="pl-ent">img</span>/you<span class="pl-e">.jpg</span>");
+font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;</pre></div>
+
+        <p><strong>Wrong:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre>background-image: url(/<span class="pl-ent">img</span>/you<span class="pl-e">.jpg</span>);
+font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;</pre></div>
+
+        <hr>
+
+        <h3>
+          <a id="colors-1" class="anchor" href="#colors-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Colors</h3>
+
+        <p>When implementing feature styles, you should only be using color variables provided by colors.css.scss.</p>
+
+        <p>When adding a color variable to colors.css.scss, using RGB and RGBA color units are preferred over hex, named, HSL, or HSLA values.</p>
+
+        <p><strong>Right:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre>rgb(50, 50, 50);
+rgba(50, 50, 50, 0<span class="pl-e">.2</span>);</pre></div>
+
+        <p><strong>Wrong:</strong></p>
+
+        <div class="highlight highlight-source-css"><pre><span class="pl-e">#FFF</span>;
+<span class="pl-e">#FFFFFF</span>;
+white;
+hsl(120, 100%, 50%);
+hsla(120, 100%, 50%, 1);</pre></div>
+
+        <hr>
+
+        <h3>
+          <a id="things-to-add-to-the-guide" class="anchor" href="#things-to-add-to-the-guide" aria-hidden="true"><span class="octicon octicon-link"></span></a>Things to add to the guide</h3>
+
+        <ol>
+          <li>Define a type scale (variables for font-sizes, weights, letter-spacing, line-heights, etc.).</li>
+          <li>
+            <code>.u-</code> prefixed class name for single purpose utility classes like .u-underline, .u-capitalize, etc. (not sure about this one)</li>
+          <li>Don't use compass predefined functions, create a mixin in new <code>mixins.css.scss</code>file.</li>
+          <li>No more clearfix or layout hacks, use flexbox:
+
+            <ul>
+              <li><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">http://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></li>
+              <li><a href="http://chriswrightdesign.com/experiments/flexbox-adventures/">http://chriswrightdesign.com/experiments/flexbox-adventures/</a></li>
+            </ul>
+          </li>
+        </ol>
+
+        <hr>
+
+        <h3>
+          <a id="csscomb-config" class="anchor" href="#csscomb-config" aria-hidden="true"><span class="octicon octicon-link"></span></a>CSSComb config</h3>
+
+<pre><code>   "config": {
+
+        // Whether to add a semicolon after the last value/mixin.
+        "always-semicolon": true,
+
+        // Set indent for code inside blocks, including media queries and nested rules.
+        "block-indent": "  ",
+
+        // Unify case of hexadecimal colors.
+        "color-case": "lower",
+
+        // Whether to expand hexadecimal colors or use shorthands.
+        "color-shorthand": true,
+
+        // Unify case of element selectors.
+        "element-case": "lower",
+
+        // Add/remove line break at EOF.
+        "eof-newline": true,
+
+        // Add/remove leading zero in dimensions.
+        "leading-zero": false,
+
+        // Unify quotes style.
+        "quotes": "single",
+
+        // Remove all rulesets that contain nothing but spaces.
+        "remove-empty-rulesets": true,
+
+        // Set space after `:` in declarations.
+        "space-after-colon": " ",
+
+        // Set space after combinator (for example, in selectors like `p &gt; a`).
+        "space-after-combinator": " ",
+
+        // Set space after `{`.
+        "space-after-opening-brace": "\n",
+
+        // Set space after selector delimiter.
+        "space-after-selector-delimiter": "\n",
+
+        // Set space before `}`.
+        "space-before-closing-brace": "\n",
+
+        // Set space before `:` in declarations.
+        "space-before-colon": "",
+
+        // Set space before combinator (for example, in selectors like `p &gt; a`).
+        "space-before-combinator": " ",
+
+        // Set space before `{`.
+        "space-before-opening-brace": " ",
+
+        // Set space before selector delimiter.
+        "space-before-selector-delimiter": "",
+
+        // Set space between declarations (i.e. `color: tomato`).
+        "space-between-declarations": "\n",
+
+        // Whether to trim trailing spaces.
+        "strip-spaces": true,
+
+        // Whether to remove units in zero-valued dimensions.
+        "unitless-zero": true,
+
+        // Whether to align prefixes in properties and values.
+        "vendor-prefix-align": true,
+
+        // Sort properties in particular order.
+        "sort-order": [
+            "position",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "z-index",
+            "display",
+            "float",
+            "width",
+            "min-width",
+            "max-width",
+            "height",
+            "min-height",
+            "max-height",
+            "-webkit-box-sizing",
+            "-moz-box-sizing",
+            "box-sizing",
+            "-webkit-appearance",
+            "-moz-appearance",
+            "appearance",
+            "padding",
+            "padding-top",
+            "padding-right",
+            "padding-bottom",
+            "padding-left",
+            "margin",
+            "margin-top",
+            "margin-right",
+            "margin-bottom",
+            "margin-left",
+            "overflow",
+            "overflow-x",
+            "overflow-y",
+            "-webkit-overflow-scrolling",
+            "-ms-overflow-x",
+            "-ms-overflow-y",
+            "-ms-overflow-style",
+            "clip",
+            "clear",
+            "src",
+            "font",
+            "font-family",
+            "font-size",
+            "font-weight",
+            "font-style",
+            "font-variant",
+            "font-size-adjust",
+            "font-stretch",
+            "font-effect",
+            "font-emphasize",
+            "font-emphasize-position",
+            "font-emphasize-style",
+            "font-smooth",
+            "-webkit-hyphens",
+            "-moz-hyphens",
+            "hyphens",
+            "line-height",
+            "color",
+            "text-align",
+            "-webkit-text-align-last",
+            "-moz-text-align-last",
+            "-ms-text-align-last",
+            "text-align-last",
+            "text-emphasis",
+            "text-emphasis-color",
+            "text-emphasis-style",
+            "text-emphasis-position",
+            "text-decoration",
+            "text-underline-position",
+            "-webkit-text-decoration-style",
+            "-moz-text-decoration-style",
+            "text-decoration-style",
+            "-moz-text-decoration-color",
+            "text-decoration-color",
+            "-moz-text-decoration-line",
+            "text-decoration-line",
+            "text-indent",
+            "-ms-text-justify",
+            "text-justify",
+            "text-outline",
+            "-ms-text-overflow",
+            "text-overflow",
+            "text-overflow-ellipsis",
+            "text-overflow-mode",
+            "text-shadow",
+            "text-transform",
+            "text-wrap",
+            "-webkit-text-size-adjust",
+            "-moz-text-size-adjust",
+            "-ms-text-size-adjust",
+            "text-size-adjust",
+            "letter-spacing",
+            "-ms-word-break",
+            "word-break",
+            "word-spacing",
+            "-ms-word-wrap",
+            "word-wrap",
+            "-moz-tab-size",
+            "-o-tab-size",
+            "tab-size",
+            "white-space",
+            "vertical-align",
+            "list-style",
+            "list-style-position",
+            "list-style-type",
+            "list-style-image",
+            "pointer-events",
+            "-webkit-touch-action",
+            "-ms-touch-action",
+            "touch-action",
+            "cursor",
+            "visibility",
+            "zoom",
+            "flex-direction",
+            "flex-order",
+            "flex-pack",
+            "flex-align",
+            "table-layout",
+            "empty-cells",
+            "caption-side",
+            "border-spacing",
+            "border-collapse",
+            "content",
+            "quotes",
+            "counter-reset",
+            "counter-increment",
+            "resize",
+            "-webkit-user-select",
+            "-moz-user-select",
+            "-ms-user-select",
+            "user-select",
+            "nav-index",
+            "nav-up",
+            "nav-right",
+            "nav-down",
+            "nav-left",
+            "background",
+            "background-color",
+            "background-image",
+            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+            "filter:progid:DXImageTransform.Microsoft.gradient",
+            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+            "filter",
+            "background-repeat",
+            "background-attachment",
+            "background-position",
+            "background-position-x",
+            "-ms-background-position-x",
+            "background-position-y",
+            "-ms-background-position-y",
+            "-webkit-background-clip",
+            "-moz-background-clip",
+            "background-clip",
+            "background-origin",
+            "-webkit-background-size",
+            "-moz-background-size",
+            "-o-background-size",
+            "background-size",
+            "border",
+            "border-width",
+            "border-style",
+            "border-color",
+            "border-top",
+            "border-top-width",
+            "border-top-style",
+            "border-top-color",
+            "border-right",
+            "border-right-width",
+            "border-right-style",
+            "border-right-color",
+            "border-bottom",
+            "border-bottom-width",
+            "border-bottom-style",
+            "border-bottom-color",
+            "border-left",
+            "border-left-width",
+            "border-left-style",
+            "border-left-color",
+            "-webkit-box-decoration-break",
+            "box-decoration-break",
+            "-webkit-border-radius",
+            "-moz-border-radius",
+            "border-radius",
+            "-webkit-border-top-left-radius",
+            "-moz-border-radius-topleft",
+            "border-top-left-radius",
+            "-webkit-border-top-right-radius",
+            "-moz-border-radius-topright",
+            "border-top-right-radius",
+            "-webkit-border-bottom-right-radius",
+            "-moz-border-radius-bottomright",
+            "border-bottom-right-radius",
+            "-webkit-border-bottom-left-radius",
+            "-moz-border-radius-bottomleft",
+            "border-bottom-left-radius",
+            "-webkit-border-image",
+            "-moz-border-image",
+            "-o-border-image",
+            "border-image",
+            "-webkit-border-image-source",
+            "-moz-border-image-source",
+            "-o-border-image-source",
+            "border-image-source",
+            "-webkit-border-image-slice",
+            "-moz-border-image-slice",
+            "-o-border-image-slice",
+            "border-image-slice",
+            "-webkit-border-image-width",
+            "-moz-border-image-width",
+            "-o-border-image-width",
+            "border-image-width",
+            "-webkit-border-image-outset",
+            "-moz-border-image-outset",
+            "-o-border-image-outset",
+            "border-image-outset",
+            "-webkit-border-image-repeat",
+            "-moz-border-image-repeat",
+            "-o-border-image-repeat",
+            "border-image-repeat",
+            "outline",
+            "outline-width",
+            "outline-style",
+            "outline-color",
+            "outline-offset",
+            "-webkit-box-shadow",
+            "-moz-box-shadow",
+            "box-shadow",
+            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+            "opacity",
+            "-ms-interpolation-mode",
+            "-webkit-transition",
+            "-moz-transition",
+            "-ms-transition",
+            "-o-transition",
+            "transition",
+            "-webkit-transition-delay",
+            "-moz-transition-delay",
+            "-ms-transition-delay",
+            "-o-transition-delay",
+            "transition-delay",
+            "-webkit-transition-timing-function",
+            "-moz-transition-timing-function",
+            "-ms-transition-timing-function",
+            "-o-transition-timing-function",
+            "transition-timing-function",
+            "-webkit-transition-duration",
+            "-moz-transition-duration",
+            "-ms-transition-duration",
+            "-o-transition-duration",
+            "transition-duration",
+            "-webkit-transition-property",
+            "-moz-transition-property",
+            "-ms-transition-property",
+            "-o-transition-property",
+            "transition-property",
+            "-webkit-transform",
+            "-moz-transform",
+            "-ms-transform",
+            "-o-transform",
+            "transform",
+            "-webkit-transform-origin",
+            "-moz-transform-origin",
+            "-ms-transform-origin",
+            "-o-transform-origin",
+            "transform-origin",
+            "-webkit-animation",
+            "-moz-animation",
+            "-ms-animation",
+            "-o-animation",
+            "animation",
+            "-webkit-animation-name",
+            "-moz-animation-name",
+            "-ms-animation-name",
+            "-o-animation-name",
+            "animation-name",
+            "-webkit-animation-duration",
+            "-moz-animation-duration",
+            "-ms-animation-duration",
+            "-o-animation-duration",
+            "animation-duration",
+            "-webkit-animation-play-state",
+            "-moz-animation-play-state",
+            "-ms-animation-play-state",
+            "-o-animation-play-state",
+            "animation-play-state",
+            "-webkit-animation-timing-function",
+            "-moz-animation-timing-function",
+            "-ms-animation-timing-function",
+            "-o-animation-timing-function",
+            "animation-timing-function",
+            "-webkit-animation-delay",
+            "-moz-animation-delay",
+            "-ms-animation-delay",
+            "-o-animation-delay",
+            "animation-delay",
+            "-webkit-animation-iteration-count",
+            "-moz-animation-iteration-count",
+            "-ms-animation-iteration-count",
+            "-o-animation-iteration-count",
+            "animation-iteration-count",
+            "-webkit-animation-direction",
+            "-moz-animation-direction",
+            "-ms-animation-direction",
+            "-o-animation-direction",
+            "animation-direction",
+            "-webkit-text-orientation",
+            "-moz-text-orientation",
+            "-o-text-orientation",
+            "text-orientation",
+            "-ms-writing-mode",
+            "text-rendering",
+            "-webkit-font-smoothing",
+            "-moz-osx-font-smoothing",
+            "font-smoothing",
+            "direction",
+            "unicode-bidi"
+        ]
+    }
+</code></pre>
+
+
+
+
+
+
+
+
 
     </div>
   </div>