fix rules based on scale changes

README.md

@@ -99,7 +99,7 @@ Assembly strives for flat, single rule declarations and avoids overrides wheneve
 ### Naming classes
 
 - Keep names as short as possible.
-- Use real number values in utility class names to describe the value the utility class applies _in cases where the number of utility classes describing a particular property could be unlimited_. For example, `.p6` for `padding: 6px` instead of `.p-small` or `.p-1`.
+- Use real number values in utility class names to describe the value the utility class applies _in cases where the number of utility classes describing a particular property could be unlimited_. For example, `.pt6` for `padding-top: 6px` instead of `.pt-small` or `.pt-1`.
 - If the number of utility classes describing a property is limited, Assembly classes use the suffixes, `xl`, `l`, `m`, `s`, `sm`.
 - Assembly doesn't have a top level namespace. Assembly is designed to provide fundamental rules that are used frequently and should be easy to type and remember. If you want to use your own css with base, consider namespacing that css.
 

scripts/build-color-variants.js

@@ -384,7 +384,7 @@ function buildColorVariants(variables, config) {
        * <div class='grid'>`
     );
     colors.forEach((color) => {
-      css += `\n *   <div class='col col--3 bg-${color} p6'>bg-${color}</div>`;
+      css += `\n *   <div class='col col--3 bg-${color} py6 px6'>bg-${color}</div>`;
     });
     css += '\n * </div>\n */';
     css += colors.reduce((result, color) => {

site/catalog/bleeds.js

@@ -9,22 +9,22 @@ class Bleeds extends React.Component {
         </h2>
 
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w240 p12 bg-darken10'>
+          <div className='w240 px12 py12 bg-darken10'>
             <div className='bg-darken10 bleed-r'>Right bleed</div>
           </div>
         </div>
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w240 p12 bg-darken10'>
+          <div className='w240 px12 py12 bg-darken10'>
             <div className='bg-darken10 bleed-l align-r'>Left bleed</div>
           </div>
         </div>
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w240 p12 bg-darken10'>
+          <div className='w240 px12 py12 bg-darken10'>
             <div className='bg-darken10 bleed-r-mxl'>Right bleed at xl</div>
           </div>
         </div>
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w240 p12 bg-darken10'>
+          <div className='w240 px12 py12 bg-darken10'>
             <div className='bg-darken10 bleed-r unbleed-mxl'>Right bleed until xl</div>
           </div>
         </div>

site/catalog/grids.js

@@ -18,7 +18,7 @@ function RowEl(props) {
   return (
     <div className={`txt-s grid mb18 ${props.gutter ? props.gutter : ''}`}>
       {props.combo.map((c, i) => <div key={i} className={`col col--${c}`}>
-        <div className='border p3'>col--{c}</div>
+        <div className='border px3 py3'>col--{c}</div>
       </div>)}
     </div>
   );
@@ -28,7 +28,7 @@ function RowElWithLeftMargin(props) {
   return (
     <div className='txt-s grid mb18'>
       {props.combo.map((c, i) => <div key={i} className={`col col--${i === 1 ? 'offl' : '' }${c}`}>
-        {i === 1 ? '' : <div className='border p3'>col--{c}</div>}
+        {i === 1 ? '' : <div className='border px3 py3'>col--{c}</div>}
       </div>)}
     </div>
   );
@@ -38,7 +38,7 @@ function RowElWithRightMargin(props) {
   return (
     <div className='txt-s grid mb18'>
       {props.combo.map((c, i) => <div key={i} className={`col col--${i === 1 ? 'offr' : '' }${c}`}>
-        {i === 1 ? '' : <div className='border p3'>col--{c}</div>}
+        {i === 1 ? '' : <div className='border px3 py3'>col--{c}</div>}
       </div>)}
     </div>
   );
@@ -84,13 +84,13 @@ class Grids extends React.Component {
         <h3 className='mb12 mt60 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grids only on large screens</h3>
         <div className='txt-s grid-ml grid--gut24-ml mb18'>
           <div className='col-ml col--6-ml'>
-            <div className='border p3'>col--6-ml</div>
+            <div className='border px3 py3'>col--6-ml</div>
           </div>
           <div className='col-ml col--3-ml'>
-            <div className='border p3'>col--3-ml</div>
+            <div className='border px3 py3'>col--3-ml</div>
           </div>
           <div className='col-ml col--3-ml'>
-            <div className='border p3'>col--3-ml</div>
+            <div className='border px3 py3'>col--3-ml</div>
           </div>
         </div>
       </div>

site/catalog/tables.js

@@ -71,7 +71,7 @@ class Tables extends React.Component {
               </tbody>
             </table>
 
-            <div className='bg-gray-dark p12'>
+            <div className='bg-gray-dark px12 py12'>
               <table className='table table--dark mb18'>
                 <thead>
                   <tr>
@@ -154,7 +154,7 @@ class Tables extends React.Component {
               </tbody>
             </table>
 
-            <div className='bg-gray-dark p12'>
+            <div className='bg-gray-dark px12 py12'>
               <table className='table--dark'>
                 <thead>
                   <tr>

site/catalog/toggles.js

@@ -80,12 +80,12 @@ class Toggles extends React.Component {
         </div>
 
         <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>Light variations</div>
-        <div className='bg-gray round p12y mt12'>
+        <div className='bg-gray round px12 py12y mt12'>
         {lightenColors.map((c) => <ToggleEl key={c} color={c} />)}
         </div>
 
         <div className='mt24 mb12 txt-bold color-darken50 txt-uppercase txt-s'>Disabled and light</div>
-        <div className='bg-gray round p12y mt12'>
+        <div className='bg-gray round px12 py12y mt12'>
         {lightenColors.map((c) => <ToggleEl key={c} color={c} disabled={true} />)}
         </div>
 

site/examples/badges.js

@@ -18,11 +18,11 @@ const warning = `<div class='bg-orange-faint color-orange-dark inline-block px6
 </div>`;
 
 const chip = `<div class='flex-parent flex-parent--center-cross flex-parent-inline relative w240'>
-  <div class='bg-blue-faint round-l col col--6 p12'>
+  <div class='bg-blue-faint round-l col col--6 px12 py12'>
     <strong class='txt-s color-blue'>This</strong>
   </div>
   <span class='triangle triangle--r mr-neg12 z1 color-blue-faint'></span>
-  <div class='bg-blue round-r col col--6 p12 pl24'>
+  <div class='bg-blue round-r col col--6 px12 py12 pl24'>
     <strong class='txt-s color-blue-faint'>is that</strong>
   </div>
 </div>`;

site/examples/equal_height_columns.js

@@ -3,17 +3,17 @@ import { HtmlExample } from '../html_example';
 
 const html = `<div class='grid grid--gut12 flex-parent--stretch-cross'>
   <div class='col col--4'>
-    <div class='h-full bg-darken10 p12'>
+    <div class='h-full bg-darken10 px12 py12'>
       <div class='bg-darken10 h60'></div>
     </div>
   </div>
   <div class='col col--4'>
-    <div class='h-full bg-darken10 p12'>
+    <div class='h-full bg-darken10 px12 py12'>
       <div class='bg-darken10 h60'></div>
     </div>
   </div>
   <div class='col col--4'>
-    <div class='h-full bg-darken10 p12'>
+    <div class='h-full bg-darken10 px12 py12'>
       <div class='bg-darken10 h120'></div>
     </div>
   </div>

site/examples/legends.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HtmlExample } from '../html_example';
 
