BDS

Color Palette

*-black
#000000
*-grey
#333E48
*-grey-85
#4E5760
*-grey-65
#757C83
*-grey-45
#9EA2A7
*-grey-15
#e3e2e2
*-grey-05
#f0f0f0
*-white
#ffffff
*-dark-blue
#004876
*-dark-blue-85
#356189
*-blue
#0075C9
*-blue-85
#0088D1
*-blue-65
#4DA3DC
*-blue-45
#8DBEE7
*-purple
#8547ad
*-purple-85
#9862b9
*-purple-65
#b388cb
*-red
#F42534
*-red-85
#FC564F
*-red-65
#ff988a
*-orange
#ff9e16
*-orange-85
#ffad45
*-orange-65
#ffc072
*-green
#00bd70
*-green-85
#00c884
*-green-65
#5fd6a0

Logo Color

*-grey
#333E48
*-blue-65
#4DA3DC

Background color

Prefix Function Preview
bds-bg sets background color
bds-bg-green
bds-bg-lg changes the large breakpoint background color
bds-bg-lg-purple
bds-hov-bg changes the background color when hovered
bds-hov-bg-orange

Text color

Prefix Function Preview
bds-txt sets the text color
bds-txt-blue
bds-hov-txt changes the text color when hovered
bds-hov-txt-red

Border color

Prefix Function Preview
bds-border sets a colored 1px border
bds-border-green

Examples:

Hello world
Hello world
Hello world

Typography

Font size

There are a max of 3 ways to set font size:
1. Tags: h1 to h6
2. Class represention of tags: bds-h1 to bds-h6, bds-b1 to bds-b4, and bds-l1
3. Class represention of relative pixel size: bds-txt-44 to bds-txt-11 (see chart below)

Class
Use one of the following: 		Pixels Approx Preview
h1
bds-h1
bds-txt-44 		44px

Heading h1
h2
bds-h2
bds-txt-40 		40px

Heading h2
h3
bds-h3
bds-txt-34 		34px

Heading h3
h4
bds-h4
bds-txt-24 		24px

Heading h4
h5
bds-h5
bds-txt-22 		22px
Heading h5
h6
bds-h6
bds-txt-20 		20px
Heading h6
bds-b1
bds-txt-18 		18px
Body b1
bds-b2
bds-txt-16 		16px
Body b2
bds-b3
bds-txt-14 		14px
Body b3
bds-b4
bds-txt-12 		12px
Body b4
bds-l1
bds-txt-11 		11px
Legal l1

Font weight

Class Weight Preview
bds-txt-light Light

bds-txt-light
bds-txt-regular Regular

bds-txt-regular
bds-txt-semi-bold Semi Bold

bds-txt-semi-bold
bds-txt-bold Bold

bds-txt-bold

Text align

Class Function Preview
bds-txt-left Left align text left
bds-txt-right Right align text right
bds-txt-center Center text center
bds-txt-md-[VALUE] Set text alignment on medium breakpoint bds-txt-md-center
bds-txt-lg-[VALUE] Set text alignment on large breakpoint bds-txt-lg-center

Examples:

Hello world 1
Hello world 2
Hello world 3
Hello world 4

Buttons

Base Buttons

Prefixes Function Preview
bds-btn-primary Primary button bds-btn-primary
bds-btn-secondary Secondary button bds-btn-secondary
bds-btn-tertiary Tertiary button bds-btn-tertiary
bds-btn-ghost Ghost button bds-btn-ghost
bds-btn-i-primary Inversed Primary Button bds-btn-i-primary
bds-btn-i-secondary Inversed Secondary Button bds-btn-i-secondary
bds-btn-i-tertiary Inversed Tertiary Button bds-btn-i-tertiary
bds-btn Base button bds-btn

Customizations

Custom buttons can be created by appending color and typography utility classes to bds-btn

Prefixes Example Classes Preview
bds-btn [VALUE] bds-btn
bds-bg-orange
bds-txt-white
bds-hov-bg-white
bds-hov-txt-orange
 Custom Button
Example:
Button 1 Button 2 Button 3

Natural Width/Height

Sets the button size to its natural width & height

Prefixes Function Preview
bds-btn-auto [BASE BUTTONS] Append base classes for this styling bds-btn-auto bds-btn-primary
bds-btn-auto [VALUES] Append color and typography utility classes bds-btn-auto bds-bg-grey-15

Spacing

*-xxs

~8px
*-xs

~16px
*-sm

~24px
*-md

~32px
*-lg

~48px
*-xl

~67px
*-xxl

~88px

Margin

Prefixes Function Preview
bds-marg-all Adds margin to all sides
bds-marg-all-xs
bds-marg-t Adds margin to the top
bds-marg-t-xs
bds-marg-b Adds margin to the bottom
bds-marg-b-xs
bds-marg-l Adds margin to the left
bds-marg-l-xs
bds-marg-r Adds margin to the right
bds-marg-r-xs
bds-marg-y Adds margin to the top and bottom
bds-marg-y-xs
bds-marg-x Adds margin to the left and right
bds-marg-x-xs
bds-marg-lg-[VALUE] Adds margin to the large breakpoint only
bds-marg-lg-x-xs

