640 lines
36 KiB
HTML
640 lines
36 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<title>My presentation</title>
|
|
<script src='assets/application.js' type='text/javascript'></script>
|
|
<style type='text/css'>.hll { background-color: #ffffcc }
|
|
.c { color: #408080; font-style: italic } /* Comment */
|
|
.err { border: 1px solid #FF0000 } /* Error */
|
|
.k { color: #008000; font-weight: bold } /* Keyword */
|
|
.o { color: #666666 } /* Operator */
|
|
.cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
|
.cp { color: #BC7A00 } /* Comment.Preproc */
|
|
.c1 { color: #408080; font-style: italic } /* Comment.Single */
|
|
.cs { color: #408080; font-style: italic } /* Comment.Special */
|
|
.gd { color: #A00000 } /* Generic.Deleted */
|
|
.ge { font-style: italic } /* Generic.Emph */
|
|
.gr { color: #FF0000 } /* Generic.Error */
|
|
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
|
.gi { color: #00A000 } /* Generic.Inserted */
|
|
.go { color: #808080 } /* Generic.Output */
|
|
.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
|
.gs { font-weight: bold } /* Generic.Strong */
|
|
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
|
.gt { color: #0040D0 } /* Generic.Traceback */
|
|
.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
|
|
.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
|
|
.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
|
|
.kp { color: #008000 } /* Keyword.Pseudo */
|
|
.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
|
|
.kt { color: #B00040 } /* Keyword.Type */
|
|
.m { color: #666666 } /* Literal.Number */
|
|
.s { color: #BA2121 } /* Literal.String */
|
|
.na { color: #7D9029 } /* Name.Attribute */
|
|
.nb { color: #008000 } /* Name.Builtin */
|
|
.nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
|
.no { color: #880000 } /* Name.Constant */
|
|
.nd { color: #AA22FF } /* Name.Decorator */
|
|
.ni { color: #999999; font-weight: bold } /* Name.Entity */
|
|
.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
|
.nf { color: #0000FF } /* Name.Function */
|
|
.nl { color: #A0A000 } /* Name.Label */
|
|
.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
|
.nt { color: #008000; font-weight: bold } /* Name.Tag */
|
|
.nv { color: #19177C } /* Name.Variable */
|
|
.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
|
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
.mf { color: #666666 } /* Literal.Number.Float */
|
|
.mh { color: #666666 } /* Literal.Number.Hex */
|
|
.mi { color: #666666 } /* Literal.Number.Integer */
|
|
.mo { color: #666666 } /* Literal.Number.Oct */
|
|
.sb { color: #BA2121 } /* Literal.String.Backtick */
|
|
.sc { color: #BA2121 } /* Literal.String.Char */
|
|
.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
|
|
.s2 { color: #BA2121 } /* Literal.String.Double */
|
|
.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
|
.sh { color: #BA2121 } /* Literal.String.Heredoc */
|
|
.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
|
.sx { color: #008000 } /* Literal.String.Other */
|
|
.sr { color: #BB6688 } /* Literal.String.Regex */
|
|
.s1 { color: #BA2121 } /* Literal.String.Single */
|
|
.ss { color: #19177C } /* Literal.String.Symbol */
|
|
.bp { color: #008000 } /* Name.Builtin.Pseudo */
|
|
.vc { color: #19177C } /* Name.Variable.Class */
|
|
.vg { color: #19177C } /* Name.Variable.Global */
|
|
.vi { color: #19177C } /* Name.Variable.Instance */
|
|
.il { color: #666666 } /* Literal.Number.Integer.Long */</style>
|
|
<link href='assets/application.css' rel='stylesheet' type='text/css' />
|
|
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css' />
|
|
|
|
</head>
|
|
<body class='loading'>
|
|
<div id='slides-container'>
|
|
<div id='slides'><div class="slide"><div class="content">
|
|
<h1>Welcome</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Sass</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>What is Sass?</h1>
|
|
|
|
<h2>Its a preprocesor</h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>What does it do?</h1>
|
|
|
|
<ul>
|
|
<li>Variables <code>$foo</code></li>
|
|
<li>Mixins <code>@mixin</code></li>
|
|
<li>Functions</li>
|
|
<li>Selector Inheritance <code>@extend, &</code></li>
|
|
<li>Control Directives <code>@if, @for, @each, @while</code></li>
|
|
<li>Its a language!</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide style-variables"><div class="content">
|
|
<h1>Variables</h1>
|
|
|
|
<div class="highlight"><pre> <span class="nv">$foo</span><span class="o"> :</span> <span class="mh">#fffff</span><span class="p">;</span>
|
|
<span class="nv">$bar</span><span class="o"> :</span> <span class="p">(</span><span class="mi">1</span><span class="kt">px</span> <span class="o">*</span> <span class="mi">2</span><span class="kt">em</span><span class="p">)</span> <span class="o">/</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-mixins"><div class="content">
|
|
<h1>Functions and Mixins</h1>
|
|
|
|
<div class="highlight"><pre><span class="k">@function</span> <span class="nt">get-stops</span><span class="o">(</span><span class="err">$</span><span class="nt">colors</span><span class="o">,</span> <span class="err">$</span><span class="nt">stops</span><span class="o">)</span> <span class="p">{</span>
|
|
<span class="nv">$out</span><span class="o">:</span><span class="p">();</span>
|
|
<span class="k">@each</span> <span class="err">$</span><span class="nt">color</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">colors</span> <span class="p">{</span>
|
|
<span class="nv">$i</span><span class="o">:</span> <span class="nf">index</span><span class="p">(</span><span class="nv">$colors</span><span class="o">,</span> <span class="nv">$color</span><span class="p">);</span>
|
|
<span class="nv">$stop</span><span class="o">:</span> <span class="mi">0</span><span class="kt">%</span> <span class="o">+</span> <span class="nf">nth</span><span class="p">(</span><span class="nv">$stops</span><span class="o">,</span> <span class="nv">$i</span><span class="p">);</span>
|
|
<span class="nv">$out</span><span class="o">:</span> <span class="nf">append</span><span class="p">(</span><span class="nv">$out</span><span class="o">,</span> <span class="nv">$color</span> <span class="nv">$stop</span><span class="o">,</span> <span class="s1">'</span><span class="s2">comma'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="k">@return</span> <span class="err">$</span><span class="nt">out</span><span class="o">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">@mixin</span><span class="nf"> menu-level2-active</span> <span class="p">{</span>
|
|
<span class="nv">$args</span><span class="o">:</span> <span class="nf">get-stops</span><span class="p">(</span><span class="nv">$menu-active-colors</span><span class="o">,</span> <span class="nv">$menu-active-stops</span><span class="p">);</span>
|
|
<span class="k">@include</span><span class="nd"> background</span><span class="p">(</span><span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$menu-active-direction</span><span class="o">,</span> <span class="nv">$args</span><span class="p">));</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-inheritance"><div class="content">
|
|
<h1>Inheritance</h1>
|
|
|
|
<div class="highlight"><pre><span class="nt">a</span> <span class="p">{</span>
|
|
|
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$link-color</span><span class="p">;</span>
|
|
|
|
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$link-hover-color</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-extend"><div class="content">
|
|
<h2>Extend</h2>
|
|
|
|
<div class="highlight"><pre><span class="nc">.foo</span> <span class="p">{</span>
|
|
<span class="na">font-size</span><span class="o"> :</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nc">.bar</span> <span class="p">{</span>
|
|
<span class="k">@extend</span> <span class="nc">.foo</span><span class="o">;</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<div class="highlight"><pre><span class="nc">.foo</span><span class="o">,</span> <span class="nc">.bar</span> <span class="p">{</span>
|
|
<span class="k">font-size</span> <span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Best Practices</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Colors</h1>
|
|
|
|
</div></div><div class="slide style-bad"><div class="content">
|
|
<h1>This is bad</h1>
|
|
|
|
<div class="highlight"><pre><span class="nv">$orange</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="nv">$blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">89</span><span class="o">,</span><span class="mi">167</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$lighter-blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="nv">$gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$dark-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$light-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$lighter-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$lightest-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
|
|
<span class="nc">.foo</span> <span class="p">{</span>
|
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$blue</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-better"><div class="content">
|
|
<h2>This is ok, but we can do better</h2>
|
|
|
|
<div class="highlight"><pre><span class="c1">// dark gray</span>
|
|
<span class="na">$text-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="o">,</span><span class="mi">33</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="c1">// lightest gray</span>
|
|
<span class="na">$text-compliment-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="c1">//h1, h2</span>
|
|
<span class="na">$title-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="c1">// blue</span>
|
|
<span class="na">$primary-accent-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">89</span><span class="o">,</span><span class="mi">167</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="c1">// blue on dark</span>
|
|
<span class="na">$primary-accent-compliment-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="c1">//orange - link color</span>
|
|
<span class="na">$secondary-accent-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">199</span><span class="o">,</span> <span class="mi">105</span><span class="o">,</span> <span class="mi">0</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="c1">// light gray</span>
|
|
<span class="na">$ancillary-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="c1">// lighter gray</span>
|
|
<span class="na">$ancillary-compliment-color</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-pallet"><div class="content">
|
|
<h1>Pallets</h1>
|
|
|
|
<div class="highlight"><pre><span class="c1">// _pallet.scss</span>
|
|
<span class="nv">$orange</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="nv">$blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">33</span><span class="o">,</span><span class="mi">89</span><span class="o">,</span><span class="mi">167</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$lighter-blue</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">138</span><span class="o">,</span> <span class="mi">182</span><span class="o">,</span> <span class="mi">225</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="nv">$gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="o">,</span><span class="mi">63</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$light-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="o">,</span><span class="mi">109</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$lighter-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="o">,</span><span class="mi">150</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
<span class="na">$lightest-gray</span><span class="o"> :</span> <span class="nf">rgb</span><span class="p">(</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="o">,</span><span class="mi">188</span><span class="p">)</span> <span class="nv">!default</span><span class="p">;</span>
|
|
|
|
<span class="c1">// _colors.scss</span>
|
|
<span class="c1">//text</span>
|
|
<span class="na">$text-color</span><span class="o"> :</span> <span class="nv">$dark-gray</span><span class="p">;</span>
|
|
<span class="na">$text-compliment-color</span><span class="o"> :</span> <span class="nv">$lightest-gray</span><span class="p">;</span>
|
|
<span class="na">$title-color</span><span class="o"> :</span> <span class="nv">$gray</span><span class="p">;</span>
|
|
<span class="na">$primary-accent-color</span><span class="o"> :</span> <span class="nv">$blue</span><span class="p">;</span>
|
|
<span class="na">$primary-accent-compliment-color</span><span class="o"> :</span> <span class="nv">$lighter-blue</span><span class="p">;</span>
|
|
<span class="na">$secondary-accent-color</span><span class="o"> :</span> <span class="nv">$orange</span><span class="p">;</span>
|
|
<span class="na">$ancillary-color</span><span class="o"> :</span> <span class="nv">$light-gray</span><span class="p">;</span>
|
|
<span class="na">$ancillary-compliment-color</span><span class="o"> :</span> <span class="nv">$lighter-gray</span><span class="p">;</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-important style-long"><div class="content">
|
|
<p><img src="/assets/rage-face.png"></p>
|
|
|
|
<h1>Only use your pallet colors to define your more descriptive color variables!</h1>
|
|
|
|
</div></div><div class="slide style-variable-layout"><div class="content">
|
|
<h1>Variables Definitions</h1>
|
|
|
|
</div></div><div class="slide style-bad-variables"><div class="content">
|
|
<div class="highlight"><pre><span class="c1">// There are 100 lines before this</span>
|
|
<span class="nc">.content_head</span> <span class="p">{</span>
|
|
<span class="k">@include</span><span class="nd"> clearfix</span><span class="p">;</span>
|
|
|
|
<span class="nc">.hr</span> <span class="p">{</span>
|
|
<span class="nv">$height</span><span class="o"> :</span> <span class="mi">2</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">padding-top</span><span class="o"> :</span> <span class="p">(</span><span class="nf">rhythm</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="nv">$height</span><span class="p">;</span>
|
|
<span class="na">width</span><span class="o"> :</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
|
|
<span class="na">border-bottom</span><span class="o"> :</span> <span class="nv">$height</span> <span class="no">solid</span> <span class="nv">$secondary-accent-color</span><span class="p">;</span>
|
|
<span class="na">margin-bottom</span><span class="o"> :</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">display</span><span class="o"> :</span> <span class="no">block</span><span class="p">;</span>
|
|
<span class="k">@extend</span> <span class="nc">.float-right</span><span class="o">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nc">.release_identifiers</span> <span class="p">{</span>
|
|
<span class="k">@extend</span> <span class="nc">.float-right</span><span class="o">;</span>
|
|
<span class="nt">text-align</span> <span class="nd">:</span> <span class="nt">right</span><span class="o">;</span>
|
|
<span class="nt">font-family</span> <span class="nd">:</span> <span class="err">$</span><span class="nt">ancillary-font</span><span class="o">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-important"><div class="content">
|
|
<h1>Always define your variables at the top of each file!</h1>
|
|
|
|
</div></div><div class="slide style-big-list style-variable-why"><div class="content">
|
|
<ul>
|
|
<li>Easy to find</li>
|
|
<li>Easy to update</li>
|
|
<li>No suprises</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
|
|
|
|
<div class="highlight"><pre><span class="cm">/* Local Variaibles */</span>
|
|
<span class="na">$release-content-width</span><span class="o"> :</span> <span class="mi">760</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">$release-content-border-size</span><span class="o"> :</span> <span class="mi">6</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">$release-content-top-margin</span><span class="o"> :</span> <span class="mi">9</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">$release-content-height</span><span class="o"> :</span> <span class="nf">rhythm</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
|
|
|
|
<span class="na">$section-side-width</span><span class="o"> :</span> <span class="nf">column-width</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span>
|
|
<span class="na">$section-side-height</span><span class="o"> :</span> <span class="mi">24</span><span class="p">;</span>
|
|
<span class="na">$section-side-li-padding</span><span class="o"> :</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
|
|
|
|
<span class="na">$control-border-height</span><span class="o"> :</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">$control-box-height</span><span class="o"> :</span> <span class="mi">2</span><span class="p">;</span>
|
|
<span class="na">$control-top-box-leader</span><span class="o"> :</span> <span class="mi">1</span><span class="p">;</span>
|
|
|
|
<span class="na">$group-image-height</span><span class="o"> :</span> <span class="nf">rhythm</span><span class="p">(</span><span class="mi">6</span><span class="p">);</span>
|
|
|
|
<span class="nc">.contents</span> <span class="nc">.show</span> <span class="p">{</span>
|
|
<span class="nt">h1</span> <span class="p">{</span>
|
|
<span class="k">@include</span><span class="nd"> header</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span>
|
|
<span class="k">@include</span><span class="nd"> trailer</span><span class="p">;</span>
|
|
<span class="na">color</span><span class="o"> :</span> <span class="nv">$primary-accent-color</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="c1">// ... goes on for 100+ lines</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Math</h1>
|
|
|
|
<h2>Is your best friend</h2>
|
|
|
|
</div></div><div class="slide style-long"><div class="content">
|
|
<h1><em>Almost</em> every thing a designer does can be converted into some sort of mathmatical layout... <em>ALMOST</em></h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Layout</h1>
|
|
|
|
<div class="highlight"><pre><span class="na">$wrapper-width</span><span class="o"> :</span> <span class="mi">960</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">$sidebar-width</span><span class="o"> :</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="na">$main-content-width</span><span class="o"> :</span> <span class="nv">$wrapper</span> <span class="o">-</span> <span class="nv">$sidebar</span><span class="p">;</span>
|
|
|
|
<span class="nc">.wrapper</span> <span class="p">{</span>
|
|
<span class="na">width</span><span class="o"> :</span> <span class="nv">$wrapper-width</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nc">.sidebar</span> <span class="p">{</span>
|
|
<span class="na">width</span><span class="o"> :</span> <span class="nv">$sidebar-width</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nc">.content</span> <span class="p">{</span>
|
|
<span class="na">width</span><span class="o"> :</span> <span class="nv">$main-content-width</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Ranges</h1>
|
|
|
|
<div class="highlight"><pre><span class="k">@for</span> <span class="nv">$i</span> <span class="ow">from</span> <span class="mi">1</span> <span class="ow">through</span> <span class="mi">4</span> <span class="p">{</span>
|
|
<span class="nt">h</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">i</span><span class="p">}</span> <span class="p">{</span>
|
|
<span class="k">@include</span><span class="nd"> header</span><span class="p">(</span><span class="nv">$i</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Image demensions</h1>
|
|
|
|
<div class="highlight"><pre><span class="nc">.play</span> <span class="p">{</span>
|
|
<span class="na">left</span><span class="o">:</span> <span class="p">(</span><span class="nv">$width</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="p">(</span><span class="nf">global-sprite-width</span><span class="p">(</span><span class="n">play_movie</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
|
|
<span class="na">top</span><span class="o">:</span> <span class="p">(</span><span class="nv">$height</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="p">(</span><span class="nf">global-sprite-height</span><span class="p">(</span><span class="n">play_movie</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Inheritance</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Inception rule!</h1>
|
|
|
|
<p><img src="/assets/InceptionArch_Slusher.jpg" width='800px'></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<p><img src='/assets/36kou7.jpg' height='700px'></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Well you can but it gets messy</h1>
|
|
|
|
<div class="highlight"><pre><span class="nc">.foo</span> <span class="p">{</span>
|
|
<span class="na">width</span><span class="o">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="nc">.bar</span> <span class="p">{</span>
|
|
<span class="na">height</span><span class="o">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="nc">.baz</span> <span class="p">{</span>
|
|
<span class="na">color</span><span class="o"> :</span> <span class="nb">red</span><span class="p">;</span>
|
|
<span class="nc">.what-comes-after-baz</span> <span class="p">{</span>
|
|
<span class="na">border</span><span class="o"> :</span> <span class="nb">green</span> <span class="no">solid</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="k">&</span><span class="nc">.something</span> <span class="p">{</span>
|
|
<span class="k">@extend</span> <span class="nc">.float-left</span><span class="o">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>And slow</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2>Selector layout</h2>
|
|
|
|
<div class="highlight"><pre><span class="nc">.release_title</span> <span class="nt">a</span><span class="p">{</span>
|
|
<span class="k">@extend</span> <span class="nt">h3</span><span class="o">;</span>
|
|
<span class="o">@</span><span class="nt">include</span> <span class="nt">adjust-font-size-to</span><span class="o">(</span><span class="nt">20px</span><span class="o">,</span> <span class="nt">1</span><span class="o">);</span>
|
|
<span class="o">@</span><span class="nt">include</span> <span class="nt">trailer</span><span class="o">;</span>
|
|
|
|
<span class="nt">text-decoration</span> <span class="nd">:</span> <span class="nt">none</span><span class="o">;</span>
|
|
<span class="nt">display</span> <span class="nd">:</span> <span class="nt">block</span><span class="o">;</span>
|
|
|
|
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
|
<span class="na">color</span><span class="o">:</span><span class="nv">$hover-color</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Compass</h1>
|
|
|
|
<h2>http://compass-style.org</h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<ul>
|
|
<li>Stylesheet framework</li>
|
|
<li>Considered sass standard library</li>
|
|
<li>Standalone application</li>
|
|
<li>Has the ability to have application integrations (rails, django, etc.)</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2>Currently the only application integration supported by the core team is rails</h2>
|
|
|
|
</div></div><div class="slide style-big-list"><div class="content">
|
|
<h2>Features</h2>
|
|
|
|
<ul>
|
|
<li>Sprites</li>
|
|
<li>CSS3</li>
|
|
<li>Layout tools</li>
|
|
<li>And much more</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Sprites!</h1>
|
|
|
|
</div></div><div class="slide style-big-list"><div class="content">
|
|
<ul>
|
|
<li>Fewer http requests.</li>
|
|
<li>You don't have a bunch of individual images to manage.</li>
|
|
<li>Customizable</li>
|
|
<li>ITS EASY!</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>This EASY!</h1>
|
|
|
|
<div class="highlight"><pre><span class="k">@import</span> <span class="s2">"my-icons/*.png"</span><span class="p">;</span>
|
|
<span class="k">@include</span><span class="nd"> all-my-icons-sprites</span><span class="p">;</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2>BAM!</h2>
|
|
|
|
<div class="highlight"><pre><span class="nc">.my-icons-sprite</span><span class="o">,</span>
|
|
<span class="nc">.my-icons-delete</span><span class="o">,</span>
|
|
<span class="nc">.my-icons-edit</span><span class="o">,</span>
|
|
<span class="nc">.my-icons-new</span><span class="o">,</span>
|
|
<span class="nc">.my-icons-save</span> <span class="p">{</span> <span class="na">background</span><span class="o">:</span> <span class="sx">url('/images/my-icons-s34fe0604ab.png')</span> <span class="no">no-repeat</span><span class="p">;</span> <span class="p">}</span>
|
|
|
|
<span class="nc">.my-icons-delete</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
|
<span class="nc">.my-icons-edit</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-32</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>
|
|
<span class="nc">.my-icons-new</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-64</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>
|
|
<span class="nc">.my-icons-save</span> <span class="p">{</span> <span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-96</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-big-list style-sprite-layout"><div class="content">
|
|
<h1>Layouts</h1>
|
|
|
|
<ul>
|
|
<li>Vertical (default)</li>
|
|
<li>Horizontal</li>
|
|
<li>Diagonal</li>
|
|
<li>Smart</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Magic Selectors</h1>
|
|
|
|
<ul>
|
|
<li>my-buttons/glossy.png</li>
|
|
<li>my-buttons/glossy_hover.png</li>
|
|
<li>my-buttons/glossy_active.png</li>
|
|
<li>my-buttons/glossy_target.png</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Example</h1>
|
|
|
|
<div class="highlight"><pre><span class="k">@import</span> <span class="s2">"my-buttons/*.png"</span><span class="p">;</span>
|
|
|
|
<span class="nt">a</span> <span class="p">{</span>
|
|
<span class="k">@include</span><span class="nd"> my-buttons-sprite</span><span class="p">(</span><span class="n">glossy</span><span class="p">)</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>BAM!</h1>
|
|
|
|
<div class="highlight"><pre><span class="nc">.my-buttons-sprite</span><span class="o">,</span> <span class="nt">a</span> <span class="p">{</span>
|
|
<span class="na">background</span><span class="o">:</span> <span class="sx">url('/my-buttons-sedfef809e2.png')</span> <span class="no">no-repeat</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nt">a</span> <span class="p">{</span>
|
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nt">a</span><span class="nd">:hover</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy_hover</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy-hover</span> <span class="p">{</span>
|
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-40</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nt">a</span><span class="nd">:target</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy_target</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy-target</span> <span class="p">{</span>
|
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-60</span><span class="kt">px</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="nt">a</span><span class="nd">:active</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy_active</span><span class="o">,</span> <span class="nt">a</span><span class="nc">.glossy-active</span> <span class="p">{</span>
|
|
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-20</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-important"><div class="content">
|
|
<h1>Beware of your file size!</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>We support all CSS3 properties with vendor prefix's and new ones are being added all the time.</h1>
|
|
|
|
</div></div><div class="slide style-big-list"><div class="content">
|
|
<h1>Layout tools</h1>
|
|
|
|
<ul>
|
|
<li>Vertical rhythm</li>
|
|
<li>Grids</li>
|
|
<li>And more!</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Vertical rhythm</h1>
|
|
|
|
<h2>The spacing and arrangement of text as the reader descends the page.</h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2>"Just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost." - 24ways.org</h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
|
|
|
|
<div class='grid' ></div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2>We need help!</h2>
|
|
|
|
<p>https://github.com/chriseppstein/compass</p>
|
|
|
|
<ul>
|
|
<li>Documentation</li>
|
|
<li>Stylesheet cleanup</li>
|
|
<li>Code Refactoring</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2>Core Team</h2>
|
|
|
|
<ul>
|
|
<li>Chris Eppstein</li>
|
|
<li>Scott Davis (me)</li>
|
|
<li>Brandon Mathis</li>
|
|
<li>Eirc Myer (The other one)</li>
|
|
<li>Anthony Short (newest member)</li>
|
|
</ul>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Charity</h1>
|
|
|
|
<h3>United Mitochondrial Disease Foundation</h3>
|
|
|
|
<h3>Please donate - http://umdf.org/compass</h3>
|
|
|
|
</div></div></div>
|
|
<div class='compass'></div>
|
|
<div class='sass'></div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|