Merge pull request #45 from texastribune/replace-grid-padded

Round of grid cleanup

assets/scss/6-components/button/_button.scss

@@ -7,6 +7,7 @@
 // .c-button--xs - Two steps down from default
 // .c-button--circle - Circular button (experimentally used for back to top)
 // .c-button--outline - Hover effect of outline (used on social)
+// .c-button--compact - Removes vertical padding (used on social)
 //
 // Markup: 6-components/button/button.html
 //
@@ -73,6 +74,11 @@
       }
     }
   }
+
+  &--compact {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 // Link button (c-link-button)

assets/scss/6-components/story-body/_story-body.scss

@@ -29,21 +29,21 @@ $story-narrow-bp: ($story-narrow / 1rem) + $story-padding-buffer;
   }
 
 
-  ul {
+  > ul {
     list-style: disc;
     padding: 0 $size-b 0 3.5rem;
-
-  }
 
-  li {
-    margin-bottom: $size-b;
+    li {
+      margin-bottom: $size-b;
+    }
   }
 
+
   sub, sup {
     position: initial;
   }
 
   hr {
     margin: $size-xl auto;
   }
-}
+}

assets/scss/7-layout/_grid-legacy.scss

@@ -9,7 +9,7 @@
 // grid_container--xl - 1080px
 // grid_container--xxl - 1300px
 //
-// Markup: <div class="{{className}}">Container</div>
+// Markup: <div style="border: 2px solid black; padding: 20px;" class="{{ className }} container-demo"><strong>{{ className }}</strong> (<span></span>)</div>
 //
 // Styleguide 7.0.1
 //
@@ -32,6 +32,56 @@
 //
 // Styleguide 7.0.1
 //
+
+
+// Grid Padded (grid_padded)
+//
+// Deprecated: Adds side padding at various viewport widths. Note: Demo is best viewed in [standalone preview](/pages/layout/grid_padded/raw-preview.html). {{isHelper}}
+//
+// .grid_padded - Left/right padding:<br>`.92rem` mobile<br> `1.1rem` tablet - desktop <br>`0` large desktop
+// .grid_padded--temp - Left/right padding:<br>`0` mobile - small desktop<br>`1.1rem` desktop<br>`0` large desktop
+// .grid_padded--s - Left/right padding:<br>`1.1rem` mobile<br>`0` tablet+
+// .grid_padded--m - Left/right padding:<br>`1.1rem` tablet<br>`0` small desktop+
+// .grid_padded--l - Left/right padding:<br>`1.1rem` small desktop<br>`0` desktop+
+// .grid_padded--xl - Left/right padding:<br>`1.1rem` desktop<br>`0` large desktop+
+// .grid_padded--xxl - Left/right padding:<br>`1.1rem` large desktop<br>`0` large desktop+
+//
+// Markup: <div class="{{ className }}" style="border:2px solid black; background: #eee;"><div style="background-color: black; color: white; height: 30px">{{ className }}</div></div>
+//
+//
+// Styleguide 7.0.1
+//
+
+// Hide (hide_<from | until>--<size>)
+//
+// Deprecated: Adds varying amounts side padding. Note: Demo is best viewed in [standalone preview](/pages/layout/grid_padded/raw-preview.html). {{isHelper}}
+//
+// .hide_from--s - Hide from large mobile onward; Show small mobile only
+// .hide_from--m - Hide from tablet onward; Show on all mobile
+// .hide_from--l - Hide from small desktop onward; Show on all mobile and tablet
+// .hide_from--xl - Hide from desktop onward; Show on all mobile, tablet, and small desktop
+// .hide_from--xxl - Hide from large desktop onward; Show on all mobile, tablet, small desktop, and desktop
+// .hide_until--s - Hide until large mobile; Show on large mobile, tablet, desktop
+// .hide_until--m - Hide until tablet; Show tablet, desktop
+// .hide_until--l - Hide until small desktop; Show all desktop
+// .hide_until--xl - Hide until desktop; Show desktop, large desktop
+// .hide_until--xxl - Hide until large desktop; Show on large desktop only
+//
+// Markup: <div style="background:#ffc200;" class="{{ className }}"><strong>{{ className }}</strong>: Resize to see me appear/disappear</div>
+//
+// Styleguide 7.0.1
+//
+
+
+// Section Padding (section_padded)
+//
+// Deprecated: Adds top/bottom padding for sections. Usually used with grid_padded.
+//
+//
+// Markup: <div class="section_padded" style="border:2px solid black; background: #eee;"><div style="background-color: black; color: white; height: 30px">section_padded</div></div>
+//
+// Styleguide 7.0.1
+//
 $grid-columns: 12;
 $grid-gutter: $size-b;
 $grid-gutter-px: 17.6;
@@ -357,11 +407,11 @@ $column-slug: col !default;
   margin-right: 0;
 }
 
-// .section_padded {
-//   padding-top: $size-xgiant;
-//   padding-bottom: $size-xgiant;
-//   @include mq($until: bp-m) {
-//     padding-top: $size-xl;
-//     padding-bottom: $size-xl;
-//   }
-// }
+.section_padded {
+  padding-top: $size-xxxl;
+  padding-bottom: $size-xxxl;
+  @include mq($until: bp-m) {
+    padding-top: $size-xl;
+    padding-bottom: $size-xl;
+  }
+}

assets/scss/7-layout/_grid.scss

@@ -2,9 +2,14 @@
 //
 // This is a flexbox based grid. In the future, we'll start to rely more on CSS grid and slowly phase out this grid, piece by piece.
 //
