1.0.0-beta6

Add Autoprefixer

index.html

@@ -31,7 +31,7 @@
     <p>
       Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any
       preprocessing at all. The minified version is only
-      <span data-minifiedSize>32KB</span> and much smaller when gzipped.
+      <span data-minifiedSize>32.0KB</span> and much smaller when gzipped.
     </p>
     <p>
       Just link to <code>shoelace.css</code> and add customizations to your stylesheet.
@@ -51,7 +51,7 @@
       Shoelace was created by <a href="https://twitter.com/claviska">@claviska</a> for
       <a href="https://www.surrealcms.com/">Surreal CMS</a>. It’s available under the MIT license.
     </p>
-    <p class="m-t-medium text-center">
+    <p class="margin-t-medium text-center">
       <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
       <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
       <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
@@ -60,7 +60,7 @@
       <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
     </p>
     <p class="text-small text-muted text-center">
-      Version <span data-version>1.0.0-beta5</span>
+      Version <span data-version>1.0.0-beta6</span>
     </p>
 
     <!--********************************************************************************************
@@ -111,12 +111,13 @@
       at <a href="https://www.keycdn.com/">KeyCDN</a>.
     </p>
 <pre>
-&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta5</span>/shoelace.css&quot;&gt;
+&lt;link rel=&quot;preload&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta6</span>/shoelace.css&quot; as=&quot;style&quot; crossorigin&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta6</span>/shoelace.css&quot;&gt;
 </pre>
-    <p class="text-right">
-      <a href="https://www.keycdn.com/">
-        <img src="https://logos.keycdn.com/keycdn-logo.svg" alt="KeyCDN logo" class="width-20">
-      </a>
+    <p>
+      Note that the first <code>&lt;link&gt;</code> is optional but can improve performance in
+      supportive browsers.
+      <a href="https://www.w3.org/TR/preload/#x2.link-type-preload">Learn more about preloading.</a>
     </p>
 
     <h3 id="download">Download</h3>
@@ -523,7 +524,7 @@ PRINT "SHOELACE IS AWESOME"
     <p>
       <button type="button" class="active">Default</button>
       <button type="button" class="button-success active">Success</button>
-      <button type="button" class="button-info disabled active">Info</button>
+      <button type="button" class="button-info active">Info</button>
       <button type="button" class="button-warning active">Warning</button>
       <button type="button" class="button-danger active">Danger</button>
       <button type="button" class="button-inverse active">Inverse</button>
@@ -1111,12 +1112,9 @@ PRINT "SHOELACE IS AWESOME"
 
     <p>
       <strong>Tabs are not interactive by default!</strong> Shoelace is a CSS starter kit, not a
-      framework. For convenience, a lightweight sample script is provided to demonstrate how to
-      make tabs interactive.
+      framework. For convenience, <a href="source/js/tabs.js">a lightweight sample script</a> is
+      provided to demonstrate how to make tabs interactive.
     </p>
-<pre>
-&lt;script src=&quot;js/tabs.js&quot;&gt;&lt;/script&gt;
-</pre>
 
     <h3 id="vertical-tabs">Vertical Tabs</h3>
     <p></p>
@@ -1395,28 +1393,27 @@ PRINT "SHOELACE IS AWESOME"
       the desired class and the appropriate element will receive the respective padding/margin.
     </p>
     <p>
-      Class names are prefixed with <code>m-</code> or <code>p-</code> for margin and padding,
-      respectively. To apply a padding/margin to all sides of an element, use the following
-      classes:
+      Class names are prefixed with <code>padding-</code> or <code>margin-</code> for padding and
+      margin, respectively. To apply spacing to all sides of an element, use the following classes:
     </p>
 <pre>
-p-[none|small|medium|big]
-m-[none|small|medium|big]
+padding-[none|small|medium|big]
+margin-[none|small|medium|big]
 
-Example: class="p-none m-big"
+Example: &lt;div class=&quot;padding-none margin-big&quot;&gt;
 </pre>
     <p>
-      To apply a padding/margin to a specific side of an element, use one or more of the following
-      classes:
+      To apply spacing to a specific side of an element, use one or more of the following classes:
     </p>
 <pre>
-p-[top|right|bottom|left|x|y]-[none|small|medium|big]
-m-[top|right|bottom|left|x|y]-[none|small|medium|big]
+padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
+margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
 
-Example: class="p-left-medium m-bottom-none"
+Example: &lt;div class=&quot;padding-left-medium margin-bottom-none&quot;&gt;
 </pre>
     <p>
-      You can also use <code>m-x-auto</code> to horizontally center a fixed width block.
+      You can also use <code>margin-[x|y|xy]-auto</code> to set automatic margins horizontally
+      and/or horizontally.
     </p>
 
     <!--********************************************************************************************
