Lunds universitet - Style Guide

Borders

Breakpoints

You can use breakpoint infixes to set borders only from a certain breakpoint. For example border-lg will add a border to an element when the viewport is at least at the lg breakpoint.

Valid breakpoint infixes are:

sm
md
lg
xl

Valid border classes with lg infix as example, but all infixes are valid:

.border-lg 
.border-lg-top 
.border-lg-end 
.border-lg-bottom 
.border-lg-start 
.border-lg-0 
.border-lg-top-0 
.border-lg-end-0 
.border-lg-bottom-0 
.border-lg-start-0

Border colors are also valid to set at breakpoints, again with lg infix as example but all are valid:

.border-lg-success 
.border-lg-info 
.border-lg-warning 
.border-lg-danger 
.border-lg-light 
.border-lg-primary 
.border-lg-secondary 
.border-lg-dark 
.border-lg-white 
.border-lg-black 
.border-lg-blue 
.border-lg-bronze 
.border-lg-flower 
.border-lg-sky 
.border-lg-copper 
.border-lg-plaster 
.border-lg-stone 
.border-lg-flower-50 
.border-lg-sky-50 
.border-lg-copper-50 
.border-lg-plaster-50 
.border-lg-stone-50 
.border-lg-dark-50 
.border-lg-flower-25 
.border-lg-sky-25 
.border-lg-copper-25 
.border-lg-plaster-25 
.border-lg-stone-25 
.border-lg-dark-25
.border-lg-dark-grey 
.border-lg-bronze-medium

Children and Grandchildren

You can use the c prefix to have the child of a given element have a border. Likewise you can use the gc prefix to affect an elements grandchildren.

Available classes are:

.cborder
.cborder-top 
.cborder-end 
.cborder-bottom 
.cborder-start 
.cborder-0 
.cborder-top-0 
.cborder-end-0 
.cborder-bottom-0 
.cborder-start-0 

.gcborder
.gcborder-top 
.gcborder-end 
.gcborder-bottom 
.gcborder-start 
.gcborder-0 
.gcborder-top-0 
.gcborder-end-0 
.gcborder-bottom-0 
.gcborder-start-0

This can also be used for breakpoints as stated above, here using the lg infix as an example, but any valid infix will work:

.cborder-lg 
.cborder-lg-top 
.cborder-lg-end 
.cborder-lg-bottom 
.cborder-lg-start 
.cborder-lg-0 
.cborder-lg-top-0 
.cborder-lg-end-0 
.cborder-lg-bottom-0 
.cborder-lg-start-0 

.gcborder-lg 
.gcborder-lg-top 
.gcborder-lg-end 
.gcborder-lg-bottom 
.gcborder-lg-start 
.gcborder-lg-0 
.gcborder-lg-top-0 
.gcborder-lg-end-0 
.gcborder-lg-bottom-0 
.gcborder-lg-start-0