Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce build size by optimizing redundant css #275

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Reduce build size by optimizing redundant css #275

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f2f78ea
Reduce build size by optimizing redundant css
Raiondesu Sep 25, 2018
d55937c
Update flexboxgrid.css
Raiondesu Sep 25, 2018
15e1462
Fix selector bugs.
Raiondesu Sep 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 10 additions & 124 deletions src/css/flexboxgrid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,50 +30,32 @@
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;
}

.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"] {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is not gonna work.
|= means class attribute starts with col.
What if a developer will add additional class in the beginning of the attribute value? Like <div class="something col-sm-..."?

I would use something like [class*="col-xs]..., [class*="col-sm]....
But again, even that approach restricted a developer on adding some utils classes like col-xs-whatever.

Copy link
Author

@Raiondesu Raiondesu Sep 26, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

About first one - good point. Didn't think about it for some reason. Gonna fix now.

But again, even that approach restricted a developer on adding some utils classes

Well, it doesn't, actually.
[class*="col-"] would clearly cut it for both usecases, since it would match both the usual col classes and custom utility ones too:

<element class="col-xs-6 col-xs-make-it-very-cool col-lg-make-it-very-cool">

In any case, current waterfall of classes every 100 or so lines does not cut it for the second use-case either, so the only drawback to defining common rules as [class*="col-"] would be that all similarly-looking classes would fit this selector (which I personally view more like a nice feature).

box-sizing: border-box;
flex: 0 0 auto;
padding-right: var(--half-gutter-width, 0.5rem);
Expand Down Expand Up @@ -242,38 +224,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;
Expand Down Expand Up @@ -437,38 +387,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;
Expand Down Expand Up @@ -632,38 +550,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;
Expand Down