From f2f78ead3fb317ba44e6b231bdd1e73358b50561 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 25 Sep 2018 14:08:36 +0300 Subject: [PATCH 1/3] Reduce build size by optimizing redundant css --- src/css/flexboxgrid.css | 123 +--------------------------------------- 1 file changed, 1 insertion(+), 122 deletions(-) diff --git a/src/css/flexboxgrid.css b/src/css/flexboxgrid.css index c84eb211..15a8c050 100644 --- a/src/css/flexboxgrid.css +++ b/src/css/flexboxgrid.css @@ -48,32 +48,7 @@ flex-direction: column-reverse; } -.col-xs, -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12, -.col-xs-offset-0, -.col-xs-offset-1, -.col-xs-offset-2, -.col-xs-offset-3, -.col-xs-offset-4, -.col-xs-offset-5, -.col-xs-offset-6, -.col-xs-offset-7, -.col-xs-offset-8, -.col-xs-offset-9, -.col-xs-offset-10, -.col-xs-offset-11, -.col-xs-offset-12 { +[class|="col"] { box-sizing: border-box; flex: 0 0 auto; padding-right: var(--half-gutter-width, 0.5rem); @@ -242,38 +217,6 @@ width: var(--container-sm, 46rem); } - .col-sm, - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11, - .col-sm-12, - .col-sm-offset-0, - .col-sm-offset-1, - .col-sm-offset-2, - .col-sm-offset-3, - .col-sm-offset-4, - .col-sm-offset-5, - .col-sm-offset-6, - .col-sm-offset-7, - .col-sm-offset-8, - .col-sm-offset-9, - .col-sm-offset-10, - .col-sm-offset-11, - .col-sm-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: var(--half-gutter-width, 0.5rem); - padding-left: var(--half-gutter-width, 0.5rem); - } - .col-sm { flex-grow: 1; flex-basis: 0; @@ -437,38 +380,6 @@ width: var(--container-md, 61rem); } - .col-md, - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11, - .col-md-12, - .col-md-offset-0, - .col-md-offset-1, - .col-md-offset-2, - .col-md-offset-3, - .col-md-offset-4, - .col-md-offset-5, - .col-md-offset-6, - .col-md-offset-7, - .col-md-offset-8, - .col-md-offset-9, - .col-md-offset-10, - .col-md-offset-11, - .col-md-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: var(--half-gutter-width, 0.5rem); - padding-left: var(--half-gutter-width, 0.5rem); - } - .col-md { flex-grow: 1; flex-basis: 0; @@ -632,38 +543,6 @@ width: var(--container-lg, 71rem); } - .col-lg, - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11, - .col-lg-12, - .col-lg-offset-0, - .col-lg-offset-1, - .col-lg-offset-2, - .col-lg-offset-3, - .col-lg-offset-4, - .col-lg-offset-5, - .col-lg-offset-6, - .col-lg-offset-7, - .col-lg-offset-8, - .col-lg-offset-9, - .col-lg-offset-10, - .col-lg-offset-11, - .col-lg-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: var(--half-gutter-width, 0.5rem); - padding-left: var(--half-gutter-width, 0.5rem); - } - .col-lg { flex-grow: 1; flex-basis: 0; From d55937cf1a9b3562edda8d7b4dffcc7e1f5e3850 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 26 Sep 2018 00:09:01 +0300 Subject: [PATCH 2/3] Update flexboxgrid.css --- src/css/flexboxgrid.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/css/flexboxgrid.css b/src/css/flexboxgrid.css index 15a8c050..ef760a01 100644 --- a/src/css/flexboxgrid.css +++ b/src/css/flexboxgrid.css @@ -30,20 +30,27 @@ padding-left: var(--outer-margin, 2rem); } -.row { +.row, .col { box-sizing: border-box; display: flex; flex: 0 1 auto; - flex-direction: row; flex-wrap: wrap; margin-right: var(--gutter-compensation, -0.5rem); margin-left: var(--gutter-compensation, -0.5rem); } +.row { + flex-direction: row; +} + .row.reverse { flex-direction: row-reverse; } +.col { + flex-direction: column; +} + .col.reverse { flex-direction: column-reverse; } From 15e14622e5c7c803a6ee403465d2750c2479e4ab Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 26 Sep 2018 13:40:37 +0300 Subject: [PATCH 3/3] Fix selector bugs. Note: build size still smaller by a chunk. --- src/css/flexboxgrid.css | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/css/flexboxgrid.css b/src/css/flexboxgrid.css index ef760a01..576fbf8c 100644 --- a/src/css/flexboxgrid.css +++ b/src/css/flexboxgrid.css @@ -55,7 +55,7 @@ flex-direction: column-reverse; } -[class|="col"] { +[class*="col-xs"] { box-sizing: border-box; flex: 0 0 auto; padding-right: var(--half-gutter-width, 0.5rem); @@ -224,6 +224,13 @@ width: var(--container-sm, 46rem); } + [class*="col-sm"] { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + .col-sm { flex-grow: 1; flex-basis: 0; @@ -387,6 +394,13 @@ width: var(--container-md, 61rem); } + [class*="col-md"] { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + .col-md { flex-grow: 1; flex-basis: 0; @@ -550,6 +564,13 @@ width: var(--container-lg, 71rem); } + [class*="col-lg"] { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + .col-lg { flex-grow: 1; flex-basis: 0;