add in responsive type demo gif

madeleineostoja · Aug 19, 2015 · 8366c54 · 8366c54
1 parent d353248
commit 8366c54
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 22 deletions.
diff --git a/content/docs/responsive-type.md b/content/docs/responsive-type.md
@@ -4,7 +4,9 @@ anchor: "responsive-type"
 weight: 1
 ---
 
-Create automagical fluid typography with a new `responsive` property on `font-size`. All the typography on this site is responsive, resize your browser window to see it in action!
+Create automagical fluid typography with a new `responsive` property on `font-size`. All the type on this site is responsive, resize your browser to see it in action!
+
+![Responsive Type Demo][demo]
 
 ## Quick start
 Rucksack's responsive typography is fully adjustable, but all you need to get started is to specify `responsive` as a font-size.
@@ -91,3 +93,4 @@ html {
 [calc-polyfill]: https://github.com/closingtag/calc-polyfill
 [respond]: https://github.com/scottjehl/Respond
 [vminpoly]: https://github.com/saabi/vminpoly
+[demo]: http://simplaio.github.io/rucksack/img/type-demo.gif
diff --git a/public/docs/index.html b/public/docs/index.html
@@ -355,7 +355,9 @@ <h1 class="content__section__title">Responsive Typography <a href="#responsive-t
 
 
 
-<p>Create automagical fluid typography with a new <code>responsive</code> property on <code>font-size</code>. All the typography on this site is responsive, resize your browser window to see it in action!</p>
+<p>Create automagical fluid typography with a new <code>responsive</code> property on <code>font-size</code>. All the type on this site is responsive, resize your browser to see it in action!</p>
+
+<p><img src="http://simplaio.github.io/rucksack/img/type-demo.gif" alt="Responsive Type Demo" /></p>
 
 <h2 id="quick-start:a6b7c01268140345226b1acb4b782f4d">Quick start</h2>
 
@@ -669,14 +671,14 @@ <h2 id="range-elements:0fa58901273a043169cc0dfabb934c88">Range Elements</h2>
 
 <p>Output</p>
 
-<pre><code class="language-css">input[type=&quot;range&quot;]::-webkit-runnable-track {
-  -webkit-appearance: none !important;
+<pre><code class="language-css">input[type=&quot;range&quot;]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
   background: #9d9d9d;
   height: 3px;
 }
 
 input[type=&quot;range&quot;]::-moz-range-track  {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
   background: #9d9d9d;
   height: 3px;
 }
@@ -687,14 +689,14 @@ <h2 id="range-elements:0fa58901273a043169cc0dfabb934c88">Range Elements</h2>
 }
 
 input[type=&quot;range&quot;]::-webkit-slider-thumb {
-  -webkit-appearance: none !important;
+  -webkit-appearance: none;
   background: #4286be;
   width: 16px;
   height: 8px;
 }
 
 input[type=&quot;range&quot;]::-moz-range-thumb {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
   background: #4286be;
   width: 16px;
   height: 8px;
@@ -705,9 +707,17 @@ <h2 id="range-elements:0fa58901273a043169cc0dfabb934c88">Range Elements</h2>
   width: 16px;
   height: 8px;
 }
+input[type=&quot;range&quot;] {
+  -webkit-appearance: none;
+}
+input[type=range]::-moz-focus-outer {
+  border: 0;
+}
 </code></pre>
 
-<p>The <code>-webkit-appearance: none;</code> and <code>-moz-appearance: none;</code> declarations are added to relevant elements so that your custom styles are properly applied.</p>
+<p>The <code>-webkit-appearance: none;</code> and <code>-moz-appearance: none;</code> declarations are added to relevant elements so that your custom styles are properly applied. Note that this means that for webkit (Chrome, etc) you must style <em>both</em> <code>::track</code> and <code>::thumb</code>, since the appearance must be set on the root element.</p>
+
+<p>The additional <code>::-moz-focus-outer</code> rule simply removes the dotted outline around the element on some versions of firefox.</p>
 
 
         </article>

