flexboxes - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

main.css

@@ -124,2 +124,8 @@ .flex { display: -webkit-box; display: -ms-flexbox; display: flex }
   .portrait-flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse }
+
+  .flex\@portrait { display: -webkit-box; display: -ms-flexbox; display: flex }
+  .inline-flex\@portrait { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex }
+  .flex-wrap\@portrait { -ms-flex-wrap: wrap; flex-wrap: wrap }
+  .flex-nowrap\@portrait { -ms-flex-wrap: nowrap; flex-wrap: nowrap }
+  .flex-wrap-reverse\@portrait { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse }
 }
@@ -133,2 +139,8 @@
   .landscape-flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse }
+
+  .flex\@landscape { display: -webkit-box; display: -ms-flexbox; display: flex }
+  .inline-flex\@landscape { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex }
+  .flex-wrap\@landscape { -ms-flex-wrap: wrap; flex-wrap: wrap }
+  .flex-nowrap\@landscape { -ms-flex-wrap: nowrap; flex-wrap: nowrap }
+  .flex-wrap-reverse\@landscape { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse }
 }

module.css

@@ -124,2 +124,8 @@ .flex { display: flex }
   .portrait-flex-wrap-reverse { flex-wrap: wrap-reverse }
+
+  .flex\@portrait { display: flex }
+  .inline-flex\@portrait { display: inline-flex }
+  .flex-wrap\@portrait { flex-wrap: wrap }
+  .flex-nowrap\@portrait { flex-wrap: nowrap }
+  .flex-wrap-reverse\@portrait { flex-wrap: wrap-reverse }
 }
@@ -133,2 +139,8 @@
   .landscape-flex-wrap-reverse { flex-wrap: wrap-reverse }
+
+  .flex\@landscape { display: flex }
+  .inline-flex\@landscape { display: inline-flex }
+  .flex-wrap\@landscape { flex-wrap: wrap }
+  .flex-nowrap\@landscape { flex-wrap: nowrap }
+  .flex-wrap-reverse\@landscape { flex-wrap: wrap-reverse }
 }

package.json

 {
   "name": "flexboxes",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "CSS flexbox utility classes and grid system",
@@ -5,0 +5,0 @@ "author": "Ryan Van Etten",

README.md

@@ -149,18 +149,20 @@ # flexboxes
 
-#### portrait
+These are breakpoint classes for responsive design.
 
-- `.portrait-flex`
-- `.portrait-inline-flex`
-- `.portrait-flex-wrap`
-- `.portrait-flex-nowrap`
-- `.portrait-flex-wrap-reverse`
+#### `portrait` orientation only
 
-#### landscape
+- `flex@portrait`
+- `inline-flex@portrait`
+- `flex-wrap@portrait`
+- `flex-nowrap@portrait`
+- `flex-wrap-reverse@portrait`
 
-- `.landscape-flex`
-- `.landscape-inline-flex`
-- `.landscape-flex-wrap`
-- `.landscape-flex-nowrap`
-- `.landscape-flex-wrap-reverse`
+#### `landscape` orientation only
 
+- `flex@landscape`
+- `inline-flex@landscape`
+- `flex-wrap@landscape`
+- `flex-nowrap@landscape`
+- `flex-wrap-reverse@landscape`
+
 ## examples
@@ -190,2 +192,13 @@
 
+### [responsive wrapping](https://codepen.io/ryanve/pen/YVbLjQ)
+
+```html
+<div class="flex flex-wrap@portrait">
+  <div class="flex-auto basis-6">1</div>
+  <div class="flex-auto basis-6">2</div>
+  <div class="flex-auto basis-6">3</div>
+  <div class="flex-auto basis-6">4</div>
+</div>
+```
+
 ## development
@@ -192,0 +205,0 @@

No alert changes

Improved metrics

Total package byte prevSize

19812

9.27%

Lines of code

248

8.77%

Number of lines in readme file

216

6.4%

No dependency changes