hyper-grid-css - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

src/css/align.css

+.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;
+  }
+}

src/css/bundle.css

+@import 'variables.css';
+@import 'containers.css';
+@import 'rows.css';
+@import 'columns.css';
+@import 'offset.css';
+@import 'justify.css';
+@import 'align.css';
+@import 'order.css';

src/css/columns.css

+.col,
+[class*="col-"] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: auto;
+  min-width: 0;
+}
+
+.column {
+  /* generic column */
+  padding-left: 1rem;
+  padding-right: 1rem;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 300px;
+}
+
+.col,
+.col-auto,
+.col-xs-auto,
+.col-sm-auto,
+.col-md-auto,
+.col-lg-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%;
+}
+
+@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%;
+  }
+}
+
+@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%;
+  }
+}
+
+@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%;
+  }
+}

src/css/containers.css

+.container,
+.container-fluid {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  width: 100%;
+}
+.container {
+  max-width: 1200px;
+}

src/css/justify.css

+.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;
+  }
+}

src/css/offset.css

+.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-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-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-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%;
+  }
+}

src/css/order.css

+.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;
+  }
+}

src/css/rows.css

+.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;
+}

src/css/variables.css

+/* breakpoint-sm: 544px; */
+/* breakpoint-md: 768px; */
+/* breakpoint-lg: 1024px; */
+/* breakpoint-xl: 1216px; */
+
+:root {}

changelog.md

@@ -1,18 +0,5 @@
-# Todo
+# Changelog
 
-- Rename classes
-  - xs-col-auto
-  - xs-col-6
-  - xs-offset-1
-  - xs-order-first
-  - xs-justify-top
-  - xs-align-top
-  - xs-direction-row-reverse, xs-direction-col-reverse
-- Remove xs prefix for xs scope (?)
-  - col
-  - xs-col-6
-- Remove unnecessary columns
+## 1.6.0
 
-# Changelog
-
-- Change breakpoint sizes (variables.less)
+- switch to postcss

dist/grid.css

@@ -1,3 +0,8 @@
-/** (C) License MIT | https://github.com/heyallan/hyper-grid-css */
+/** https://github.com/heyallan/hyper-grid-css */
 
+/* breakpoint-sm: 544px; */
+/* breakpoint-md: 768px; */
+/* breakpoint-lg: 1024px; */
+/* breakpoint-xl: 1216px; */
+:root {}
 .container,
