Updated browser support docs

docs/browser-support.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta name="description" content="Learn about browser support and polyfills for older browsers.">
+  <meta name="description" content="Shoelace works in just about every browser.">
   <link rel="icon" href="../source/img/favicon.png">
   <link rel="stylesheet" href="../dist/shoelace.css">
   <link rel="stylesheet" href="../source/css/_docs.css">
@@ -48,15 +48,20 @@
 
     <div id="content">
       <h2 id="browser-support">Browser Support</h2>
-<blockquote>
-<p>TL;DR — you can use Shoelace <em>today</em> if you don’t care about Internet Explorer (Edge is fine). If you need to support IE, just use a <a href="https://github.com/zirafa/bootstrap-grid-only">grid system</a> and a polyfill such as <a href="http://www.myth.io/">Myth</a> or <a href="http://cssnext.io/">cssnext</a>.</p>
-</blockquote>
-<p>Browser support for CSS variables is <a href="http://caniuse.com/#feat=css-variables">pretty good</a>, but if you need to support Internet Explorer, consider using <a href="http://www.myth.io/">Myth</a> or <a href="http://cssnext.io/">cssnext</a> as a polyfill. Both libraries let you write standards-compliant CSS and process it to work properly in unsupportive browsers.</p>
-<p>Unfortunately, it’s impossible for polyfills to support variable scoping. Because of this, Shoelace only uses CSS variables that are assigned at the <code>:root</code> level.</p>
-<p>Browser support for the CSS Grid is <a href="http://caniuse.com/#feat=css-grid">decent</a>, but if you need to support Internet Explorer or Edge &lt; 16, you can use the <a href="http://flexboxgrid.com/">Flexbox Grid</a> instead.</p>
-<p>Browser support for <code>calc</code> is <a href="http://caniuse.com/#feat=calc">excellent</a>. Shoelace uses this internally for relative calculations. You can use it along with CSS variables too.</p>
-<p>Browser support for color modifiers is non-existent. <a href="https://drafts.csswg.org/css-color/#modifying-colors">There is a draft</a>, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.</p>
-<p>Browser support for custom media queries is non-existent. <a href="https://drafts.csswg.org/mediaqueries-5/#custom-mq">There is a draft</a>, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.</p>
+<p>You can use Shoelace <em>today</em> in just about every browser. If you’re using the <a href="installing.html#cdn">CDN version</a> for prototyping, you’re good. If you’re <a href="installing.html#building-from-source">building from source</a>, you’re good.</p>
+<div class="browsers">
+  <img src="../source/img/chrome.svg" alt="Chrome">
+  <img src="../source/img/edge.svg" alt="Edge">
+  <img src="../source/img/firefox.svg" alt="Firefox">
+  <img src="../source/img/opera.svg" alt="Opera">
+  <img src="../source/img/safari.png" alt="Safari">
+</div>
+
+<p><em>What you can’t do</em> is use the source files without processing them with <a href="http://cssnext.io/">cssnext</a>.</p>
+<p>Shoelace makes extensive use of future CSS features in its source. Most browsers don’t support this syntax today, but they will soon. As CSS evolves and support improves, you’ll eventually be able to use Shoelace without any processing at all. In that sense, Shoelace is “future-ready.”</p>
+<p><a href="http://cssnext.io/features/">CSS has a really bright future</a>, and you can use most of its upcoming features today with Shoelace + cssnext. You no longer need Less or Sass to do amazing things with CSS.</p>
+<p>I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the <em>future syntax</em>.</p>
+<p>Unfortunately, many people aren’t aware of the great things happening with CSS these days. Shoelace aims to raise awareness by bringing us back to the basics and using tomorrow’s CSS today.</p>
 
     </div>
   </main>

source/docs/browser-support.md

@@ -1,21 +1,27 @@
 ---
 layout: default.html
 title: Browser Support
-description: Learn about browser support and polyfills for older browsers.
+description: Shoelace works in just about every browser.
 ---
 
 ## Browser Support
 
