Merge pull request #183 from StackExchange/feature/conditional-classes

Document our conditional classes
StackExchange · Nov 12, 2018 · 8514596 · 8514596
2 parents 28463db + 9c18b5b
commit 8514596
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 35 deletions.
diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
@@ -8,12 +8,12 @@
           url: product/guidelines/using-stacks
         - title: Building Stacks
           url: product/guidelines/building
+        - title: Conditional Classes
+          url: product/guidelines/conditional-classes
         - title: Customizing Stacks
           url: product/guidelines/customization
         - title: Releasing Stacks
           url: product/guidelines/releasing
-        - title: Responsiveness
-          url: product/guidelines/responsiveness
     - title: Resources
       subsublinks:
         - title: Icons

diff --git a/docs/product/base/box-shadow.html b/docs/product/base/box-shadow.html
@@ -11,20 +11,14 @@
                 <tr>
                     <th class="s-table--cell2" scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
-                    <th scope="col" class="ta-center">Hover?</th>
+                    <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#hover" | relative_url }}">Hover?</a></th>
                 </tr>
             </thead>
             <tbody>
                 {% for atomic in site.data.product.atomic-definitions.box-shadow %}
                     <tr class="fs-caption">
                         <th scope="row"><code class="stacks-code bg-white">.{{ atomic.class }}</code></th>
                         <td><code class="stacks-code bg-white">{{ atomic.output }}</code></td>
-                        <td class="ta-center">
-                            {% if atomic.responsive %}
-                                {% icon Checkmark | fc-green-500 %}
-                            {% endif %}
-                        </td>
                         <td class="ta-center">
                             {% if atomic.hover %}
                                 {% icon Checkmark | fc-green-500 %}

diff --git a/docs/product/base/display.html b/docs/product/base/display.html
@@ -12,8 +12,8 @@
                     <th class="s-table--cell2" scope="col">Class</th>
                     <th class="s-table--cell3" scope="col">Output</th>
                     <th scope="col">Definition</th>
-                    <th class="s-table--cell1 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
-                    <th class="s-table--cell1 ta-center" scope="col">Print?</th>
+                    <th class="s-table--cell1 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell1 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#print" | relative_url }}">Print?</a></th>
                 </tr>
             </thead>
             <tbody>

diff --git a/docs/product/base/grid-helpers.html b/docs/product/base/grid-helpers.html
@@ -8,7 +8,7 @@
                 <tr>
                     <th class="s-table--cell4" scope="col">Class</th>
                     <th class="s-table--cell6" scope="col">Definition</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>

diff --git a/docs/product/base/opacity.html b/docs/product/base/opacity.html
@@ -11,20 +11,14 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
-                    <th scope="col" class="ta-center">Hover?</th>
+                    <th scope="col" class="ta-center"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#hover" | relative_url }}">Hover?</a></th>
                 </tr>
             </thead>
             <tbody>
                 {% for atomic in site.data.product.atomic-definitions.opacity %}
                     <tr class="fs-caption">
                         <th scope="row"><code class="stacks-code bg-white">.{{ atomic.class }}</code></th>
                         <td><code class="stacks-code bg-white">{{ atomic.output }}</code></td>
-                        <td class="ta-center">
-                            {% if atomic.responsive %}
-                                {% icon Checkmark | fc-green-500 %}
-                            {% endif %}
-                        </td>
                         <td class="ta-center">
                             {% if atomic.hover %}
                                 {% icon Checkmark | fc-green-500 %}

diff --git a/docs/product/base/position.html b/docs/product/base/position.html
@@ -12,7 +12,7 @@
                     <th class="s-table--cell2" scope="col">Class</th>
                     <th class="s-table--cell3" scope="col">Output</th>
                     <th scope="col">Definition</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>

diff --git a/docs/product/base/typography.html b/docs/product/base/typography.html
@@ -76,7 +76,7 @@
                     <th class="s-table--cell2" scope="col">Class</th>
                     <th class="s-table--cell3" scope="col">Output</th>
                     <th scope="col">Definition</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>

diff --git a/docs/product/base/width-height.html b/docs/product/base/width-height.html
@@ -12,7 +12,7 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>
@@ -91,7 +91,7 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>
@@ -156,7 +156,7 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>
@@ -227,7 +227,7 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>
@@ -300,7 +300,7 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>
@@ -326,7 +326,7 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>
@@ -355,7 +355,7 @@
                 <tr>
                     <th scope="col">Class</th>
                     <th scope="col">Output</th>