-// _Replacements so far:_
-// grid_separator => **has-<size>-btm-marg** |
-// grid_container => **l-container**
+// _Replacements so far:_<br>
+// grid_separator => [**has-{size}-btm-marg**](/pages/utilities/index.html#margin-has-size-btm-marg) <br>
+// grid_container => [**l-container**](#container-l-container) <br>
+// grid_padded => [**has-page-padding**](/pages/utilities/index.html#padding-has-padding) <br>
+// section_padded => [**has-section-padding**](/pages/utilities/index.html#padding-has-padding) <br>
+// grid_padded--temp => [**has-page-padding-at-bp-l**](/pages/utilities/index.html#padding-has-padding) <br>
+// col_adunit300x250 => Removed <br>
+// hide_from--{size}/hide_until--{size} => [**is-hidden-from-{size}/is-hidden-until-{size}**](pages/utilities/index.html#hidden-is-hidden-specifier)
 //
 // Markup: 7-layout/grid.html
 //
@@ -77,11 +82,6 @@ $column-slug: col !default;
   }
 }
 
-.col_adunit300x250 {
-  @extend %flex-col;
-  margin-right: 0;
-  max-width: 310px;
-}
 
 .grid {
   display: flex;
@@ -94,29 +94,6 @@ $column-slug: col !default;
     flex-wrap: nowrap;
   }
 
-  // .grid_padded -- DEFAULT
-  // adds left/right padding on small screens
-  &_padded {
-    padding: 0 $size-xs;
-
-    @include mq($from: bp-m, $until: bp-xl) {
-      padding: 0 $size-b;
-    }
-
-    @include mq($from: bp-xl) {
-      padding: 0;
-    }
-  }
-
-  // Custom setting for story page lead art
-  // adds left/right padding on middle-size screens
-  &_padded--temp {
-    padding: 0;
-
-    @include mq($from: bp-l, $until: bp-xl) {
-      padding: 0 $size-b;
-    }
-  }
 
   &_order {
     &--primary {
@@ -189,7 +166,7 @@ $column-slug: col !default;
 
   /**
     Use the following two classes in tandem,
-    probably with .col and .col_adunit300x250
+    probably with .col and .col_300x250
     together in a row. It flips the order
     at different breakpoints, which can be
     useful when stacking.
@@ -240,50 +217,6 @@ $column-slug: col !default;
         }
       }
     }
-
-    .col_adunit300x250 {
-      flex: 0 1 100%;
-      margin-right: 0;
-      max-width: 100%;
-
-      @include mq($from: $bp) {
-        margin-left: 0;
-        margin-right: 0;
-        max-width: 310px;
-      }
-    }
-  }
-
-  // Set left/right padded until a breakpoint
-  // grid_padded--m = 1.1rem padding until bp-m
-  .grid_padded--#{$size} {
-    @include mq($until: $bp-xs) {
-      padding: 0 $size-xs;
-    }
-
-    @include mq($until: $bp) {
-      padding: 0 $size-b;
-    }
-  }
-
-  // Hide element screens > $bp
-  // i.e. display until $bp
-  .hide_from {
-    &--#{$size} {
-      @include mq($from: $bp) {
-        display: none !important;
-      }
-    }
-  }
-
-  // Hide element screens < $bp
-  // i.e. display from $bp
-  .hide_until {
-    &--#{$size} {
-      @include mq($until: $bp) {
-        display: none !important;
-      }
-    }
   }
 }
 

assets/scss/utilities/_hidden.scss

@@ -20,7 +20,7 @@
 // .is-hidden-until-bp-default -  Hide until bp-default
 // .is-transparent -  Removes opacity. (Use this to fade elements out.)
 //
-// Markup: <div style="background:#ffc200;" class="{{ className }}">Resize to see me appear/disappear</div>
+// Markup: <div style="background:#ffc200;" class="{{ className }}"><strong>{{ className }}</strong>: Resize to see me appear/disappear</div>
 //
 //
 // Styleguide 8.0.1

assets/scss/utilities/_spacing.scss

@@ -33,11 +33,13 @@
 // Not all sizes are accounted for. Often, specific padding rules should go on a component. {{isHelper}}
 //
 // .has-padding -  All-around padding with $size-b
-// .has-xs-padding -  All-around padding with $size-xs
-// .has-xl-padding -  All-around padding with $size-xl
-// .has-reset-padding -  Removes padding
+// .has-xs-padding - All-around padding with $size-xs
+// .has-xl-padding - All-around padding with $size-xl
+// .has-page-padding - Left/right padding on small screens
+// .has-page-padding-at-bp-l - Custom setting for story page lead art
+// .has-section-padding - Top/bottom responsive padding
 //
-// Markup: <div style="background:#ffc200;" class="{{ className }}">Example</div>
+// Markup: <div style="border: 2px solid #000; background: #eee" class="{{ className }}"><div style="background: #000;color: #fff;">{{ className }}</div></div>
 //
 //
 // Styleguide 8.0.1
@@ -56,4 +58,29 @@
 
 .has-reset-padding {
   padding: 0;
+}
+
+.has-page-padding {
+  padding: 0 $size-xs;
+  @include mq($from: bp-m, $until: bp-xl) {
+    padding: 0 $size-b;
+  }
+  @include mq($from: bp-xl) {
+    padding: 0
+  }
+}
+
+.has-page-padding-at-bp-l {
+  @include mq($from: bp-l, $until: bp-xl) {
+    padding: 0 $size-b;
+  }
+}
+
+.has-section-padding {
+  padding-top: $size-xxxl;
+  padding-bottom: $size-xxxl;
+  @include mq($until: bp-m) {
+    padding-top: $size-xl;
+    padding-bottom: $size-xl;
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texastribune/queso-ui",
-  "version": "1.2.0-1",
+  "version": "2.0.0-2",
   "description": "Asset library of SCSS and SVG files",
   "scripts": {
     "prettier": "prettier --write './docs/**/*.js'",