-> TL;DR — you can use Shoelace _today_ if you don’t care about Internet Explorer (Edge is fine). If you need to support IE, just use a [grid system](https://github.com/zirafa/bootstrap-grid-only) and a polyfill such as [Myth](http://www.myth.io/) or [cssnext](http://cssnext.io/).
+You can use Shoelace _today_ in just about every browser. If you’re using the [CDN version](installing.html#cdn) for prototyping, you’re good. If you’re [building from source](installing.html#building-from-source), you’re good.
 
-Browser support for CSS variables is [pretty good](http://caniuse.com/#feat=css-variables), but if you need to support Internet Explorer, consider using [Myth](http://www.myth.io/) or [cssnext](http://cssnext.io/) as a polyfill. Both libraries let you write standards-compliant CSS and process it to work properly in unsupportive browsers.
+<div class="browsers">
+  ![Chrome](../source/img/chrome.svg)
+  ![Edge](../source/img/edge.svg)
+  ![Firefox](../source/img/firefox.svg)
+  ![Opera](../source/img/opera.svg)
+  ![Safari](../source/img/safari.png)
+</div>
 
-Unfortunately, it’s impossible for polyfills to support variable scoping. Because of this, Shoelace only uses CSS variables that are assigned at the `:root` level.
+_What you can’t do_ is use the source files without processing them with [cssnext](http://cssnext.io/).
 
-Browser support for the CSS Grid is [decent](http://caniuse.com/#feat=css-grid), but if you need to support Internet Explorer or Edge < 16, you can use the [Flexbox Grid](http://flexboxgrid.com/) instead.
+Shoelace makes extensive use of future CSS features in its source. Most browsers don’t support this syntax today, but they will soon. As CSS evolves and support improves, you’ll eventually be able to use Shoelace without any processing at all. In that sense, Shoelace is “future-ready.”
 
-Browser support for `calc` is [excellent](http://caniuse.com/#feat=calc). Shoelace uses this internally for relative calculations. You can use it along with CSS variables too.
+[CSS has a really bright future](http://cssnext.io/features/), and you can use most of its upcoming features today with Shoelace + cssnext. You no longer need Less or Sass to do amazing things with CSS.
 
-Browser support for color modifiers is non-existent. [There is a draft](https://drafts.csswg.org/css-color/#modifying-colors), so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.
+I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the _future syntax_.
 
-Browser support for custom media queries is non-existent. [There is a draft](https://drafts.csswg.org/mediaqueries-5/#custom-mq), so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.
+Unfortunately, many people aren’t aware of the great things happening with CSS these days. Shoelace aims to raise awareness by bringing us back to the basics and using tomorrow’s CSS today.

source/img/chrome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1 1 190 190"><defs><linearGradient id="b" x1="29.34" x2="81.84" y1="75.02" y2="44.35" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a52714" stop-opacity=".6"/><stop offset=".66" stop-color="#a52714" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="110.87" x2="52.54" y1="164.5" y2="130.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#055524" stop-opacity=".4"/><stop offset=".33" stop-color="#055524" stop-opacity="0"/></linearGradient><linearGradient id="a" x1="121.86" x2="136.55" y1="49.8" y2="114.13" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ea6100" stop-opacity=".3"/><stop offset=".66" stop-color="#ea6100" stop-opacity="0"/></linearGradient><linearGradient id="i" x1="121.86" x2="136.55" y1="49.8" y2="114.13" xlink:href="#a" gradientUnits="userSpaceOnUse"/><linearGradient id="l" x1="29.34" x2="81.84" y1="75.02" y2="44.35" xlink:href="#b" gradientUnits="userSpaceOnUse"/><radialGradient id="d" cx="668.18" cy="55.95" r="84.08" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3e2723" stop-opacity=".2"/><stop offset="1" stop-color="#3e2723" stop-opacity="0"/></radialGradient><linearGradient id="o" x1="110.87" x2="52.54" y1="164.5" y2="130.33" xlink:href="#c" gradientUnits="userSpaceOnUse"/><radialGradient id="p" cx="597.88" cy="48.52" r="78.04" xlink:href="#d" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"/><radialGradient id="q" cx="671.84" cy="96.14" r="87.87" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#263238" stop-opacity=".2"/><stop offset="1" stop-color="#263238" stop-opacity="0"/></radialGradient><radialGradient id="r" cx="34.29" cy="32.01" r="176.75" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><circle id="e" cx="96" cy="96" r="88"/></defs><clipPath id="f"><use xlink:href="#e" overflow="visible"/></clipPath><g clip-path="url(#f)"><path fill="#db4437" d="M22 8v108h39.4L96 56h88V8z"/><path fill="url(#b)" d="M22 8v108h39.4L96 56h88V8z"/></g><path fill="#3e2723" fill-opacity=".15" d="M62.3 115.7L22.5 47.4l-.6 1 39 67.8z" clip-path="url(#f)"/><g clip-path="url(#f)"><path fill="#0f9d58" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/><path fill="url(#c)" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/></g><path fill="#263238" fill-opacity=".15" d="M129.8 117.3l-.8-.4-38.3 67h1l38.3-67z" clip-path="url(#f)"/><g clip-path="url(#f)"><defs><path id="g" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/></defs><clipPath id="h"><use xlink:href="#g" overflow="visible"/></clipPath><g clip-path="url(#h)"><path fill="#ffcd40" d="M96 56l34.6 60L92 184h92V56z"/><path fill="url(#a)" d="M96 56l34.6 60L92 184h92V56z"/></g></g><g clip-path="url(#f)"><path fill="#ffcd40" d="M96 56l34.6 60L92 184h92V56z"/><path fill="url(#i)" d="M96 56l34.6 60L92 184h92V56z"/></g><g clip-path="url(#f)"><defs><path id="j" d="M96 56l34.6 60L92 184h92V56z"/></defs><clipPath id="k"><use xlink:href="#j" overflow="visible"/></clipPath><g clip-path="url(#k)"><path fill="#db4437" d="M22 8v108h39.4L96 56h88V8z"/><path fill="url(#l)" d="M22 8v108h39.4L96 56h88V8z"/></g></g><path fill="url(#d)" d="M96 56v21l78.4-21z" clip-path="url(#f)"/><g clip-path="url(#f)"><defs><path id="m" d="M22 8v40.3L61.4 116 96 56h88V8z"/></defs><clipPath id="n"><use xlink:href="#m" overflow="visible"/></clipPath><g clip-path="url(#n)"><path fill="#0f9d58" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/><path fill="url(#o)" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/></g></g><path fill="url(#p)" d="M22 48.5l57.2 57.2L61.4 116z" clip-path="url(#f)"/><path fill="url(#q)" d="M91.8 184l21-78.3 17.8 10.3z" clip-path="url(#f)"/><g clip-path="url(#f)"><circle cx="96" cy="96" r="40" fill="#f1f1f1"/><circle cx="96" cy="96" r="32" fill="#4285f4"/></g><g clip-path="url(#f)"><path fill="#3e2723" fill-opacity=".2" d="M96 55c-22 0-40 18-40 40v1c0-22 18-40 40-40h88v-1H96z"/><path fill="#fff" fill-opacity=".1" d="M130.6 116c-7 12-19.8 20-34.6 20s-27.7-8-34.6-20L8 24.5v1L61.4 117c7 12 19.8 20 34.6 20s27.7-8 34.6-20v-1z"/><path fill="#3e2723" d="M97 56h-.5c22 .3 39.5 18 39.5 40s-17.6 39.7-39.5 40h.5c22 0 40-18 40-40s-18-40-40-40z" opacity=".1"/><path fill="#fff" fill-opacity=".2" d="M131 117.3c3.4-5.8 5.4-12.6 5.4-20 0-4-.7-8.2-2-12 1 3.4 1.6 7 1.6 10.7 0 7.3-2 14-5.4 20L92 184h1l38.2-66.5z"/></g><g clip-path="url(#f)"><path fill="#fff" fill-opacity=".2" d="M96 9c48.4 0 87.7 39 88 87.5V96c0-48.6-39.4-88-88-88S8 47.4 8 96v.5C8.3 48 47.6 9 96 9z"/><path fill="#3e2723" fill-opacity=".15" d="M96 183c48.4 0 87.7-39 88-87.5v.5c0 48.6-39.4 88-88 88S8 144.6 8 96v-.5C8.3 144 47.6 183 96 183z"/></g><circle cx="96" cy="96" r="88" fill="url(#r)"/><path fill="none" d="M0 0h192v192H0z"/></svg>

source/img/edge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.3 -2.5 65 65"><path fill="#0078d7" d="M55.3 28.2c0-16.6-11.6-28-27-28.2C12.8.2 2 11.3 0 26.8c5.6-9.2 16.7-15.4 26.5-15.4 8 0 12.3 4.3 12.3 12.8H17.4c.4-3.6 2-7.3 4.2-9.5C13 18.2 7 26 7 36.5 7 49.5 17 60 31.6 60c7.4 0 13.4-1.6 18.6-4.3V43c-4.7 2.8-10.3 4.5-16.5 4.5-9.3 0-16-4.5-16-12.7h37.6v-6.6z"/></svg>

source/img/opera.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="5.5 5.5 109 109"><linearGradient id="a" x2="1" gradientTransform="rotate(90 20.115 31.505) scale(97.39658)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff1b2d"/><stop offset=".3" stop-color="#ff1b2d"/><stop offset=".61" stop-color="#ff1b2d"/><stop offset="1" stop-color="#a70014"/></linearGradient><linearGradient id="b" x2="1" gradientTransform="rotate(90 29.862 46.992) scale(86.1425)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9c0000"/><stop offset=".7" stop-color="#ff4b4b"/><stop offset="1" stop-color="#ff4b4b"/></linearGradient><path fill="url(#a)" d="M60 9.75C32.25 9.75 9.75 32.25 9.75 60c0 26.95 21.22 48.94 47.86 50.19.8.04 1.59.06 2.39.06 12.87 0 24.6-4.84 33.49-12.79-5.89 3.91-12.78 6.15-20.14 6.15-11.97 0-22.68-5.94-29.89-15.3-5.56-6.56-9.15-16.25-9.4-27.13v-2.37c.25-10.88 3.84-20.58 9.4-27.13 7.21-9.36 17.93-15.3 29.89-15.3 7.36 0 14.25 2.25 20.14 6.16-8.84-7.91-20.51-12.74-33.3-12.79H60z"/><path fill="url(#b)" d="M43.46 31.68c4.61-5.44 10.57-8.73 17.07-8.73 14.63 0 26.49 16.59 26.49 37.04 0 20.46-11.86 37.04-26.49 37.04-6.51 0-12.46-3.28-17.07-8.72 7.21 9.36 17.92 15.3 29.89 15.3 7.36 0 14.25-2.25 20.14-6.15 10.29-9.2 16.76-22.57 16.76-37.46 0-14.88-6.47-28.26-16.76-37.46-5.89-3.91-12.78-6.15-20.14-6.15-11.97 0-22.68 5.94-29.89 15.3"/></svg>