-const basicLegend = `<div class='w240 round shadow-darken5 p12 txt-s'>
+const basicLegend = `<div class='w240 round shadow-darken5 px12 py12 txt-s'>
   <strong class='block mb6'>Title description</strong>
   <div class='flex-parent mb6'>
     <div class='flex-child flex-child--grow bg-blue-faint h12'></div>
@@ -19,7 +19,7 @@ const basicLegend = `<div class='w240 round shadow-darken5 p12 txt-s'>
   </div>
 </div>`;
 
-const basicLegendTwo = `<div class='w240 round shadow-darken5 p12 txt-s'>
+const basicLegendTwo = `<div class='w240 round shadow-darken5 px12 py12 txt-s'>
   <strong class='block mb6'>Title description</strong>
   <div class='flex-parent mb6'>
     <div class='flex-child flex-child--grow bg-green-faint h12'></div>
@@ -35,7 +35,7 @@ const basicLegendTwo = `<div class='w240 round shadow-darken5 p12 txt-s'>
   </div>
 </div>`;
 
-const radiusLegend = `<div class='w240 round shadow-darken5 p12 txt-s'>
+const radiusLegend = `<div class='w240 round shadow-darken5 px12 py12 txt-s'>
   <strong class='block mb6'>Title description</strong>
   <div class='flex-parent flex-parent--center-main flex-parent--center-cross align-center'>
     <div class='flex-child flex-child--grow wmin24'>

site/examples/modal.js