@@ -1538,7 +1535,7 @@ Example: class="p-left-medium m-bottom-none"
         <img src="source/img/wordmark.svg" alt="Shoelace logo">
       </p>
       <p class="text-small text-muted">
-        Shoelace.css <span data-version>1.0.0-beta5</span> &middot;
+        Shoelace.css <span data-version>1.0.0-beta6</span> &middot;
         &copy; A Beautiful Site, LLC
       </p>
       <p class="text-small text-muted">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shoelace-css",
   "description": "A back to the basics CSS starter kit.",
-  "version": "1.0.0-beta5",
+  "version": "1.0.0-beta6",
   "author": "Cory LaViska",
   "homepage": "https://shoelace.style/",
   "license": "MIT",
@@ -10,12 +10,16 @@
     "url": "https://github.com/claviska/shoelace-css"
   },
   "devDependencies": {
+    "autoprefixer": "^7.1.2",
     "chalk": "^2.0.1",
-    "clean-css": "^4.1.7",
     "commander": "^2.11.0",
+    "cssnano": "^3.10.0",
     "del": "^3.0.0",
     "dotenv": "^4.0.0",
     "fs": "0.0.1-security",
+    "postcss": "^6.0.8",
+    "postcss-import": "^10.0.0",
     "s3": "^4.4.0"
-  }
+  },
+  "dependencies": {}
 }

shoelace.js

@@ -3,13 +3,16 @@
 global.__version = require('./package.json').version;
 
 require('dotenv').config();
-const CleanCSS = require('clean-css');
 const Chalk = require('chalk');
 const Del = require('del');
 const FS = require('fs');
 const Path = require('path');
 const Program = require('commander');
 const S3 = require('s3');
+const PostCSS = require('postcss');
+const Autoprefixer = require('autoprefixer');
+const AtImport = require('postcss-import');
+const CSSnano = require('cssnano');
 
 let source = Path.join(__dirname, 'source/css');
 let dist = Path.join(__dirname, 'dist');
