Add border utility classes

For my own projects, I’m using a set of border utility classes, that significantly extend the current number of border utilities. With these classes, you can add or remove borders on any side individually (top, bottom, right, left) and the two axis (x, y) for all breakpoints.

Would you be interested in accepting a feature PR to include this into the main repo? Below are the classes it would add:

.bt # border top
.bb # border bottom
.br # border right
.bl # border left
.by # border y-axis
.bx # border x-axis
.bt-off
.bb-off
.br-off
.bl-off
.by-off
.bx-off
.bt-sm
.bb-sm
.br-sm
.bl-sm
.by-sm
.bx-sm
.bt-sm-off
.bb-sm-off
.br-sm-off
.bl-sm-off
.by-sm-off
.bx-sm-off
# ...and so on and so forth

I initially had used -on and -off suffixes, but decided to remove them in favor of the -0 approach used by bootstrap in other places. The downside is that the shorter, not breakpoint classes become a little too terse to be easily understandable. What do you think?

[andresgalante]

I would’t want to see a class for each CSS property, that’s what I hate about frameworks like atomic CSS or tachyons.

But if you do want to do this, I suggest to use the same naming conventions as border utilities. So .border- instead of .b

[robsilva]

I really like the naming convention used by the spacing utilities, so I created this mixin to do the same with borders:

/* Border Mixin */

$positions: t r b l;
$sizes: 3;

@mixin borders($size) {
  	@each $x in $positions {
	    @if $x == t {
	    	.b-#{$x}#{$size} { border-top: #{$size}px solid rgba(0,0,0,0.1); }
		} @else if $x == r {
			.b-#{$x}#{$size} { border-right: #{$size}px solid rgba(0,0,0,0.1); }
		} @else if $x == l {
			.b-#{$x}#{$size} { border-left: #{$size}px solid rgba(0,0,0,0.1); }
		} @else if $x == b {
			.b-#{$x}#{$size} { border-bottom: #{$size}px solid rgba(0,0,0,0.1); }
		}
	}
	.b-#{$size} { border: #{$size}px solid rgba(0,0,0,0.1); }
}

@for $i from 1 through $sizes {
	@include borders($i);
}

which generates:

.b-t1 {
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

.b-r1 {
  border-right: 1px solid rgba(0, 0, 0, 0.1); }

.b-b1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.b-l1 {
  border-left: 1px solid rgba(0, 0, 0, 0.1); }

.b-1 {
  border: 1px solid rgba(0, 0, 0, 0.1); }

.b-t2 {
  border-top: 2px solid rgba(0, 0, 0, 0.1); }

.b-r2 {
  border-right: 2px solid rgba(0, 0, 0, 0.1); }

.b-b2 {
  border-bottom: 2px solid rgba(0, 0, 0, 0.1); }

.b-l2 {
  border-left: 2px solid rgba(0, 0, 0, 0.1); }

.b-2 {
  border: 2px solid rgba(0, 0, 0, 0.1); }

.b-t3 {
  border-top: 3px solid rgba(0, 0, 0, 0.1); }

.b-r3 {
  border-right: 3px solid rgba(0, 0, 0, 0.1); }

.b-b3 {
  border-bottom: 3px solid rgba(0, 0, 0, 0.1); }

.b-l3 {
  border-left: 3px solid rgba(0, 0, 0, 0.1); }

.b-3 {
  border: 3px solid rgba(0, 0, 0, 0.1); }