@@ -6,10 +6,10 @@ const tiles = `<div class='bg-darken10 viewport-half'>
 <div class='fixed top right bottom left scroll-auto'></div>-->
   <div class='flex-parent flex-parent--center-main pt36'>
     <div class='flex-child bg-white round relative w600'>
-      <button class='absolute top right p12'>
+      <button class='absolute top right px12 py12'>
         <svg class='icon link color-darken50'><use xlink:href='#icon-close'></use></svg>
       </button>
-      <div class='p24'>
+      <div class='px24 py24'>
         <div class='txt-l mb12'>Modal title</div>
         <div class='txt-m'>
           I am some modal body content.

site/examples/navigation.js

@@ -18,7 +18,7 @@ const underlinedTabs = `<div class='bg-gray border-b border--black flex-parent h
   <button class='mb-neg1 px12 py6 border-b border--black border--white-on-active color-lighten50 color-white-on-active color-lighten75-on-hover is-active'>Active</button>
   <button class='mb-neg1 px12 py6 border-b border--black border--white-on-active color-lighten50 color-white-on-active color-lighten75-on-hover'>Two</button>
 </div>
-<div class='bg-darken75 color-white p12'>
+<div class='bg-darken75 color-white px12 py12'>
   Changing content
 </div>`;
 

site/examples/progress_bars.js

@@ -9,7 +9,7 @@ const playback = `<div class='flex-parent flex-parent--row flex-parent--center-c
     <button class='flex-child py18 pr12 pl18 border-r border--gray-light bg-white bg-green-faint-on-hover cursor-pointer round-l'>
       <div class='triangle--r triangle color-green color-green'></div>
     </button>
-    <div class='flex-child flex-child--grow p18 bg-white'>
+    <div class='flex-child flex-child--grow px18 py18bg-white'>
       <div class='relative w-full h12 bg-darken10 round-full'>
         <div class='absolute top right bottom left m3 bg-green-light round-full' style='width:50%;'>
           <span class='absolute top right w30 h6 bg-green round-full'></span>

site/examples/sidebar_apps.js

@@ -4,11 +4,11 @@ import { HtmlExample } from '../html_example';
 const basicSidebar = `<div class='flex-parent viewport-full relative clip'>
   <div class='flex-child w-full w240-ml absolute static-ml left bottom'>
     <div class='flex-parent flex-parent--column viewport-third h-full hmax-full bg-white'>
-      <div class='flex-child flex-child--grow p12 scroll-auto'>
+      <div class='flex-child flex-child--grow px12 py12 scroll-auto'>
         <h3 class='txt-m txt-bold mb6'>Title here</h3>
         <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
       </div>
-      <footer class='p12 bg-gray-faint txt-s'>
+      <footer class='px12 py12 bg-gray-faint txt-s'>
         Footer content here
       </footer>
     </div>
@@ -18,13 +18,13 @@ const basicSidebar = `<div class='flex-parent viewport-full relative clip'>
 
 const floatingSidebar = `<div class='viewport-full relative clip'>
   <div class='bg-darken10 viewport-twothirds viewport-full-ml absolute top left right bottom'></div>
-  <div class='absolute top-ml left bottom z1 w-full w240-ml p12-ml'>
+  <div class='absolute top-ml left bottom z1 w-full w240-ml px12 py12-ml'>
     <div class='flex-parent flex-parent--column viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken5'>
-      <div class='p12 scroll-auto'>
+      <div class='px12 py12 scroll-auto'>
         <h3 class='txt-m txt-bold mb6'>Title here</h3>
         <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
       </div>
-      <footer class='p12 bg-gray-faint round-b-ml txt-s'>
+      <footer class='px12 py12 bg-gray-faint round-b-ml txt-s'>
         Footer content here
       </footer>
     </div>

site/examples/tile_layout.js

@@ -5,23 +5,23 @@ const tiles = `<div class='grid grid--gut12 h600'>
   <div class='flex-parent flex-parent--wrap col col--12 col--6-mm col--8-ml mb12 mb0-mm'>
     <div class='flex-parent flex-parent--wrap col col--12 mb12'>
       <div class='flex-parent flex-parent--wrap col col--12 col--6-ml mb12 mb0-ml pr0 pr12-ml'>
-        <div class='col col--12 bg-darken10 p12 mb12'>Vertical</div>
-        <div class='col col--12 bg-darken10 p12'>Tiles</div>
+        <div class='col col--12 bg-darken10 px12 py12 mb12'>Vertical</div>
+        <div class='col col--12 bg-darken10 px12 py12'>Tiles</div>
       </div>
       <div class='flex-parent col col--12 col--6-ml'>