-                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                    <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                 </tr>
             </thead>
             <tbody>
@@ -384,7 +384,7 @@
                     <tr>
                         <th scope="col">Class</th>
                         <th scope="col">Output</th>
-                        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/responsiveness" | relative_url }}">Responsive?</a></th>
+                        <th class="s-table--cell2 ta-center" scope="col"><a class="s-link s-link__inherit" href="{{ "/product/guidelines/conditional-classes#responsive" | relative_url }}">Responsive?</a></th>
                     </tr>
                 </thead>
                 <tbody>

diff --git a/docs/product/guidelines/responsiveness.html → ...oduct/guidelines/conditional-classes.html b/docs/product/guidelines/responsiveness.html → ...oduct/guidelines/conditional-classes.html
@@ -1,11 +1,11 @@
 ---
 layout: page
-title: Responsiveness
-description: Stacks allows you to build responsive designs using utility classes.
+title: Conditional Classes
+description: Stacks provides conditional atomic classes to easily build complex responsive designs, hover states, and print layouts.
 ---
 
 <section class="stacks-section">
-    {% header h2 | Utility Definitions %}
+    {% header h2 | Responsive %}
     <p class="stacks-copy">Many utility classes in Stacks are also available in screen-size specific variations. For example, the <code class="stacks-code">.d-none</code> utility can be applied to small browser widths and below using the <code class="stacks-code">.sm:d-none</code> class, on medium browser widths and below using the <code class="stacks-code">.md:d-none</code> class, and on large browser widths and below using the <code class="stacks-code">.lg:d-none</code> class.</p>
 
     <p class="stacks-copy">This is done using predefined max-width media query breakpoints represented by t-shirt sizes. A common example would be to apply <code class="stacks-code">.md:fd-column</code> to a grid. This means, “At the medium breakpoint and smaller, switch the grid from columns to rows by applying <code class="stacks-code">fd-column</code>.”</p>
@@ -19,6 +19,7 @@
 </section>
 
 <section class="stacks-section">
+    {% header h3 | Responsive Classes %}
     <div class="overflow-x-auto mb32">
         <table class="wmn4 s-table s-table__bx-simple">
             <thead>
@@ -55,7 +56,7 @@
 </section>
 
 <section class="stacks-section">
-    {% header h2 | Example %}
+    {% header h3 | Responsive Example %}
     <p class="stacks-copy">Resize your browser to see which classes are applied.</p>
     <div class="stacks-preview">
     {% comment %}
@@ -172,9 +173,35 @@
     </div>
 </section>
 
+<section class="stacks-section">
+    {% header h2 | Hover %}
+    <p class="stacks-copy">Stacks provides hover-only atomic classes. By applying <code class="stacks-code">.h:bs-lg</code>, you’re saying “On hover, add a large box shadow.”</p>
+    <div class="stacks-preview">
+{% highlight html linenos %}
+<div class="s-card h80 bs-sm h:bs-lg h:o100"></div>
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="s-card o80 bs-sm h:bs-lg h:o100">Example</div>
+        </div>
+    </div>
+</section>
+
+<section class="stacks-section">
+    {% header h2 | Print %}
+    <p class="stacks-copy">Stacks provides print-only atomic classes. By applying <code class="stacks-code">.print:d-none</code>, you’re saying “In print layouts, remove this element from the layout.”</p>
+    <div class="stacks-preview">
+{% highlight html linenos %}
+<div class="s-card print:d-none"></div>
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="s-card print:d-none">This element will be removed from the page while printing.</div>
+        </div>
+    </div>
+</section>
+
 <section class="stacks-section">
     {% header h2 | Availability %}
-    <p class="stacks-copy">A limited selection of classes are available as breakpoint-based overrides. These are represented in class definitions tables by {% icon Checkmark | fc-green-500 va-middle %}.</p>
+    <p class="stacks-copy">A limited selection of conditional classes are available throughout Stacks. These are represented in class definitions tables by {% icon Checkmark | fc-green-500 va-middle %}.</p>
 </section>
 
 <style>

diff --git a/netlify.toml b/netlify.toml
@@ -180,4 +180,8 @@
 
 [[redirects]]
   from = "/components/textarea"
-  to = "/product/components/textarea"
+  to = "/product/components/textarea"
+
+[[redirects]]
+  from = "/product/guidelines/responsiveness"
+  to = "/product/guidelines/conditional-classes"