V2.6.0: Refactor gridlex-var with new array for breakpoints

devlint · Nov 16, 2017 · c89d262 · c89d262
1 parent 2854f85
commit c89d262
Show file tree

Hide file tree

Showing 19 changed files with 254 additions and 251 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 ## Just a Flexbox Grid System
 
 [![Join the chat at https://gitter.im/devlint/gridlex](https://badges.gitter.im/devlint/gridlex.svg)](https://gitter.im/devlint/gridlex?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-v. 2.5.0
+v. 2.6.0
 
 
 Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.
@@ -24,7 +24,7 @@ To use Gridlex out of the box, call the gridlex.min.css file in your project :
 
 Via cdnjs:
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.5.0/gridlex.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.6.0/gridlex.min.css">
 ```
 
 **I want to include it in my source files!**

diff --git a/dist/gridlex.css b/dist/gridlex.css
diff --git a/dist/gridlex.css.map b/dist/gridlex.css.map
diff --git a/dist/gridlex.min.css b/dist/gridlex.min.css
diff --git a/docs/cards.html b/docs/cards.html
@@ -111,7 +111,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(2.5.0)</p>
+        <p>Just a Flexbox Grid System <br>(2.6.0)</p>
     </a></div>
 </header>
 <div class="demoPage grid">

diff --git a/docs/contribs.html b/docs/contribs.html
@@ -29,7 +29,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(v2.5.0)</p>
+        <p>Just a Flexbox Grid System <br>(v2.6.0)</p>
     </a></div>
 </header>
 <div class="demoPage">

diff --git a/docs/expo.html b/docs/expo.html
@@ -90,7 +90,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(2.5.0)</p>
+        <p>Just a Flexbox Grid System <br>(2.6.0)</p>
     </a></div>
 </header>
 

diff --git a/docs/gridlex.css b/docs/gridlex.css
diff --git a/docs/gridlex.css.map b/docs/gridlex.css.map
diff --git a/docs/gridlex.min.css b/docs/gridlex.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -29,7 +29,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(v2.5.0)</p>
+        <p>Just a Flexbox Grid System <br>(v2.6.0)</p>
     </a></div>
 </header>
 <div class="demoPage">
@@ -73,7 +73,7 @@ <h3>How to use Gridlex (in CSS)?</h3>
                 <p><strong>Gridlex</strong> is ready to use "out of the box" in CSS, with all the vendor prefixes
                     needed:</p>
                 <pre class="doc"><code>&lt;link rel="stylesheet" href="<a
-                        href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.5.0/gridlex.min.css">https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.5.0/gridlex.min.css</a>"></code></pre>
+                        href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.6.0/gridlex.min.css">https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.6.0/gridlex.min.css</a>"></code></pre>
                 <p>See <a href="#documentation">CSS documentation</a></p>
             </div>
             <div class="col-12">
@@ -1797,22 +1797,22 @@ <h3>Columns can be hidden at breakpoints using <code> *-hidden</code> (e.g. <cod
                 </thead>
                 <tbody>
                 <tr>
-                    <td><code>@media screen and (max-width: 36rem)</code></td>
+                    <td><code>@media (max-width: 36em)</code></td>
                     <td>Max 576px</td>
                     <td><code><b>_xs</b>-*</code></td>
                 </tr>
                 <tr>
-                    <td><code>@media screen and (max-width: 48em)</code></td>
+                    <td><code>@media (max-width: 48em)</code></td>
                     <td>Max 768px</td>
                     <td><code><b>_sm</b>-*</code></td>
                 </tr>
                 <tr>
-                    <td><code>@media screen and (max-width: 64em)</code></td>
+                    <td><code>@media (max-width: 64em)</code></td>
                     <td>Max 1024px</td>
                     <td><code><b>_md</b>-*</code></td>
                 </tr>
                 <tr>
-                    <td><code>@media screen and (max-width: 80em)</code></td>
+                    <td><code>@media (max-width: 80em)</code></td>
                     <td>Max 1280px</td>
                     <td><code><b>_lg</b>-*</code></td>
                 </tr>
@@ -1857,23 +1857,16 @@ <h2>Variables</h2>
                 <tr>
                     <td><code>$gl-mq-list:</code></td>
                     <td><pre><code>(
-lg: "screen and (max-width: 80em)", // max 1280px
-md: "screen and (max-width: 64em)", // max 1024px
-sm: "screen and (max-width: 48em)", // max 768px
-xs: "screen and (max-width: 36rem)" // up to 576px
+  lg: 80em,
+  md: 64em,
+  sm: 48em,
+  xs: 36em
 )</code></pre>
                     </td>
                 </tr>
                 </tbody>
             </table>
         </div>
-        <!--        <pre><code>
-        @import "~gridlex";
-        // I only want one mediaqueries, with `large` key:
-        $gl-mq-list: (
-          large: "screen and (max-width: 80em)"
-        ) !default;
-                </code></pre>-->
     </section>
 
     <section id="caniuse">

diff --git a/docs/indexAttribute.html b/docs/indexAttribute.html
@@ -29,7 +29,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(v2.5.0)</p>
+        <p>Just a Flexbox Grid System <br>(v2.6.0)</p>
     </a></div>
 </header>
 <div class="demoPage">
@@ -63,7 +63,7 @@ <h3>What can we expect?</h3>
             <div gridlex="col-12">
                 <h3>How to use Gridlex (in CSS)?</h3>
                 <p><strong>Gridlex</strong> is ready to use "out of the box" in CSS, with all the vendor prefixes needed:</p>
-                <pre class="doc"><code>&lt;link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.5.0/gridlex.min.css">https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.5.0/gridlex.min.css</a>"></code></pre>
+                <pre class="doc"><code>&lt;link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.6.0/gridlex.min.css">https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.6.0/gridlex.min.css</a>"></code></pre>
                 <p>See <a href="#documentation">CSS documentation</a></p>
             </div>
             <div gridlex="col-12">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "url": "https://github.com/devlint/gridlex",
   "homepage": "http://gridlex.devlint.fr",
   "author": "https://github.com/devlint",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "repository": {
     "type": "git",
     "url": "[email protected]:devlint/gridlex.git"

diff --git a/src/gridlex-breakpoints.scss b/src/gridlex-breakpoints.scss