-        <div class='bg-darken10 col col--12 p12'>
+        <div class='bg-darken10 col col--12 px12 py12'>
           Middle tile
         </div>
       </div>
     </div>
     <div class='flex-parent col col--12'>
-      <div class='bg-darken10 col col--12 p12'>
+      <div class='bg-darken10 col col--12 px12 py12'>
         Wide tile
       </div>
     </div>
   </div>
   <div class='flex-parent col col--12 col--6-mm col--4-ml'>
-    <div class='bg-darken10 col col--12 p12'>
+    <div class='bg-darken10 col col--12 px12 py12'>
       Tall tile
     </div>
   </div>

site/examples/tooltips.js

@@ -2,22 +2,22 @@ import React from 'react';
 import { HtmlExample } from '../html_example';
 
 const basic = `<div class='flex-parent-inline flex-parent--center-cross flex-parent--column'>
-  <div class='flex-child p6 bg-darken75 color-white align-center  round txt-bold txt-s'>Hello world!</div>
+  <div class='flex-child px6 py6bg-darken75 color-white align-center  round txt-bold txt-s'>Hello world!</div>
   <span class='flex-child triangle triangle--d'></span>
 </div>`;
 
 const basic_right = `<div class='flex-parent-inline flex-parent--center-cross'>
   <span class='flex-child triangle triangle--l'></span>
-  <div class='flex-child p6 round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
+  <div class='flex-child px6 py6round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
 </div>`;
 
 const basic_left = `<div class='flex-parent-inline flex-parent--center-cross'>
-  <div class='flex-child p6 round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
+  <div class='flex-child px6 py6round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
   <span class='flex-child triangle triangle--r'></span>
 </div>`;
 
 const basic_with_closure = `<div class='flex-parent-inline flex-parent--center-cross flex-parent--column'>
-  <div class='flex-child relative p18 round txt-bold txt-s align-center bg-darken75 color-white'>
+  <div class='flex-child relative px18 py18round txt-bold txt-s align-center bg-darken75 color-white'>
     <button class='flex-child absolute top right'>
       <svg class='flex-child icon link color-white'><use xlink:href='#icon-close'></use></svg>
     </button>

site/html_example.js

@@ -9,12 +9,12 @@ function HtmlExample(props) {
   return (
     <div>
         <div
-          className='border border--gray-light p12 round-t'
+          className='border border--gray-light px12 py12 round-t'
           dangerouslySetInnerHTML={{ __html: props.code }}
         />
       <div className='pre bg-gray-faint scroll-auto hmax240 border-l border-b border-r border--gray-light round-b relative'>
 
-        {copy && <div className='absolute top right p12'>
+        {copy && <div className='absolute top right px12 py12'>
           <button
             data-clipboard-text={props.code}
             className='ml3 btn btn--xs btn--darken25 round js-clipboard'>

site/icons.js

@@ -14,7 +14,7 @@ class Icons extends React.Component {
   render() {
     const iconEls = icons.map((icon) => {
       return (
-        <div key={icon} className='col--6 col--4-ml col--3-mxl flex-parent flex-parent--center-cross flex-child p12 border-b border-t border-l ml-neg1 mb-neg1 border-r border--gray-light'>
+        <div key={icon} className='col--6 col--4-ml col--3-mxl flex-parent flex-parent--center-cross flex-child px12 py12 border-b border-t border-l ml-neg1 mb-neg1 border-r border--gray-light'>
           <svg className='icon mr12'>
             <use xlinkHref={`#icon-${icon}`} />
           </svg>

src/buttons.css

@@ -21,7 +21,7 @@
  * <button class='btn btn--red'>Color</button>
  * <button class='btn btn--green color-yellow'>More colors</button>
  * <button class='btn round'>Less rounded</button>
- * <div class='p6 bg-blue inline-block'>
+ * <div class='px6 py6bg-blue inline-block'>
  *   <button class='btn btn--white color-blue'>Reverse</button>
  * </div>
  */
@@ -49,7 +49,7 @@
  * <button class='btn btn--stroke'>Default</button>
  * <button class='btn btn--stroke btn--red'>Color</button>
  * <button class='btn btn--stroke round'>Less rounded</button>
- * <div class='p6 bg-blue inline-block'>
+ * <div class='px6 py6bg-blue inline-block'>
  *   <button class='btn btn--stroke btn--white'>Reverse</button>
  * </div>
  */