hyper-grid-css - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/grid.css

@@ -23,2 +23,3 @@ /** (C) License MIT | https://github.com/heyallan/hyper-grid-css */
   margin-right: -1rem;
+  justify-content: center;
 }
@@ -50,47 +51,59 @@ .col,
 }
+.grow-0 {
+  flex-grow: 0;
+}
 .grow-1 {
   flex-grow: 1;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .shrink-1 {
   flex-shrink: 1;
 }
-.grow-0 {
-  flex-grow: 0;
-}
-.shrink-0 {
-  flex-shrink: 0;
-}
+.col-1,
 .col-xs-1 {
   flex-basis: 8.333%;
 }
+.col-2,
 .col-xs-2 {
   flex-basis: 16.667%;
 }
+.col-3,
 .col-xs-3 {
   flex-basis: 25%;
 }
+.col-4,
 .col-xs-4 {
   flex-basis: 33.333%;
 }
+.col-5,
 .col-xs-5 {
   flex-basis: 41.667%;
 }
+.col-6,
 .col-xs-6 {
   flex-basis: 50%;
 }
+.col-7,
 .col-xs-7 {
   flex-basis: 58.333%;
 }
+.col-8,
 .col-xs-8 {
   flex-basis: 66.667%;
 }
+.col-9,
 .col-xs-9 {
   flex-basis: 75%;
 }
+.col-10,
 .col-xs-10 {
   flex-basis: 83.333%;
 }
+.col-11,
 .col-xs-11 {
   flex-basis: 91.667%;
 }
+.col-12,
 .col-xs-12 {
@@ -351,14 +364,19 @@ flex-basis: 100%;
 }
+.justify-left,
 .justify-xs-left {
   justify-content: flex-start;
 }
+.justify-center,
 .justify-xs-center {
   justify-content: center;
 }
+.justify-right,
 .justify-xs-right {
   justify-content: flex-end;
 }
+.justify-around,
 .justify-xs-around {
   justify-content: space-around;
 }
+.justify-between,
 .justify-xs-between {
@@ -418,8 +436,11 @@ justify-content: space-between;
 }
+.align-top,
 .align-xs-top {
   align-items: flex-start;
 }
+.align-center,
 .align-xs-center {
   align-items: center;
 }
+.align-bottom,
 .align-xs-bottom {
@@ -426,0 +447,0 @@ align-items: flex-end;

dist/grid.min.css

 /** (C) License MIT | https://github.com/heyallan/hyper-grid-css */
 
-.column,.container,.container-fluid{padding-left:1rem;padding-right:1rem}.container,.container-fluid{margin-right:auto;margin-left:auto;width:100%}.container{max-width:1200px}.row{display:flex;flex-grow:1;flex-shrink:1;flex-basis:auto;flex-direction:row;flex-wrap:wrap;margin-left:-1rem;margin-right:-1rem}.col,[class*=col-]{padding-left:1rem;padding-right:1rem;flex-grow:0;flex-shrink:1;flex-basis:auto;min-width:0}.column{flex-grow:1;flex-shrink:0;flex-basis:300px}.col,.col-auto,.col-lg-auto,.col-md-auto,.col-sm-auto,.col-xs-auto{flex-grow:1;flex-basis:0}.grow-1{flex-grow:1}.shrink-1{flex-shrink:1}.grow-0{flex-grow:0}.shrink-0{flex-shrink:0}.col-xs-1{flex-basis:8.333%}.col-xs-2{flex-basis:16.667%}.col-xs-3{flex-basis:25%}.col-xs-4{flex-basis:33.333%}.col-xs-5{flex-basis:41.667%}.col-xs-6{flex-basis:50%}.col-xs-7{flex-basis:58.333%}.col-xs-8{flex-basis:66.667%}.col-xs-9{flex-basis:75%}.col-xs-10{flex-basis:83.333%}.col-xs-11{flex-basis:91.667%}.col-xs-12{flex-basis:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}@media only screen and (min-width:544px){.col-sm-1{flex-basis:8.333%}.col-sm-2{flex-basis:16.667%}.col-sm-3{flex-basis:25%}.col-sm-4{flex-basis:33.333%}.col-sm-5{flex-basis:41.667%}.col-sm-6{flex-basis:50%}.col-sm-7{flex-basis:58.333%}.col-sm-8{flex-basis:66.667%}.col-sm-9{flex-basis:75%}.col-sm-10{flex-basis:83.333%}.col-sm-11{flex-basis:91.667%}.col-sm-12{flex-basis:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}}@media only screen and (min-width:768px){.col-md-1{flex-basis:8.333%}.col-md-2{flex-basis:16.667%}.col-md-3{flex-basis:25%}.col-md-4{flex-basis:33.333%}.col-md-5{flex-basis:41.667%}.col-md-6{flex-basis:50%}.col-md-7{flex-basis:58.333%}.col-md-8{flex-basis:66.667%}.col-md-9{flex-basis:75%}.col-md-10{flex-basis:83.333%}.col-md-11{flex-basis:91.667%}.col-md-12{flex-basis:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}}@media only screen and (min-width:1024px){.col-lg-1{flex-basis:8.333%}.col-lg-2{flex-basis:16.667%}.col-lg-3{flex-basis:25%}.col-lg-4{flex-basis:33.333%}.col-lg-5{flex-basis:41.667%}.col-lg-6{flex-basis:50%}.col-lg-7{flex-basis:58.333%}.col-lg-8{flex-basis:66.667%}.col-lg-9{flex-basis:75%}.col-lg-10{flex-basis:83.333%}.col-lg-11{flex-basis:91.667%}.col-lg-12{flex-basis:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}}.justify-xs-left{justify-content:flex-start}.justify-xs-center{justify-content:center}.justify-xs-right{justify-content:flex-end}.justify-xs-around{justify-content:space-around}.justify-xs-between{justify-content:space-between}@media only screen and (min-width:544px){.justify-sm-left{justify-content:flex-start}.justify-sm-center{justify-content:center}.justify-sm-right{justify-content:flex-end}.justify-sm-around{justify-content:space-around}.justify-sm-between{justify-content:space-between}}@media only screen and (min-width:768px){.justify-md-left{justify-content:flex-start}.justify-md-center{justify-content:center}.justify-md-right{justify-content:flex-end}.justify-md-around{justify-content:space-around}.justify-md-between{justify-content:space-between}}@media only screen and (min-width:1024px){.justify-lg-left{justify-content:flex-start}.justify-lg-center{justify-content:center}.justify-lg-right{justify-content:flex-end}.justify-lg-around{justify-content:space-around}.justify-lg-between{justify-content:space-between}}.align-xs-top{align-items:flex-start}.align-xs-center{align-items:center}.align-xs-bottom{align-items:flex-end}@media only screen and (min-width:544px){.align-sm-top{align-items:flex-start}.align-sm-center{align-items:center}.align-sm-bottom{align-items:flex-end}}@media only screen and (min-width:768px){.align-md-top{align-items:flex-start}.align-md-center{align-items:center}.align-md-bottom{align-items:flex-end}}@media only screen and (min-width:1024px){.align-lg-top{align-items:flex-start}.align-lg-center{align-items:center}.align-lg-bottom{align-items:flex-end}}.row-reverse{flex-direction:row-reverse}.column-reverse{flex-direction:column-reverse}.order-xs-first{order:-1}.order-xs-last{order:1}@media only screen and (min-width:544px){.order-sm-first{order:-1}.order-sm-last{order:1}}@media only screen and (min-width:768px){.order-md-first{order:-1}.order-md-last{order:1}}@media only screen and (min-width:1024px){.order-lg-first{order:-1}.order-lg-last{order:1}}
+.column,.container,.container-fluid{padding-left:1rem;padding-right:1rem}.container,.container-fluid{margin-right:auto;margin-left:auto;width:100%}.container{max-width:1200px}.row{display:flex;flex-grow:1;flex-shrink:1;flex-basis:auto;flex-direction:row;flex-wrap:wrap;margin-left:-1rem;margin-right:-1rem;justify-content:center}.col,[class*=col-]{padding-left:1rem;padding-right:1rem;flex-grow:0;flex-shrink:1;flex-basis:auto;min-width:0}.column{flex-grow:1;flex-shrink:0;flex-basis:300px}.col,.col-auto,.col-lg-auto,.col-md-auto,.col-sm-auto,.col-xs-auto{flex-grow:1;flex-basis:0}.grow-0{flex-grow:0}.grow-1{flex-grow:1}.shrink-0{flex-shrink:0}.shrink-1{flex-shrink:1}.col-1,.col-xs-1{flex-basis:8.333%}.col-2,.col-xs-2{flex-basis:16.667%}.col-3,.col-xs-3{flex-basis:25%}.col-4,.col-xs-4{flex-basis:33.333%}.col-5,.col-xs-5{flex-basis:41.667%}.col-6,.col-xs-6{flex-basis:50%}.col-7,.col-xs-7{flex-basis:58.333%}.col-8,.col-xs-8{flex-basis:66.667%}.col-9,.col-xs-9{flex-basis:75%}.col-10,.col-xs-10{flex-basis:83.333%}.col-11,.col-xs-11{flex-basis:91.667%}.col-12,.col-xs-12{flex-basis:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}@media only screen and (min-width:544px){.col-sm-1{flex-basis:8.333%}.col-sm-2{flex-basis:16.667%}.col-sm-3{flex-basis:25%}.col-sm-4{flex-basis:33.333%}.col-sm-5{flex-basis:41.667%}.col-sm-6{flex-basis:50%}.col-sm-7{flex-basis:58.333%}.col-sm-8{flex-basis:66.667%}.col-sm-9{flex-basis:75%}.col-sm-10{flex-basis:83.333%}.col-sm-11{flex-basis:91.667%}.col-sm-12{flex-basis:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}}@media only screen and (min-width:768px){.col-md-1{flex-basis:8.333%}.col-md-2{flex-basis:16.667%}.col-md-3{flex-basis:25%}.col-md-4{flex-basis:33.333%}.col-md-5{flex-basis:41.667%}.col-md-6{flex-basis:50%}.col-md-7{flex-basis:58.333%}.col-md-8{flex-basis:66.667%}.col-md-9{flex-basis:75%}.col-md-10{flex-basis:83.333%}.col-md-11{flex-basis:91.667%}.col-md-12{flex-basis:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}}@media only screen and (min-width:1024px){.col-lg-1{flex-basis:8.333%}.col-lg-2{flex-basis:16.667%}.col-lg-3{flex-basis:25%}.col-lg-4{flex-basis:33.333%}.col-lg-5{flex-basis:41.667%}.col-lg-6{flex-basis:50%}.col-lg-7{flex-basis:58.333%}.col-lg-8{flex-basis:66.667%}.col-lg-9{flex-basis:75%}.col-lg-10{flex-basis:83.333%}.col-lg-11{flex-basis:91.667%}.col-lg-12{flex-basis:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}}.justify-left,.justify-xs-left{justify-content:flex-start}.justify-center,.justify-xs-center{justify-content:center}.justify-right,.justify-xs-right{justify-content:flex-end}.justify-around,.justify-xs-around{justify-content:space-around}.justify-between,.justify-xs-between{justify-content:space-between}@media only screen and (min-width:544px){.justify-sm-left{justify-content:flex-start}.justify-sm-center{justify-content:center}.justify-sm-right{justify-content:flex-end}.justify-sm-around{justify-content:space-around}.justify-sm-between{justify-content:space-between}}@media only screen and (min-width:768px){.justify-md-left{justify-content:flex-start}.justify-md-center{justify-content:center}.justify-md-right{justify-content:flex-end}.justify-md-around{justify-content:space-around}.justify-md-between{justify-content:space-between}}@media only screen and (min-width:1024px){.justify-lg-left{justify-content:flex-start}.justify-lg-center{justify-content:center}.justify-lg-right{justify-content:flex-end}.justify-lg-around{justify-content:space-around}.justify-lg-between{justify-content:space-between}}.align-top,.align-xs-top{align-items:flex-start}.align-center,.align-xs-center{align-items:center}.align-bottom,.align-xs-bottom{align-items:flex-end}@media only screen and (min-width:544px){.align-sm-top{align-items:flex-start}.align-sm-center{align-items:center}.align-sm-bottom{align-items:flex-end}}@media only screen and (min-width:768px){.align-md-top{align-items:flex-start}.align-md-center{align-items:center}.align-md-bottom{align-items:flex-end}}@media only screen and (min-width:1024px){.align-lg-top{align-items:flex-start}.align-lg-center{align-items:center}.align-lg-bottom{align-items:flex-end}}.row-reverse{flex-direction:row-reverse}.column-reverse{flex-direction:column-reverse}.order-xs-first{order:-1}.order-xs-last{order:1}@media only screen and (min-width:544px){.order-sm-first{order:-1}.order-sm-last{order:1}}@media only screen and (min-width:768px){.order-md-first{order:-1}.order-md-last{order:1}}@media only screen and (min-width:1024px){.order-lg-first{order:-1}.order-lg-last{order:1}}

package.json

 {
   "name": "hyper-grid-css",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Grid layout with flexbox",
@@ -5,0 +5,0 @@ "repository": {

src/less/align.less

@@ -0,7 +1,10 @@
+.align-top,
 .align-xs-top {
   align-items: flex-start;
 }
+.align-center,
 .align-xs-center {
   align-items: center;
 }
+.align-bottom,
 .align-xs-bottom {
@@ -8,0 +11,0 @@ align-items: flex-end;

src/less/columns.less

@@ -30,48 +30,60 @@ .col,
 
+.grow-0 {
+  flex-grow: 0;
+}
 .grow-1 {
   flex-grow: 1;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .shrink-1 {
   flex-shrink: 1;
 }
-.grow-0 {
-  flex-grow: 0;
-}
-.shrink-0 {
-  flex-shrink: 0;
-}
 
+.col-1,
 .col-xs-1 {
   flex-basis: 8.333%;
 }
+.col-2,
 .col-xs-2 {
   flex-basis: 16.667%;
 }
+.col-3,
 .col-xs-3 {
   flex-basis: 25%;
 }
+.col-4,
 .col-xs-4 {
   flex-basis: 33.333%;
 }
+.col-5,
 .col-xs-5 {
   flex-basis: 41.667%;
 }
+.col-6,
 .col-xs-6 {
   flex-basis: 50%;
 }
+.col-7,
 .col-xs-7 {
   flex-basis: 58.333%;
 }
+.col-8,
 .col-xs-8 {
   flex-basis: 66.667%;
 }
+.col-9,
 .col-xs-9 {
   flex-basis: 75%;
 }
+.col-10,
 .col-xs-10 {
   flex-basis: 83.333%;
 }
+.col-11,
 .col-xs-11 {
   flex-basis: 91.667%;
 }
+.col-12,
 .col-xs-12 {
@@ -78,0 +90,0 @@ flex-basis: 100%;

src/less/justify.less

@@ -0,13 +1,18 @@
+.justify-left,
 .justify-xs-left {
   justify-content: flex-start;
 }
+.justify-center,
 .justify-xs-center {
-  justify-content: center
+  justify-content: center;
 }
+.justify-right,
 .justify-xs-right {
   justify-content: flex-end;
 }
+.justify-around,
 .justify-xs-around {
   justify-content: space-around;
 }
+.justify-between,
 .justify-xs-between {
@@ -14,0 +19,0 @@ justify-content: space-between;

src/less/rows.less

@@ -10,2 +10,3 @@ .row {
   margin-right: -1rem;
+  justify-content: center;
 }

No alert changes

Improved metrics

Total package byte prevSize

28288

2.65%

Lines of code

563

3.87%

No dependency changes