@@ -35,2 +40,3 @@ .container-fluid {
 .column {
+  /* generic column */
   padding-left: 1rem;
@@ -508,8 +514,8 @@ padding-right: 1rem;
 @media only screen and (min-width: 1024px) {
-  .order-lg-first {
+  .order-lg-first{
     order: -1;
   }
-  .order-lg-last {
+  .order-lg-last{
     order: 1;
   }
 }

dist/grid.min.css

@@ -1,3 +0,3 @@
-/** (C) License MIT | https://github.com/heyallan/hyper-grid-css */
+/** 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;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}}

gulpfile.js

 var gulp         = require('gulp');
-var less         = require('gulp-less');
+var postcss      = require('gulp-postcss');
+var nextcss      = require('postcss-preset-env');
+var atImport     = require('postcss-import');
 var autoprefix   = require('gulp-autoprefixer');
@@ -10,7 +12,7 @@ var minify       = require('gulp-minify-css');
 var browserSync  = require('browser-sync').create();
-var banner       = ['/** (C) License <%= package.license %> | <%= package.repo.url %> */\n\n'];
+var banner       = ['/** <%= package.repo.url %> */\n\n'];
 
 gulp.task('css', function() {
-  return gulp.src('./src/less/bundle.less')
-    .pipe(less())
+  return gulp.src('./src/css/bundle.css')
+    .pipe(postcss([nextcss,atImport]))
     .pipe(autoprefix())
@@ -28,3 +30,3 @@ .pipe(rename(pkgJson.keyword + '.css'))
 
-gulp.task('html', function() {
+gulp.task('docs', function() {
   return gulp.src('./src/docs/pages/**/*.njk')
@@ -53,7 +55,7 @@ .pipe(nunjucks({
 gulp.task('watch', function() {
-  gulp.watch('./src/less/**/*', ['css']);
-  gulp.watch('./src/docs/**/*', ['html']);
+  gulp.watch('./src/css/**/*', ['css']);
+  gulp.watch('./src/docs/**/*', ['docs']);
   gulp.watch('./src/readme/**/*', ['readme']);
 })
 
-gulp.task('default', ['css', 'html', 'readme', 'server', 'watch'])
+gulp.task('default', ['css', 'docs', 'readme', 'server', 'watch'])

package.json

 {
   "name": "hyper-grid-css",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Grid layout with flexbox",
@@ -39,7 +39,9 @@ "repository": {
     "gulp-header": "^2.0.5",
-    "gulp-less": "^3.5.0",
     "gulp-minify-css": "^1.2.4",
     "gulp-nunjucks-render": "^2.2.2",
-    "gulp-rename": "^1.2.2"
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.2.2",
+    "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.5.0"
   }
 }

src/less/align.less

-.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: @breakpoint-sm) {
-  .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: @breakpoint-md) {
-  .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: @breakpoint-lg) {
-  .align-lg-top {
-    align-items: flex-start;
-  }
-  .align-lg-center {
-    align-items: center;
-  }
-  .align-lg-bottom {
-    align-items: flex-end;
-  }
-}

src/less/bundle.less

-@import 'variables';
-@import 'containers';
-@import 'rows';
-@import 'columns';
-@import 'offset';
-@import 'justify';
-@import 'align';
-@import 'order';

src/less/columns.less

-.col,
-[class*="col-"] {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-basis: auto;
-  min-width: 0;
-}
-
-.column {
-  // generic column
-  padding-left: 1rem;
-  padding-right: 1rem;
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 300px;
-}
-
-.col,
-.col-auto,
-.col-xs-auto,
-.col-sm-auto,
-.col-md-auto,
-.col-lg-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%;
-}
-
-@media only screen and (min-width: @breakpoint-sm) {
-  .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%;
-  }
-}
-
-@media only screen and (min-width: @breakpoint-md) {
-  .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%;
-  }
-}
-
-@media only screen and (min-width: @breakpoint-lg) {
-  .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%;
-  }
-}

src/less/containers.less

-.container,
-.container-fluid {
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 1rem;
-  padding-left: 1rem;
-  width: 100%;
-}
-.container {
-  max-width: 1200px;
-}

src/less/justify.less

-.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: @breakpoint-sm) {
-  .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: @breakpoint-md) {
-  .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: @breakpoint-lg) {
-  .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;
-  }
-}

src/less/offset.less

-.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: @breakpoint-sm) {
-  .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: @breakpoint-md) {
-  .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: @breakpoint-lg) {
-  .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%;
-  }
-}

src/less/order.less

-.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: @breakpoint-sm) {
-  .order-sm-first {
-    order: -1;
-  }
-  .order-sm-last {
-    order: 1;
-  }
-}
-
-@media only screen and (min-width: @breakpoint-md) {
-  .order-md-first {
-    order: -1;
-  }
-  .order-md-last {
-    order: 1;
-  }
-}
-
-@media only screen and (min-width: @breakpoint-lg) {
-  .order-lg-first{
-    order: -1;
-  }
-  .order-lg-last{
-    order: 1;
-  }
-}

src/less/rows.less

-.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;
-}

src/less/variables.less

-@breakpoint-sm: 544px; // 34em
-@breakpoint-md: 768px; // 48em
-@breakpoint-lg: 1024px; // 64em
-@breakpoint-xl: 1216px; // 76em

No alert changes

Improved metrics

Lines of code

1096

94.67%

Worsened metrics

Total package byte prevSize

28170

-0.42%

Dev dependency count

10

25%

No dependency changes