Borders - pressden/emma GitHub Wiki

The border set of utility classes allows you to create flexible borders on all 4 sides of an element. Borders on each side can be created independently, although the same color must be used for all sides.

border

Anytime you make a border, you must add the border class, along with any other options you choose to use.

Location

Location and Size are defined together in a single class. Follows the format b[location]-[size].

• b-[size] - provides a border around all sides
• by-[size] - provides a top and bottom border
• bx-[size] - provides a left and right border
• bt-[size] - provides a top border
• bb-[size] - provides a bottom border
• bl-[size] - provides a left border
• br-[size] - provides a right border

Size

Location and Size are defined together in a single class. Follows the format b[location]-[size].

• b[location]-sm - provides a 1px border at the chosen location(s)
• b[location]-md - provides a 3px border at the chosen location(s)
• b[location]-lg - provides a 5px border at the chosen location(s)

Color

Color is assigned as a separate class, and is optional (borders will be black by default). Borders colors cannot be assigned on a per-location basis. Any colors in the editor color palette can be used. Follows the format b-[color-name].

• b-primary - assigns Primary color to border(s)
• b-primary-support - assigns Primary Support color to border(s)
• etc

Color names can be found by selecting any element that allows for color selection, and mousing over one of the color swatches to view its name.

Examples

• border b-md - creates a 3px black border around all 4 sides of an element
• border by-lg b-primary - creates a 5px border on the top and bottom of an element using the Primary color
• border bl-lg bb-md b-secondary-support - creates a 5px border on the left and a 3px border on the bottom of an element using the Secondary Support color