979 lines
35 KiB
HTML
979 lines
35 KiB
HTML
<head>
|
||
<link href='../css/cartostyles.css' type='text/css' rel='stylesheet'>
|
||
</head>
|
||
|
||
{{> theme}}
|
||
{{> highlight}}
|
||
{{> jquery}}
|
||
|
||
<script>
|
||
var j = jQuery.noConflict(true);
|
||
j(function() {
|
||
// Click on link with subheadings
|
||
j('#styleguide-menu .submenulink').click(function(event) {
|
||
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) {
|
||
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();
|
||
}
|
||
|
||
// Show current section
|
||
var currentElement = window.location.hash.replace(/#/g, '');
|
||
if (currentElement) {
|
||
var section = currentElement.split('-')[0];
|
||
j('.submenulink[data-section="' + section + '"]').click();
|
||
} else {
|
||
// Show section in Styleguide
|
||
j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<div id="styleguide-menu">
|
||
<ul>
|
||
<li>
|
||
<a class="submenulink" href="#Basics" data-section="Basics">Basics</a>
|
||
</li>
|
||
{{#each menu}}
|
||
<li>
|
||
{{#if headings.0.name}}
|
||
<a class="submenulink" href="#{{name}}" 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="#{{name}}" data-section="{{name}}">{{name}}</a>
|
||
{{/unless}}
|
||
</li>
|
||
{{/each}}
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="styleguide">
|
||
<div class="section" id="Basics" data-section="Basics" data-heading="Basics">
|
||
<div class="comment">
|
||
<h1>Basics</h1>
|
||
<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>
|
||
|
||
<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><ComponentName>[--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><<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>>
|
||
…
|
||
</<span class="pl-ent">article</span>></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><<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>>
|
||
…
|
||
</<span class="pl-ent">article</span>></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><<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>>
|
||
<<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>>
|
||
<<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>>
|
||
…
|
||
</<span class="pl-ent">header</span>>
|
||
<<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>>
|
||
…
|
||
</<span class="pl-ent">div</span>>
|
||
</<span class="pl-ent">article</span>></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> }
|
||
|
||
<<span class="pl-ent">article</span> class="Tweet is-expanded">
|
||
…
|
||
</<span class="pl-ent">article</span>></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><<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>>
|
||
…
|
||
</<span class="pl-ent">article</span>></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-<targetName></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><<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>></<span class="pl-ent">a</span>></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<colorName></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 > 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 > 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>
|
||
|
||
{{#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>
|