Colors & Spacers
For the purposes of these designs, we created vertical spacer classes. It was decided that a separate element for spacing (in most cases) would work best rather than adding padding or margins to the elements. Whenever possible, use the spacer classes to separate elements from each other.
The spacers do not have any background colors attached. They are colored here only for display purposes.
The ones listed below are the ones we are using for the most recent batches of pages.
COLORS (text & backgrounds)
background colors
text colors & text alignment
is-white-text ON is-black-bg
is-white-text ON is-celestedark-bg
is-black text ON is-celestedark-bg
is-celeste-text ON is-white-bg
is-celestedark-text ON is-white-bg
I am left justified
class = text-align-left
I am center justified
class = text-align-center
I am right justified
class = text-align-right
NOTE: if text alignment changes per breakpoint per the comp, please create your own class for these cases.
SPACERS (vertical)
spacer--100d-50tm
Class = spacer--100d-50tm
desktop
h: 100px
tablet, mobile
h: 50px
spacer--100d-60t-40m
Class = spacer--100d-60t-40m
desktop
h: 100px
tablet
h: 60px
mobile
h: 40px
spacer--10dtm
Class = spacer--100dtm
desktop, tablet, mobile
h: 10px
spacer--20d-10tm
Class = spacer--20d-10tm
desktop
h: 20px
tablet, mobile
h: 10px
spacer--20d-15tm
Class = spacer--15d-10tm
desktop
h: 15px
tablet, mobile
h: 10px
spacer--20dtm
Class = spacer--20dtm
desktop, tablet, mobile
h: 20px
spacer--2dtm
Class = spacer--2dtm
desktop, tablet, mobile
h: 2px
spacer--30d-20tm
Class = spacer--30d-20tm
desktop
h: 30px
tablet, mobile
h: 20px
spacer--30dt-20m
Class = spacer--30dt-20m
desktop, tablet
h: 30px
mobile
h: 20px
spacer--40dtm
Class = spacer--40dtm
desktop, tablet, mobile
h: 40px
spacer--40d-20tm
Class = spacer--40d-20tm
desktop
h: 40px
tablet, mobile
h: 20px
spacer--40d-30tm
Class = spacer--40d-30tm
desktop
h: 40px
tablet, mobile
h: 30px
spacer--50dtm
Class = spacer--50dtm
desktop, tablet, mobile
h: 50px
spacer--60d-50tm
Class = spacer--60d-50tm
desktop
h: 60px
tablet, mobile
h: 50px
spacer--80d-40t-20m
Class = spacer--80d-40t-20m
desktop
h: 80px
tablet
h: 40px
mobile
h: 20px
spacer--0d-20tm
Class = spacer--0d-20tm
desktop
h: 0px
tablet, mobile
h: 20px
spacer--0d-20tm
Class = spacer--0d-20tm
desktop
h: 0px
tablet, mobile
h: 20px