@@ -37,42 +40,38 @@ if(!process.argv.slice(2).length) {
 
 // Run build task
 if(Program.build) {
-  const clean = new CleanCSS({
-    // format: 'beautify',
-    inline: ['local'],
-    rebaseTo: Path.dirname(dist),
-    specialComments: 'all'
-  });
-
   Promise.resolve()
     // Generate minified version
-    .then(() => new Promise((resolve, reject) => {
-      clean.minify({
-        [inFile]: { styles: FS.readFileSync(inFile, 'utf8') }
-      }, (errors, output) => {
-        // Show errors
-        if(errors) {
-          errors.forEach((err) => console.log(Chalk.red(err)));
-          reject(new Error('Failed to minify styles.'));
-          return;
+    .then(() => new Promise((resolve, reject) =>{
+      let css = FS.readFileSync(inFile, 'utf8');
+      let output = {
+        stats: {
+          originalSize: css.length
         }
+      };
 
+      PostCSS([Autoprefixer({
+        browsers: ['last 2 versions', '> 5%', 'ie >= 11', 'iOS >= 8']
+      }), AtImport, CSSnano({
+        safe: true
+      })]).process(css, {
+        from: inFile
+      }).then((result) => {
+        output.styles = result.css;
+        output.stats.minifiedSize = output.styles.length;
         resolve(output);
+      }).catch((err) => {
+        reject(err);
       });
-
     }))
     // Write dist files
     .then((output) => new Promise((resolve, reject) => {
       // Get stats
       let stats = {
-        originalSize: parseInt(output.stats.originalSize / 1000) + 'KB', // KB
-        minifiedSize: parseInt(output.stats.minifiedSize / 1000) + 'KB' // KB
+        originalSize: (output.stats.originalSize / 1024).toFixed(1) + 'KB', // KB
+        minifiedSize: (output.stats.minifiedSize / 1024).toFixed(1) + 'KB' // KB
       };
 
-      // Show output warnings and errors
-      output.warnings.forEach((err) => console.log(Chalk.red(err)));
-      output.errors.forEach((err) => console.log(Chalk.red(err)));
-
       // Update placeholders in CSS
       output.styles = output.styles
         .replace(/\{version\}/g, __version)

source/css/forms.css

@@ -49,7 +49,8 @@ textarea {
   line-height: 1;
   vertical-align: middle;
   display: block;
-  padding: calc(var(--component-spacing) * .5);
+  padding-left: calc(var(--component-spacing) * .5);
+  padding-right: calc(var(--component-spacing) * .5);
   margin: 0;
   transition: .1s border-color, .1s background-color, .1s color;
   white-space: nowrap;
@@ -94,6 +95,10 @@ textarea {
   white-space: normal;
 }
 
+input[type="color"] {
+  padding: calc(var(--component-spacing) * .5);
+}
+
 input[type="color"]::-webkit-color-swatch-wrapper {
 	padding: 0;
 }
@@ -138,17 +143,17 @@ textarea.input-big {
 }
 
 /* Range styles courtesy of http://danielstern.ca/range.css/ */
-input[type=range] {
+input[type="range"] {
   -webkit-appearance: none;
   width: 100%;
   margin: 1rem 0;
 }
 
-input[type=range]:focus {
+input[type="range"]:focus {
   outline: none;
 }
 
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: .5rem;
   cursor: pointer;
@@ -158,7 +163,7 @@ input[type=range]::-webkit-slider-runnable-track {
   box-shadow: var(--input-range-track-box-shadow);
 }
 
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
   border: none;
   width: 1.5rem;
   height: 1.5rem;
@@ -169,11 +174,11 @@ input[type=range]::-webkit-slider-thumb {
   margin-top: -.5rem;
 }
 
-input[type=range]:focus::-webkit-slider-runnable-track {
+input[type="range"]:focus::-webkit-slider-runnable-track {
   background: var(--input-range-track-color);
 }
 
-input[type=range]::-moz-range-track {
+input[type="range"]::-moz-range-track {
   width: 100%;
   height: .5rem;
   cursor: pointer;
@@ -183,7 +188,7 @@ input[type=range]::-moz-range-track {
   box-shadow: var(--input-range-track-box-shadow);
 }
 
-input[type=range]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb {
   border: none;
   height: 1.5rem;
   width: 1.5rem;
@@ -192,7 +197,7 @@ input[type=range]::-moz-range-thumb {
   cursor: pointer;
 }
 
-input[type=range]::-ms-track {
+input[type="range"]::-ms-track {
   width: 100%;
   height: .5rem;
   cursor: pointer;
@@ -201,19 +206,19 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 
-input[type=range]::-ms-fill-lower {
+input[type="range"]::-ms-fill-lower {
   background: #2f6ea5;
   border: none;
   border-radius: var(--input-border-radius);
 }
 
-input[type=range]::-ms-fill-upper {
+input[type="range"]::-ms-fill-upper {
   background: var(--input-range-track-color);
   border: none;
   border-radius: var(--input-border-radius);
 }
 
-input[type=range]::-ms-thumb {
+input[type="range"]::-ms-thumb {
   border: none;
   height: .5rem;
   width: .5rem;
@@ -222,11 +227,11 @@ input[type=range]::-ms-thumb {
   cursor: pointer;
 }
 
-input[type=range]:focus::-ms-fill-lower {
+input[type="range"]:focus::-ms-fill-lower {
   background: var(--input-range-track-color);
 }
 
-input[type=range]:focus::-ms-fill-upper {
+input[type="range"]:focus::-ms-fill-upper {
   background: var(--input-range-track-color);
 }
 

source/css/utilities.css

@@ -74,71 +74,73 @@
 * Spacing utilities
 ***************************************************************************************************/
 
-.m-none { margin: 0 !important; }
-.m-x-none { margin-left: 0 !important; margin-right: 0 !important; }
-.m-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
-.m-t-none { margin-top: 0 !important; }
-.m-r-none { margin-right: 0 !important; }
-.m-b-none { margin-bottom: 0 !important; }
-.m-l-none { margin-left: 0 !important; }
+.padding-none { padding: 0 !important; }
+.padding-x-none { padding-left: 0 !important; padding-right: 0 !important; }
+.padding-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
+.padding-t-none { padding-top: 0 !important; }
+.padding-r-none { padding-right: 0 !important; }
+.padding-b-none { padding-bottom: 0 !important; }
+.padding-l-none { padding-left: 0 !important; }
 
-.m-small { margin: var(--spacing-small) !important; }
-.m-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
-.m-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
-.m-t-small { margin-top: var(--spacing-small) !important; }
-.m-r-small { margin-right: var(--spacing-small) !important; }
-.m-b-small { margin-bottom: var(--spacing-small) !important; }
-.m-l-small { margin-left: var(--spacing-small) !important; }
+.padding-small { padding: var(--spacing-small) !important; }
+.padding-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
+.padding-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
+.padding-t-small { padding-top: var(--spacing-small) !important; }
+.padding-r-small { padding-right: var(--spacing-small) !important; }
+.padding-b-small { padding-bottom: var(--spacing-small) !important; }
+.padding-l-small { padding-left: var(--spacing-small) !important; }
 
-.m-medium { margin: var(--spacing-medium) !important; }
-.m-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
-.m-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
-.m-t-medium { margin-top: var(--spacing-medium) !important; }
-.m-r-medium { margin-right: var(--spacing-medium) !important; }
-.m-b-medium { margin-bottom: var(--spacing-medium) !important; }
-.m-l-medium { margin-left: var(--spacing-medium) !important; }
+.padding-medium { padding: var(--spacing-medium) !important; }
+.padding-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
+.padding-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
+.padding-t-medium { padding-top: var(--spacing-medium) !important; }
+.padding-r-medium { padding-right: var(--spacing-medium) !important; }
+.padding-b-medium { padding-bottom: var(--spacing-medium) !important; }
+.padding-l-medium { padding-left: var(--spacing-medium) !important; }
 
-.m-big { margin: var(--spacing-big) !important; }
-.m-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
-.m-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
-.m-t-big { margin-top: var(--spacing-big) !important; }
-.m-r-big { margin-right: var(--spacing-big) !important; }
-.m-b-big { margin-bottom: var(--spacing-big) !important; }
-.m-l-big { margin-left: var(--spacing-big) !important; }
+.padding-big { padding: var(--spacing-big) !important; }
+.padding-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
+.padding-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
+.padding-t-big { padding-top: var(--spacing-big) !important; }
+.padding-r-big { padding-right: var(--spacing-big) !important; }
+.padding-b-big { padding-bottom: var(--spacing-big) !important; }
+.padding-l-big { padding-left: var(--spacing-big) !important; }
 
-.p-none { padding: 0 !important; }
-.p-x-none { padding-left: 0 !important; padding-right: 0 !important; }
-.p-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
-.p-t-none { padding-top: 0 !important; }
-.p-r-none { padding-right: 0 !important; }
-.p-b-none { padding-bottom: 0 !important; }
-.p-l-none { padding-left: 0 !important; }
+.margin-none { margin: 0 !important; }
+.margin-x-none { margin-left: 0 !important; margin-right: 0 !important; }
+.margin-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
+.margin-t-none { margin-top: 0 !important; }
+.margin-r-none { margin-right: 0 !important; }
+.margin-b-none { margin-bottom: 0 !important; }
+.margin-l-none { margin-left: 0 !important; }
 
-.p-small { padding: var(--spacing-small) !important; }
-.p-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
-.p-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
-.p-t-small { padding-top: var(--spacing-small) !important; }
-.p-r-small { padding-right: var(--spacing-small) !important; }
-.p-b-small { padding-bottom: var(--spacing-small) !important; }
-.p-l-small { padding-left: var(--spacing-small) !important; }
+.margin-small { margin: var(--spacing-small) !important; }
+.margin-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
+.margin-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
+.margin-t-small { margin-top: var(--spacing-small) !important; }
+.margin-r-small { margin-right: var(--spacing-small) !important; }
+.margin-b-small { margin-bottom: var(--spacing-small) !important; }
+.margin-l-small { margin-left: var(--spacing-small) !important; }
 
-.p-medium { padding: var(--spacing-medium) !important; }
-.p-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
-.p-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
-.p-t-medium { padding-top: var(--spacing-medium) !important; }
-.p-r-medium { padding-right: var(--spacing-medium) !important; }
-.p-b-medium { padding-bottom: var(--spacing-medium) !important; }
-.p-l-medium { padding-left: var(--spacing-medium) !important; }
+.margin-medium { margin: var(--spacing-medium) !important; }
+.margin-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
+.margin-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
+.margin-t-medium { margin-top: var(--spacing-medium) !important; }
+.margin-r-medium { margin-right: var(--spacing-medium) !important; }
+.margin-b-medium { margin-bottom: var(--spacing-medium) !important; }
+.margin-l-medium { margin-left: var(--spacing-medium) !important; }
 
-.p-big { padding: var(--spacing-big) !important; }
-.p-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
-.p-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
-.p-t-big { padding-top: var(--spacing-big) !important; }
-.p-r-big { padding-right: var(--spacing-big) !important; }
-.p-b-big { padding-bottom: var(--spacing-big) !important; }
-.p-l-big { padding-left: var(--spacing-big) !important; }
+.margin-big { margin: var(--spacing-big) !important; }
+.margin-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
+.margin-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
+.margin-t-big { margin-top: var(--spacing-big) !important; }
+.margin-r-big { margin-right: var(--spacing-big) !important; }
+.margin-b-big { margin-bottom: var(--spacing-big) !important; }
+.margin-l-big { margin-left: var(--spacing-big) !important; }
 
-.m-x-auto { margin-left: auto !important; margin-right: auto !important; }
+.margin-x-auto { margin-left: auto !important; margin-right: auto !important; }
+.margin-y-auto { margin-top: auto !important; margin-bottom: auto !important; }
+.margin-xy-auto { margin: auto !important; }
 
 /***************************************************************************************************
 * Text utilities