diff --git a/public/docs/index.xml b/public/docs/index.xml
@@ -246,7 +246,9 @@ stylus(css).use(
       <guid>http://simplaio.github.io/rucksack/docs/responsive-type/</guid>
       <description>
 
-&lt;p&gt;Create automagical fluid typography with a new &lt;code&gt;responsive&lt;/code&gt; property on &lt;code&gt;font-size&lt;/code&gt;. All the typography on this site is responsive, resize your browser window to see it in action!&lt;/p&gt;
+&lt;p&gt;Create automagical fluid typography with a new &lt;code&gt;responsive&lt;/code&gt; property on &lt;code&gt;font-size&lt;/code&gt;. All the type on this site is responsive, resize your browser to see it in action!&lt;/p&gt;
+
+&lt;p&gt;&lt;img src=&#34;http://simplaio.github.io/rucksack/img/type-demo.gif&#34; alt=&#34;Responsive Type Demo&#34; /&gt;&lt;/p&gt;
 
 &lt;h2 id=&#34;quick-start:a6b7c01268140345226b1acb4b782f4d&#34;&gt;Quick start&lt;/h2&gt;
 
@@ -560,14 +562,14 @@ input[type=&amp;quot;range&amp;quot;]::thumb {
 
 &lt;p&gt;Output&lt;/p&gt;
 
-&lt;pre&gt;&lt;code class=&#34;language-css&#34;&gt;input[type=&amp;quot;range&amp;quot;]::-webkit-runnable-track {
-  -webkit-appearance: none !important;
+&lt;pre&gt;&lt;code class=&#34;language-css&#34;&gt;input[type=&amp;quot;range&amp;quot;]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
   background: #9d9d9d;
   height: 3px;
 }
 
 input[type=&amp;quot;range&amp;quot;]::-moz-range-track  {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
   background: #9d9d9d;
   height: 3px;
 }
@@ -578,14 +580,14 @@ input[type=&amp;quot;range&amp;quot;]::-ms-track  {
 }
 
 input[type=&amp;quot;range&amp;quot;]::-webkit-slider-thumb {
-  -webkit-appearance: none !important;
+  -webkit-appearance: none;
   background: #4286be;
   width: 16px;
   height: 8px;
 }
 
 input[type=&amp;quot;range&amp;quot;]::-moz-range-thumb {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
   background: #4286be;
   width: 16px;
   height: 8px;
@@ -596,9 +598,17 @@ input[type=&amp;quot;range&amp;quot;]::-ms-thumb {
   width: 16px;
   height: 8px;
 }
+input[type=&amp;quot;range&amp;quot;] {
+  -webkit-appearance: none;
+}
+input[type=range]::-moz-focus-outer {
+  border: 0;
+}
 &lt;/code&gt;&lt;/pre&gt;
 
-&lt;p&gt;The &lt;code&gt;-webkit-appearance: none;&lt;/code&gt; and &lt;code&gt;-moz-appearance: none;&lt;/code&gt; declarations are added to relevant elements so that your custom styles are properly applied.&lt;/p&gt;
+&lt;p&gt;The &lt;code&gt;-webkit-appearance: none;&lt;/code&gt; and &lt;code&gt;-moz-appearance: none;&lt;/code&gt; declarations are added to relevant elements so that your custom styles are properly applied. Note that this means that for webkit (Chrome, etc) you must style &lt;em&gt;both&lt;/em&gt; &lt;code&gt;::track&lt;/code&gt; and &lt;code&gt;::thumb&lt;/code&gt;, since the appearance must be set on the root element.&lt;/p&gt;
+
+&lt;p&gt;The additional &lt;code&gt;::-moz-focus-outer&lt;/code&gt; rule simply removes the dotted outline around the element on some versions of firefox.&lt;/p&gt;
 </description>
     </item>
 

diff --git a/public/img/logo-orig.png b/public/img/logo-orig.png
diff --git a/public/img/logo-orig1.png b/public/img/logo-orig1.png
diff --git a/public/img/type-demo.gif b/public/img/type-demo.gif
diff --git a/public/index.xml b/public/index.xml
@@ -246,7 +246,9 @@ stylus(css).use(
       <guid>http://simplaio.github.io/rucksack/docs/responsive-type/</guid>
       <description>
 
-&lt;p&gt;Create automagical fluid typography with a new &lt;code&gt;responsive&lt;/code&gt; property on &lt;code&gt;font-size&lt;/code&gt;. All the typography on this site is responsive, resize your browser window to see it in action!&lt;/p&gt;
+&lt;p&gt;Create automagical fluid typography with a new &lt;code&gt;responsive&lt;/code&gt; property on &lt;code&gt;font-size&lt;/code&gt;. All the type on this site is responsive, resize your browser to see it in action!&lt;/p&gt;
+
+&lt;p&gt;&lt;img src=&#34;http://simplaio.github.io/rucksack/img/type-demo.gif&#34; alt=&#34;Responsive Type Demo&#34; /&gt;&lt;/p&gt;
 
 &lt;h2 id=&#34;quick-start:a6b7c01268140345226b1acb4b782f4d&#34;&gt;Quick start&lt;/h2&gt;
 
@@ -628,14 +630,14 @@ input[type=&amp;quot;range&amp;quot;]::thumb {
 
 &lt;p&gt;Output&lt;/p&gt;
 
-&lt;pre&gt;&lt;code class=&#34;language-css&#34;&gt;input[type=&amp;quot;range&amp;quot;]::-webkit-runnable-track {
-  -webkit-appearance: none !important;
+&lt;pre&gt;&lt;code class=&#34;language-css&#34;&gt;input[type=&amp;quot;range&amp;quot;]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
   background: #9d9d9d;
   height: 3px;
 }
 
 input[type=&amp;quot;range&amp;quot;]::-moz-range-track  {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
   background: #9d9d9d;
   height: 3px;
 }
@@ -646,14 +648,14 @@ input[type=&amp;quot;range&amp;quot;]::-ms-track  {
 }
 
 input[type=&amp;quot;range&amp;quot;]::-webkit-slider-thumb {
-  -webkit-appearance: none !important;
+  -webkit-appearance: none;
   background: #4286be;
   width: 16px;
   height: 8px;
 }
 
 input[type=&amp;quot;range&amp;quot;]::-moz-range-thumb {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
   background: #4286be;
   width: 16px;
   height: 8px;
@@ -664,9 +666,17 @@ input[type=&amp;quot;range&amp;quot;]::-ms-thumb {
   width: 16px;
   height: 8px;
 }
+input[type=&amp;quot;range&amp;quot;] {
+  -webkit-appearance: none;
+}
+input[type=range]::-moz-focus-outer {
+  border: 0;
+}
 &lt;/code&gt;&lt;/pre&gt;
 
-&lt;p&gt;The &lt;code&gt;-webkit-appearance: none;&lt;/code&gt; and &lt;code&gt;-moz-appearance: none;&lt;/code&gt; declarations are added to relevant elements so that your custom styles are properly applied.&lt;/p&gt;
+&lt;p&gt;The &lt;code&gt;-webkit-appearance: none;&lt;/code&gt; and &lt;code&gt;-moz-appearance: none;&lt;/code&gt; declarations are added to relevant elements so that your custom styles are properly applied. Note that this means that for webkit (Chrome, etc) you must style &lt;em&gt;both&lt;/em&gt; &lt;code&gt;::track&lt;/code&gt; and &lt;code&gt;::thumb&lt;/code&gt;, since the appearance must be set on the root element.&lt;/p&gt;
+
+&lt;p&gt;The additional &lt;code&gt;::-moz-focus-outer&lt;/code&gt; rule simply removes the dotted outline around the element on some versions of firefox.&lt;/p&gt;
 </description>
     </item>
 

diff --git a/src/static/img/type-demo.gif b/src/static/img/type-demo.gif