Padding

Prefixes Function Preview
bds-pad-all Adds padding to all sides
bds-pad-all-xs
bds-pad-t Adds padding to the top
bds-pad-t-xs
bds-pad-b Adds padding to the bottom
bds-pad-b-xs
bds-pad-l Adds padding to the left
bds-pad-l-xs
bds-pad-r Adds padding to the right
bds-pad-r-xs
bds-pad-y Adds padding to the top and bottom
bds-pad-y-xs
bds-pad-x Adds padding to the left and right
bds-pad-x-xs
bds-pad-lg-[VALUE] Adds padding to the large breakpoint only
bds-pad-lg-x-xs
Example:
Hello world
Hello world
Hello world

Hide Show


Hide

Class <= sm sm - md md - lg lg - xl >= xl Preview
bds-hide
visible
bds-hide-sm-up visible
visible
bds-hide-md-up visible visible
visible
bds-hide-lg-up visible visible visible
visible
bds-hide-xl-up visible visible visible visible
visible
bds-hide-sm-down visible visible visible visible
visible
bds-hide-md-down visible visible visible
visible
bds-hide-lg-down visible visible
visible
bds-hide-xl-down visible
visible

Display

Prefixes Function Preview
bds-block Set display to block bds-block
bds-block-[sm/md/lg/xl] Set display to block at >= [sm/md/lg/xl] bkpt bds-block-sm
bds-inline-block Set display to inline-block bds-inline-block
bds-inline-block-[sm/md/lg/xl] Set display to inline-block at >= [sm/md/lg/xl] bkpt bds-inline-block-sm
Example:
re-size browser or use emulator to see examples
How do you show a message on mobile but hide on desktop?
Solution: class="bds-hide-lg"

This is hidden on the large breakpoint

How do you hide a message on mobile, but show on desktop?
Solution 1: class="bds-hide bds-block-lg"

This is showing on the large breakpoint

Solution 2: class="bds-hide-lg-down"
This is showing on the large breakpoint

Utilities

Text Alignment

Prefixes Function Preview
bds-txt-left Text align left
bds-txt-left
bds-txt-right Text align right
bds-txt-left
bds-txt-lg-[left/right/center] Set text align for >= lg breakpoint
bds-txt-lg-center

Positioning

Prefixes Function
relative,
bds-relative		 position relative
bds-fixed position fixed
absolute,
bds-absolute		 position absolute
bds-tl-0 top: 0
left: 0
bds-marg-x-auto margin-left: auto
margin-right: auto
bds-x-center left: 50%
transform: translateX(-50%)
bds-y-center top: 50%;
transform: translateY(-50%);
bds-xy-center top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
bds-width-100 width: 100%
bds-height-100 height: 100%

Floats

Prefixes Function
bds-left float left
bds-right float right
clearfix clear all floats

z-index

Prefixes Function
bds-z-index-0 z-index: 0
bds-z-index-[1-5] z-index: 1
...
z-index: 5
bds-z-index-10 z-index: 10
bds-z-index-100 z-index: 100
bds-z-index-500 z-index: 500

Flexbox

To use flexbox, you must wrap the container with a flex display

Flex Display

Prefixes Function
bds-flex Makes flex available. Container is displayed like a block.
bds-inline-flex Makes flex available. Container is displayed like a inline-block.

Flex Centering

Prefixes Function
bds-xy-center Vertically and horizontally centered
bds-y-center Vetically centered
bds-flex bds-y-center
bds-flex bds-xy-center
Example
*note: inline style, height is only for example purposes. Please avoid inline styles in your markup.

Flex Order

- Flex order classes should be children of bds-flex.
- These flex order classes impacts content on the larger breakpoint and larger.
- These classes changes the order in which your content shows up, even if the markup setup in - HTML has it in a different order
- Always set up your content in mobile hierarchy, then use css and the order classes to change desktop.

Prefixes Function
bds-order-1 Sets the content to display first on the large breakpoint
bds-order-[2-5] Sets the content to displa [2nd - 5th] on the large breakpoint
re-size browser or use emulator to see how the order changes
1st content
2nd content

Flex Spacing

Prefixes Function
bds-space-between Sets even spacing between elements
bds-space-around Sets even spacing around elements
bds-flex bds-space-between
bds-flex bds-space-between
bds-flex bds-space-between
bds-flex bds-space-around
bds-flex bds-space-around
bds-flex bds-space-around
Example

Page Structure

Breakpoints

Breakpoint Pixel Size
xs up to 479px
s 480px - 767px
md 768px - 991px
lg 992px - 1199px
xl 1200px and larger

Hierarchy