use var & function for Safari

1000ch · Mar 15, 2016 · d071c79 · d071c79
1 parent b24ea8f
commit d071c79
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 90 deletions.
diff --git a/dist/grd.css b/dist/grd.css
diff --git a/index.html b/index.html
@@ -52,79 +52,79 @@ <h2>Installation</h2>
 $ bower install grd</code></pre>
       <h2>Usage</h2>
       <pre><code class="html">&lt;div class=&quot;Grid&quot;&gt;
-  &lt;div class=&quot;Cell --3of12&quot;&gt;3of12&lt;/div&gt;
-  &lt;div class=&quot;Cell --9of12&quot;&gt;9of12&lt;/div&gt;
+  &lt;div class=&quot;Cell -3of12&quot;&gt;3of12&lt;/div&gt;
+  &lt;div class=&quot;Cell -9of12&quot;&gt;9of12&lt;/div&gt;
 &lt;/div&gt;</code></pre>
       <h2>Live Demo</h2>
       <div>
         <button id="add" class="btn" type="button">Add item</button>
         <button id="remove" class="btn" type="button">Remove item</button>
         <select id="align-items">
           <option value="" selected>-</option>
-          <option value="--top">--top</option>
-          <option value="--middle">--middle</option>
-          <option value="--bottom">--bottom</option>
-          <option value="--stretch">--stretch</option>
-          <option value="--baseline">--baseline</option>
+          <option value="-top">-top</option>
+          <option value="-middle">-middle</option>
+          <option value="-bottom">-bottom</option>
+          <option value="-stretch">-stretch</option>
+          <option value="-baseline">-baseline</option>
         </select>
         <select id="justify-content">
           <option value="" selected>-</option>
-          <option value="--left">--left</option>
-          <option value="--center">--center</option>
-          <option value="--right">--right</option>
-          <option value="--between">--between</option>
-          <option value="--around">--around</option>
+          <option value="-left">-left</option>
+          <option value="-center">-center</option>
+          <option value="-right">-right</option>
+          <option value="-between">-between</option>
+          <option value="-around">-around</option>
         </select>
       </div>
       <div class="Grid" id="grid"></div>
       <template id="template-cell">
         <div class="Cell">
           <select class="select-sm">
             <option value="" selected>-</option>
-            <option value="--fill">--fill</option>
-            <option value="--1of12">--1of12</option>
-            <option value="--2of12">--2of12</option>
-            <option value="--3of12">--3of12</option>
-            <option value="--4of12">--4of12</option>
-            <option value="--5of12">--5of12</option>
-            <option value="--6of12">--6of12</option>
-            <option value="--7of12">--7of12</option>
-            <option value="--8of12">--8of12</option>
-            <option value="--9of12">--9of12</option>
-            <option value="--10of12">--10of12</option>
-            <option value="--11of12">--11of12</option>
-            <option value="--12of12">--12of12</option>
+            <option value="-fill">-fill</option>
+            <option value="-1of12">-1of12</option>
+            <option value="-2of12">-2of12</option>
+            <option value="-3of12">-3of12</option>
+            <option value="-4of12">-4of12</option>
+            <option value="-5of12">-5of12</option>
+            <option value="-6of12">-6of12</option>
+            <option value="-7of12">-7of12</option>
+            <option value="-8of12">-8of12</option>
+            <option value="-9of12">-9of12</option>
+            <option value="-10of12">-10of12</option>
+            <option value="-11of12">-11of12</option>
+            <option value="-12of12">-12of12</option>
           </select>
         </div>
       </template>
     </div>
-    <a href="https://github.com/1000ch/grd" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <a href="https://github.com/1000ch/grd" class="github-corner"><svg width="80" height="80" viewbox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
     <script>
