Why not using CSS Selector and text align classes ...

[effone]

1. Was wondering why there are all lengthy 88 lines covering every single class instead of where we can cover the same with only 8 lines...

[class^="col-"] {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

Is there any specific reason?

2. Also was wondering if there were some text align classes as well that would be helpful ...

/* Responsive text alignments */
.col-xs-txr {
	text-align: right;
}

.col-xs-txm {
	text-align: center;
}

.col-xs-txl {
	text-align: left;
}

@media only screen and (min-width: 48em) {
	.col-sm-txr{
		text-align: right;
	}
	.col-sm-txm{
		text-align: center;
	}
	.col-sm-txl{
		text-align: left;
	}
}

@media only screen and (min-width: 64em) {
	.col-md-txr{
		text-align: right;
	}
	.col-md-txm{
		text-align: center;
	}
	.col-md-txl{
		text-align: left;
	}
}

@media only screen and (min-width: 75em) {
	.col-lg-txr{
		text-align: right;
	}
	.col-lg-txm{
		text-align: center;
	}
	.col-lg-txl{
		text-align: left;
	}
}

[Cookizza]

Firstly, those text align classes would be a great addition.

However your first point is not the same.

[class^="col-"] will not match classes that are not the first in the class list (e.g. class="something col-md-12") will not be matched by CSS exporters / bundlers. Which will cause really annoying behavior to anyone using webpack bundler :s

[dark-side-coder]

@Cookizza There is a way around it not being listed as first in the class list. By using the [class*=" class-prefix-"] attribute selector. Basically, by adding a space before the class prefix, it will account for any element that contains the class if it is not the first within the class list. Combine this with the method mentioned by @effone and together it should solve that issue.

However, I am not sure what the impact this would have to webpack bundler.

[class^="col-"], [class*=" col-"] {
  /* styles go here */
}

[Jessman5]

[class*="foo"] means: if selector classes contain a class named foo. It doesn't matter if foo is the first, the last or whatever class. [class^="foo"] won't be needed then, especially not in combination with [class*=" foo"].

[AfonsoFG]

@Jessman5 Do notice he has [class*=" col-"] and not [class*="col-"]

[Jessman5]

@AfonsoFG yes, that'S why I wrote the comment. you don't need the space here. In fact [class*=" col-"] will only fire when you have class=" col-..." and not when you have class="col-..." that could or will cause some trouble.

[AfonsoFG]

And the @dark-side-coder comment covers just that ... but I might be confused... at this point of the day the brain doesn't seems to keep up!