search

bbc / grandstand

BBC Grandstand is a collection of common CSS abstractions and utility helper classes
http://bit.ly/grandstandcss
MIT License
191 stars 9 forks source link

Qualify all 1280 utilities with $gel-grid-1280-toggle-class #52

Closed wildlyinaccurate closed 8 years ago

wildlyinaccurate commented 8 years ago

:sparkles: Putting the Grand in Grandstand 1 kilobyte at a time :sparkles:

Size Impact (before -> after)

Dev build: 123K -> 125K

Minified & gzipped: 11,376B -> 11,835B

Diff

--- dist/bbc-grandstand-master.css  2016-08-23 09:26:14.000000000 +0100
+++ dist/bbc-grandstand.css 2016-08-23 09:26:20.000000000 +0100
@@ -3147,31 +3147,31 @@
 }

 @media (min-width: 80em) {
-  .gs-u-display-none\@xxl {
+  .b-pw-1280 .gs-u-display-none\@xxl {
     display: none !important;
     visibility: hidden !important;
   }
-  .gs-u-display-inline\@xxl {
+  .b-pw-1280 .gs-u-display-inline\@xxl {
     display: inline !important;
     visibility: visible !important;
   }
-  .gs-u-display-inline-block\@xxl {
+  .b-pw-1280 .gs-u-display-inline-block\@xxl {
     display: inline-block !important;
     visibility: visible !important;
   }
-  .gs-u-display-block\@xxl {
+  .b-pw-1280 .gs-u-display-block\@xxl {
     display: block !important;
     visibility: visible !important;
   }
-  .gs-u-display-table-cell\@xxl {
+  .b-pw-1280 .gs-u-display-table-cell\@xxl {
     display: table-cell !important;
     visibility: visible !important;
   }
-  .gs-u-display-table-row\@xxl {
+  .b-pw-1280 .gs-u-display-table-row\@xxl {
     display: table-row !important;
     visibility: visible !important;
   }
-  .gs-u-display-flex\@xxl {
+  .b-pw-1280 .gs-u-display-flex\@xxl {
     display: -moz-box !important;
     display: -ms-flexbox !important;
     display: -webkit-flex !important;
@@ -3264,13 +3264,13 @@
 }

 @media (min-width: 80em) {
-  .gs-u-float-left\@xxl {
+  .b-pw-1280 .gs-u-float-left\@xxl {
     float: left !important;
   }
-  .gs-u-float-right\@xxl {
+  .b-pw-1280 .gs-u-float-right\@xxl {
     float: right !important;
   }
-  .gs-u-float-none\@xxl {
+  .b-pw-1280 .gs-u-float-none\@xxl {
     float: none !important;
   }
 }
@@ -5990,419 +5990,421 @@
 }

 @media (min-width: 80em) {
-  /**
+  .b-pw-1280 {
+    /**
      * Margin spacing classes (gel spacing unit)
      */
-  .gs-u-m\@xxl {
+    /**
+     * Tiny margin spacing classes (gel spacing unit)
+     */
+    /**
+     * Small margin spacing classes (gel spacing unit)
+     */
+    /**
+     * Large margin spacing classes (gel spacing unit)
+     */
+    /**
+     * Huge margin spacing classes (gel spacing unit)
+     */
+    /**
+     * Alt margin spacing classes
+     */
+    /**
+     * Alt double margin spacing classes
+     */
+    /**
+     * Zero margin spacing classes
+     */
+    /**
+     * Padding spacing classes (gel spacing unit)
+     */
+    /**
+     * Tiny padding spacing classes (gel spacing unit)
+     */
+    /**
+     * Small padding spacing classes (gel spacing unit)
+     */
+    /**
+     * Large padding spacing classes (gel spacing unit)
+     */
+    /**
+     * Huge padding spacing classes (gel spacing unit)
+     */
+    /**
+     * Alt padding spacing classes (gel-alt-spacing-unit)
+     */
+    /**
+     * Alt double padding spacing classes (gel-alt-spacing-unit)
+     */
+    /**
+     * Zero padding spacing classes
+     */
+  }
+  .b-pw-1280 .gs-u-m\@xxl {
     margin: 8px !important;
   }
-  .gs-u-mt\@xxl {
+  .b-pw-1280 .gs-u-mt\@xxl {
     margin-top: 8px !important;
   }
-  .gs-u-mr\@xxl {
+  .b-pw-1280 .gs-u-mr\@xxl {
     margin-right: 8px !important;
   }
-  .gs-u-mb\@xxl {
+  .b-pw-1280 .gs-u-mb\@xxl {
     margin-bottom: 8px !important;
   }
-  .gs-u-ml\@xxl {
+  .b-pw-1280 .gs-u-ml\@xxl {
     margin-left: 8px !important;
   }
-  .gs-u-mh\@xxl {
+  .b-pw-1280 .gs-u-mh\@xxl {
     margin-right: 8px !important;
     margin-left: 8px !important;
   }
-  .gs-u-mv\@xxl {
+  .b-pw-1280 .gs-u-mv\@xxl {
     margin-top: 8px !important;
     margin-bottom: 8px !important;
   }
-  /**
-     * Tiny margin spacing classes (gel spacing unit)
-     */
-  .gs-u-m--\@xxl {
+  .b-pw-1280 .gs-u-m--\@xxl {
     margin: 2px !important;
   }
-  .gs-u-mt--\@xxl {
+  .b-pw-1280 .gs-u-mt--\@xxl {
     margin-top: 2px !important;
   }
-  .gs-u-mr--\@xxl {
+  .b-pw-1280 .gs-u-mr--\@xxl {
     margin-right: 2px !important;
   }
-  .gs-u-mb--\@xxl {
+  .b-pw-1280 .gs-u-mb--\@xxl {
     margin-bottom: 2px !important;
   }
-  .gs-u-ml--\@xxl {
+  .b-pw-1280 .gs-u-ml--\@xxl {
     margin-left: 2px !important;
   }
-  .gs-u-mh--\@xxl {
+  .b-pw-1280 .gs-u-mh--\@xxl {
     margin-right: 2px !important;
     margin-left: 2px !important;
   }
-  .gs-u-mv--\@xxl {
+  .b-pw-1280 .gs-u-mv--\@xxl {
     margin-top: 2px !important;
     margin-bottom: 2px !important;
   }
-  /**
-     * Small margin spacing classes (gel spacing unit)
-     */
-  .gs-u-m-\@xxl {
+  .b-pw-1280 .gs-u-m-\@xxl {
     margin: 4px !important;
   }
-  .gs-u-mt-\@xxl {
+  .b-pw-1280 .gs-u-mt-\@xxl {
     margin-top: 4px !important;
   }
-  .gs-u-mr-\@xxl {
+  .b-pw-1280 .gs-u-mr-\@xxl {
     margin-right: 4px !important;
   }
-  .gs-u-mb-\@xxl {
+  .b-pw-1280 .gs-u-mb-\@xxl {
     margin-bottom: 4px !important;
   }
-  .gs-u-ml-\@xxl {
+  .b-pw-1280 .gs-u-ml-\@xxl {
     margin-left: 4px !important;
   }
-  .gs-u-mh-\@xxl {
+  .b-pw-1280 .gs-u-mh-\@xxl {
     margin-right: 4px !important;
     margin-left: 4px !important;
   }
-  .gs-u-mv-\@xxl {
+  .b-pw-1280 .gs-u-mv-\@xxl {
     margin-top: 4px !important;
     margin-bottom: 4px !important;
   }
-  /**
-     * Large margin spacing classes (gel spacing unit)
-     */
-  .gs-u-m\+\@xxl {
+  .b-pw-1280 .gs-u-m\+\@xxl {
     margin: 16px !important;
   }
-  .gs-u-mt\+\@xxl {
+  .b-pw-1280 .gs-u-mt\+\@xxl {
     margin-top: 16px !important;
   }
-  .gs-u-mr\+\@xxl {
+  .b-pw-1280 .gs-u-mr\+\@xxl {
     margin-right: 16px !important;
   }
-  .gs-u-mb\+\@xxl {
+  .b-pw-1280 .gs-u-mb\+\@xxl {
     margin-bottom: 16px !important;
   }
-  .gs-u-ml\+\@xxl {
+  .b-pw-1280 .gs-u-ml\+\@xxl {
     margin-left: 16px !important;
   }
-  .gs-u-mh\+\@xxl {
+  .b-pw-1280 .gs-u-mh\+\@xxl {
     margin-right: 16px !important;
     margin-left: 16px !important;
   }
-  .gs-u-mv\+\@xxl {
+  .b-pw-1280 .gs-u-mv\+\@xxl {
     margin-top: 16px !important;
     margin-bottom: 16px !important;
   }
-  /**
-     * Huge margin spacing classes (gel spacing unit)
-     */
-  .gs-u-m\+\+\@xxl {
+  .b-pw-1280 .gs-u-m\+\+\@xxl {
     margin: 32px !important;
   }
-  .gs-u-mt\+\+\@xxl {
+  .b-pw-1280 .gs-u-mt\+\+\@xxl {
     margin-top: 32px !important;
   }
-  .gs-u-mr\+\+\@xxl {
+  .b-pw-1280 .gs-u-mr\+\+\@xxl {
     margin-right: 32px !important;
   }
-  .gs-u-mb\+\+\@xxl {
+  .b-pw-1280 .gs-u-mb\+\+\@xxl {
     margin-bottom: 32px !important;
   }
-  .gs-u-ml\+\+\@xxl {
+  .b-pw-1280 .gs-u-ml\+\+\@xxl {
     margin-left: 32px !important;
   }
-  .gs-u-mh\+\+\@xxl {
+  .b-pw-1280 .gs-u-mh\+\+\@xxl {
     margin-right: 32px !important;
     margin-left: 32px !important;
   }
-  .gs-u-mv\+\+\@xxl {
+  .b-pw-1280 .gs-u-mv\+\+\@xxl {
     margin-top: 32px !important;
     margin-bottom: 32px !important;
   }
-  /**
-     * Alt margin spacing classes
-     */
-  .gs-u-m-alt\@xxl {
+  .b-pw-1280 .gs-u-m-alt\@xxl {
     margin: 12px !important;
   }
-  .gs-u-mt-alt\@xxl {
+  .b-pw-1280 .gs-u-mt-alt\@xxl {
     margin-top: 12px !important;
   }
-  .gs-u-mr-alt\@xxl {
+  .b-pw-1280 .gs-u-mr-alt\@xxl {
     margin-right: 12px !important;
   }
-  .gs-u-mb-alt\@xxl {
+  .b-pw-1280 .gs-u-mb-alt\@xxl {
     margin-bottom: 12px !important;
   }
-  .gs-u-ml-alt\@xxl {
+  .b-pw-1280 .gs-u-ml-alt\@xxl {
     margin-left: 12px !important;
   }
-  .gs-u-mh-alt\@xxl {
+  .b-pw-1280 .gs-u-mh-alt\@xxl {
     margin-right: 12px !important;
     margin-left: 12px !important;
   }
-  .gs-u-mv-alt\@xxl {
+  .b-pw-1280 .gs-u-mv-alt\@xxl {
     margin-top: 12px !important;
     margin-bottom: 12px !important;
   }
-  /**
-     * Alt double margin spacing classes
-     */
-  .gs-u-m-alt\+\@xxl {
+  .b-pw-1280 .gs-u-m-alt\+\@xxl {
     margin: 24px !important;
   }
-  .gs-u-mt-alt\+\@xxl {
+  .b-pw-1280 .gs-u-mt-alt\+\@xxl {
     margin-top: 24px !important;
   }
-  .gs-u-mr-alt\+\@xxl {
+  .b-pw-1280 .gs-u-mr-alt\+\@xxl {
     margin-right: 24px !important;
   }
-  .gs-u-mb-alt\+\@xxl {
+  .b-pw-1280 .gs-u-mb-alt\+\@xxl {
     margin-bottom: 24px !important;
   }
-  .gs-u-ml-alt\+\@xxl {
+  .b-pw-1280 .gs-u-ml-alt\+\@xxl {
     margin-left: 24px !important;
   }
-  .gs-u-mh-alt\+\@xxl {
+  .b-pw-1280 .gs-u-mh-alt\+\@xxl {
     margin-right: 24px !important;
     margin-left: 24px !important;
   }
-  .gs-u-mv-alt\+\@xxl {
+  .b-pw-1280 .gs-u-mv-alt\+\@xxl {
     margin-top: 24px !important;
     margin-bottom: 24px !important;
   }
-  /**
-     * Zero margin spacing classes
-     */
-  .gs-u-m0\@xxl {
+  .b-pw-1280 .gs-u-m0\@xxl {
     margin: 0 !important;
   }
-  .gs-u-mt0\@xxl {
+  .b-pw-1280 .gs-u-mt0\@xxl {
     margin-top: 0 !important;
   }
-  .gs-u-mr0\@xxl {
+  .b-pw-1280 .gs-u-mr0\@xxl {
     margin-right: 0 !important;
   }
-  .gs-u-mb0\@xxl {
+  .b-pw-1280 .gs-u-mb0\@xxl {
     margin-bottom: 0 !important;
   }
-  .gs-u-ml0\@xxl {
+  .b-pw-1280 .gs-u-ml0\@xxl {
     margin-left: 0 !important;
   }
-  .gs-u-mh0\@xxl {
+  .b-pw-1280 .gs-u-mh0\@xxl {
     margin-right: 0 !important;
     margin-left: 0 !important;
   }
-  .gs-u-mv0\@xxl {
+  .b-pw-1280 .gs-u-mv0\@xxl {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
   }
-  /**
-     * Padding spacing classes (gel spacing unit)
-     */
-  .gs-u-p\@xxl {
+  .b-pw-1280 .gs-u-p\@xxl {
     padding: 8px !important;
   }
-  .gs-u-pt\@xxl {
+  .b-pw-1280 .gs-u-pt\@xxl {
     padding-top: 8px !important;
   }
-  .gs-u-pr\@xxl {
+  .b-pw-1280 .gs-u-pr\@xxl {
     padding-right: 8px !important;
   }
-  .gs-u-pb\@xxl {
+  .b-pw-1280 .gs-u-pb\@xxl {
     padding-bottom: 8px !important;
   }
-  .gs-u-pl\@xxl {
+  .b-pw-1280 .gs-u-pl\@xxl {
     padding-left: 8px !important;
   }
-  .gs-u-ph\@xxl {
+  .b-pw-1280 .gs-u-ph\@xxl {
     padding-right: 8px !important;
     padding-left: 8px !important;
   }
-  .gs-u-pv\@xxl {
+  .b-pw-1280 .gs-u-pv\@xxl {
     padding-top: 8px !important;
     padding-bottom: 8px !important;
   }
-  /**
-     * Tiny padding spacing classes (gel spacing unit)
-     */
-  .gs-u-p--\@xxl {
+  .b-pw-1280 .gs-u-p--\@xxl {
     padding: 2px !important;
   }
-  .gs-u-pt--\@xxl {
+  .b-pw-1280 .gs-u-pt--\@xxl {
     padding-top: 2px !important;
   }
-  .gs-u-pr--\@xxl {
+  .b-pw-1280 .gs-u-pr--\@xxl {
     padding-right: 2px !important;
   }
-  .gs-u-pb--\@xxl {
+  .b-pw-1280 .gs-u-pb--\@xxl {
     padding-bottom: 2px !important;
   }
-  .gs-u-pl--\@xxl {
+  .b-pw-1280 .gs-u-pl--\@xxl {
     padding-left: 2px !important;
   }
-  .gs-u-ph--\@xxl {
+  .b-pw-1280 .gs-u-ph--\@xxl {
     padding-right: 2px !important;
     padding-left: 2px !important;
   }
-  .gs-u-pv--\@xxl {
+  .b-pw-1280 .gs-u-pv--\@xxl {
     padding-top: 2px !important;
     padding-bottom: 2px !important;
   }
-  /**
-     * Small padding spacing classes (gel spacing unit)
-     */
-  .gs-u-p-\@xxl {
+  .b-pw-1280 .gs-u-p-\@xxl {
     padding: 4px !important;
   }
-  .gs-u-pt-\@xxl {
+  .b-pw-1280 .gs-u-pt-\@xxl {
     padding-top: 4px !important;
   }
-  .gs-u-pr-\@xxl {
+  .b-pw-1280 .gs-u-pr-\@xxl {
     padding-right: 4px !important;
   }
-  .gs-u-pb-\@xxl {
+  .b-pw-1280 .gs-u-pb-\@xxl {
     padding-bottom: 4px !important;
   }
-  .gs-u-pl-\@xxl {
+  .b-pw-1280 .gs-u-pl-\@xxl {
     padding-left: 4px !important;
   }
-  .gs-u-ph-\@xxl {
+  .b-pw-1280 .gs-u-ph-\@xxl {
     padding-right: 4px !important;
     padding-left: 4px !important;
   }
-  .gs-u-pv-\@xxl {
+  .b-pw-1280 .gs-u-pv-\@xxl {
     padding-top: 4px !important;
     padding-bottom: 4px !important;
   }
-  /**
-     * Large padding spacing classes (gel spacing unit)
-     */
-  .gs-u-p\+\@xxl {
+  .b-pw-1280 .gs-u-p\+\@xxl {
     padding: 16px !important;
   }
-  .gs-u-pt\+\@xxl {
+  .b-pw-1280 .gs-u-pt\+\@xxl {
     padding-top: 16px !important;
   }
-  .gs-u-pr\+\@xxl {
+  .b-pw-1280 .gs-u-pr\+\@xxl {
     padding-right: 16px !important;
   }
-  .gs-u-pb\+\@xxl {
+  .b-pw-1280 .gs-u-pb\+\@xxl {
     padding-bottom: 16px !important;
   }
-  .gs-u-pl\+\@xxl {
+  .b-pw-1280 .gs-u-pl\+\@xxl {
     padding-left: 16px !important;
   }
-  .gs-u-ph\+\@xxl {
+  .b-pw-1280 .gs-u-ph\+\@xxl {
     padding-right: 16px !important;
     padding-left: 16px !important;
   }
-  .gs-u-pv\+\@xxl {
+  .b-pw-1280 .gs-u-pv\+\@xxl {
     padding-top: 16px !important;
     padding-bottom: 16px !important;
   }
-  /**
-     * Huge padding spacing classes (gel spacing unit)
-     */
-  .gs-u-p\+\+\@xxl {
+  .b-pw-1280 .gs-u-p\+\+\@xxl {
     padding: 32px !important;
   }
-  .gs-u-pt\+\+\@xxl {
+  .b-pw-1280 .gs-u-pt\+\+\@xxl {
     padding-top: 32px !important;
   }
-  .gs-u-pr\+\+\@xxl {
+  .b-pw-1280 .gs-u-pr\+\+\@xxl {
     padding-right: 32px !important;
   }
-  .gs-u-pb\+\+\@xxl {
+  .b-pw-1280 .gs-u-pb\+\+\@xxl {
     padding-bottom: 32px !important;
   }
-  .gs-u-pl\+\+\@xxl {
+  .b-pw-1280 .gs-u-pl\+\+\@xxl {
     padding-left: 32px !important;
   }
-  .gs-u-ph\+\+\@xxl {
+  .b-pw-1280 .gs-u-ph\+\+\@xxl {
     padding-right: 32px !important;
     padding-left: 32px !important;
   }
-  .gs-u-pv\+\+\@xxl {
+  .b-pw-1280 .gs-u-pv\+\+\@xxl {
     padding-top: 32px !important;
     padding-bottom: 32px !important;
   }
-  /**
-     * Alt padding spacing classes (gel-alt-spacing-unit)
-     */
-  .gs-u-p-alt\@xxl {
+  .b-pw-1280 .gs-u-p-alt\@xxl {
     padding: 12px !important;
   }
-  .gs-u-pt-alt\@xxl {
+  .b-pw-1280 .gs-u-pt-alt\@xxl {
     padding-top: 12px !important;
   }
-  .gs-u-pr-alt\@xxl {
+  .b-pw-1280 .gs-u-pr-alt\@xxl {
     padding-right: 12px !important;
   }
-  .gs-u-pb-alt\@xxl {
+  .b-pw-1280 .gs-u-pb-alt\@xxl {
     padding-bottom: 12px !important;
   }
-  .gs-u-pl-alt\@xxl {
+  .b-pw-1280 .gs-u-pl-alt\@xxl {
     padding-left: 12px !important;
   }
-  .gs-u-ph-alt\@xxl {
+  .b-pw-1280 .gs-u-ph-alt\@xxl {
     padding-right: 12px !important;
     padding-left: 12px !important;
   }
-  .gs-u-pv-alt\@xxl {
+  .b-pw-1280 .gs-u-pv-alt\@xxl {
     padding-top: 12px !important;
     padding-bottom: 12px !important;
   }
-  /**
-     * Alt double padding spacing classes (gel-alt-spacing-unit)
-     */
-  .gs-u-p-alt\+\@xxl {
+  .b-pw-1280 .gs-u-p-alt\+\@xxl {
     padding: 24px !important;
   }
-  .gs-u-pt-alt\+\@xxl {
+  .b-pw-1280 .gs-u-pt-alt\+\@xxl {
     padding-top: 24px !important;
   }
-  .gs-u-pr-alt\+\@xxl {
+  .b-pw-1280 .gs-u-pr-alt\+\@xxl {
     padding-right: 24px !important;
   }
-  .gs-u-pb-alt\+\@xxl {
+  .b-pw-1280 .gs-u-pb-alt\+\@xxl {
     padding-bottom: 24px !important;
   }
-  .gs-u-pl-alt\+\@xxl {
+  .b-pw-1280 .gs-u-pl-alt\+\@xxl {
     padding-left: 24px !important;
   }
-  .gs-u-ph-alt\+\@xxl {
+  .b-pw-1280 .gs-u-ph-alt\+\@xxl {
     padding-right: 24px !important;
     padding-left: 24px !important;
   }
-  .gs-u-pv-alt\+\@xxl {
+  .b-pw-1280 .gs-u-pv-alt\+\@xxl {
     padding-top: 24px !important;
     padding-bottom: 24px !important;
   }
-  /**
-     * Zero padding spacing classes
-     */
-  .gs-u-p0\@xxl {
+  .b-pw-1280 .gs-u-p0\@xxl {
     padding: 0 !important;
   }
-  .gs-u-pt0\@xxl {
+  .b-pw-1280 .gs-u-pt0\@xxl {
     padding-top: 0 !important;
   }
-  .gs-u-pr0\@xxl {
+  .b-pw-1280 .gs-u-pr0\@xxl {
     padding-right: 0 !important;
   }
-  .gs-u-pb0\@xxl {
+  .b-pw-1280 .gs-u-pb0\@xxl {
     padding-bottom: 0 !important;
   }
-  .gs-u-pl0\@xxl {
+  .b-pw-1280 .gs-u-pl0\@xxl {
     padding-left: 0 !important;
   }
-  .gs-u-ph0\@xxl {
+  .b-pw-1280 .gs-u-ph0\@xxl {
     padding-right: 0 !important;
     padding-left: 0 !important;
   }
-  .gs-u-pv0\@xxl {
+  .b-pw-1280 .gs-u-pv0\@xxl {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
   }
shaunbent commented 8 years ago

👍