-      document.addEventListener('DOMContentLoaded', () => {
-        let grid = document.querySelector('#grid');
-        let align = document.querySelector('#align-items');
-        let justify = document.querySelector('#justify-content');
+      document.addEventListener('DOMContentLoaded', function() {
+        var grid = document.querySelector('#grid');
+        var align = document.querySelector('#align-items');
+        var justify = document.querySelector('#justify-content');
 
         function onGridChange() {
           grid.className = `Grid ${align.value} ${justify.value}`;
         }
         align.addEventListener('change', onGridChange);
         justify.addEventListener('change', onGridChange);
 
-        let template = document.querySelector('#template-cell');
-        let add = document.querySelector('#add');
-        let remove = document.querySelector('#remove');
+        var template = document.querySelector('#template-cell');
+        var add = document.querySelector('#add');
+        var remove = document.querySelector('#remove');
 
-        add.addEventListener('click', () => {
-          let cell = document.importNode(template.content, true);
-          let select = cell.querySelector('select');
+        add.addEventListener('click', function() {
+          var cell = document.importNode(template.content, true);
+          var select = cell.querySelector('select');
           grid.appendChild(cell);
-          select.addEventListener('change', () => {
+          select.addEventListener('change', function() {
             select.parentNode.className = `Cell ${select.value}`;
           });
         });
 
-        remove.addEventListener('click', () => {
+        remove.addEventListener('click', function() {
           if (grid.children.length) {
             grid.children[grid.children.length - 1].remove();
           }

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.1.1",
   "description": "A CSS grid framework using Flexbox.",
   "scripts": {
-    "prepublish": "mkdir -p dist && postcss --use postcss-apply --use autoprefixer --use cssnano --output dist/grd.css src/grd.css"
+    "build": "mkdir -p dist && postcss --use postcss-apply --use autoprefixer --use cssnano --output dist/grd.css src/grd.css"
   },
   "keywords": [
     "css",

diff --git a/readme.markdown b/readme.markdown
@@ -20,41 +20,41 @@ $ bower install grd
 
 ```html
 <div class="Grid">
-  <div class="Cell --3of12">3of12</div>
-  <div class="Cell --9of12">9of12</div>
+  <div class="Cell -3of12">3of12</div>
+  <div class="Cell -9of12">9of12</div>
 </div>
 ```
 
 ### `Grid` modifiers
 
 - To align items with `align-items`
-  - `--top`: To top
-  - `--middle`: To middle
-  - `--bottom`: To bottom
-  - `--stretch`: Stretch items
-  - `--baseline`: To baseline
+  - `-top`: To top
+  - `-middle`: To middle
+  - `-bottom`: To bottom
+  - `-stretch`: Stretch items
+  - `-baseline`: To baseline
 - To layout contents with `justify-content`
-  - `--left`: To left
-  - `--center`: To center
-  - `--right`: To right
-  - `--between`: Add spaces between items
-  - `--around`: Add spaces around items
+  - `-left`: To left
+  - `-center`: To center
+  - `-right`: To right
+  - `-between`: Add spaces between items
+  - `-around`: Add spaces around items
 
 ### `Cell` modifiers
 
-- `--fill`: Set item width to left width of parent
-- `--1of12`: Set item width to 8.3% of parent
-- `--2of12`: Set item width to 16.7% of parent
-- `--3of12`: Set item width to 25% of parent
-- `--4of12`: Set item width to 33% of parent
-- `--5of12`: Set item width to 41.7% of parent
-- `--6of12`: Set item width to 50% of parent
-- `--7of12`: Set item width to 58.3% of parent
-- `--8of12`: Set item width to 66.7% of parent
-- `--9of12`: Set item width to 75% of parent
-- `--10of12`: Set item width to 83.3% of parent
-- `--11of12`: Set item width to 91.7% of parent
-- `--12of12`: Set item width to 100% of parent
+- `-fill`: Set item width to left width of parent
+- `-1of12`: Set item width to 8.3% of parent
+- `-2of12`: Set item width to 16.7% of parent
+- `-3of12`: Set item width to 25% of parent
+- `-4of12`: Set item width to 33% of parent
+- `-5of12`: Set item width to 41.7% of parent
+- `-6of12`: Set item width to 50% of parent
+- `-7of12`: Set item width to 58.3% of parent
+- `-8of12`: Set item width to 66.7% of parent
+- `-9of12`: Set item width to 75% of parent
+- `-10of12`: Set item width to 83.3% of parent
+- `-11of12`: Set item width to 91.7% of parent
+- `-12of12`: Set item width to 100% of parent
 
 ## License
 

diff --git a/src/grd.css b/src/grd.css
@@ -1,7 +1,6 @@
 :root {
   --grid {
     display: flex;
-    justify-content: flex-start;
     flex-wrap: wrap;
   }
   --cell {
@@ -11,28 +10,28 @@
 }
 
 .Grid            { @apply --grid; }
-.Grid.--top      { align-items: flex-start; }
-.Grid.--middle   { align-items: center; }
-.Grid.--bottom   { align-items: flex-end; }
-.Grid.--stretch  { align-items: stretch; }
-.Grid.--baseline { align-items: baseline; }
-.Grid.--left     { justify-content: flex-start; }
-.Grid.--center   { justify-content: center; }
-.Grid.--right    { justify-content: flex-end; }
-.Grid.--between  { justify-content: space-between; }
-.Grid.--around   { justify-content: space-around; }
+.Grid.\-top      { align-items: flex-start; }
+.Grid.\-middle   { align-items: center; }
+.Grid.\-bottom   { align-items: flex-end; }
+.Grid.\-stretch  { align-items: stretch; }
+.Grid.\-baseline { align-items: baseline; }
+.Grid.\-left     { justify-content: flex-start; }
+.Grid.\-center   { justify-content: center; }
+.Grid.\-right    { justify-content: flex-end; }
+.Grid.\-between  { justify-content: space-between; }
+.Grid.\-around   { justify-content: space-around; }
 
-.Cell          { @apply --cell; }
-.Cell.--fill   { width: 0; min-width: 0; flex-grow: 1; }
-.Cell.--1of12  { width: calc(100% * 1 / 12); }
-.Cell.--2of12  { width: calc(100% * 2 / 12); }
-.Cell.--3of12  { width: calc(100% * 3 / 12); }
-.Cell.--4of12  { width: calc(100% * 4 / 12); }
-.Cell.--5of12  { width: calc(100% * 5 / 12); }
-.Cell.--6of12  { width: calc(100% * 6 / 12); }
-.Cell.--7of12  { width: calc(100% * 7 / 12); }
-.Cell.--8of12  { width: calc(100% * 8 / 12); }
-.Cell.--9of12  { width: calc(100% * 9 / 12); }
-.Cell.--10of12 { width: calc(100% * 10 / 12); }
-.Cell.--11of12 { width: calc(100% * 11 / 12); }
-.Cell.--12of12 { width: 100%; }
+.Cell            { @apply --cell; }
+.Cell.\-fill     { width: 0; min-width: 0; flex-grow: 1; }
+.Cell.\-1of12    { width: calc(100% * 1 / 12); }
+.Cell.\-2of12    { width: calc(100% * 2 / 12); }
+.Cell.\-3of12    { width: calc(100% * 3 / 12); }
+.Cell.\-4of12    { width: calc(100% * 4 / 12); }
+.Cell.\-5of12    { width: calc(100% * 5 / 12); }
+.Cell.\-6of12    { width: calc(100% * 6 / 12); }
+.Cell.\-7of12    { width: calc(100% * 7 / 12); }
+.Cell.\-8of12    { width: calc(100% * 8 / 12); }
+.Cell.\-9of12    { width: calc(100% * 9 / 12); }
+.Cell.\-10of12   { width: calc(100% * 10 / 12); }
+.Cell.\-11of12   { width: calc(100% * 11 / 12); }
+.Cell.\-12of12   { width: 100%; }