Helpers
Basics
Helpers are handy classes or SASS includes which allow you to build and modify elements fast. It is worth noting that if you are planning to only use the CDN version of Launchpad you will not be able to utilize includes.
Text
For those looking to modify text elements, you can use the following helper classes.
Font weight
.text-weight--lighter
.text-weight--bolder
Font size
.text-size-smaller
.text-size-small
.text-size-normal
.text-size-large
.text-size-larger
Text alignment
.text-align--center
.text-align--left
.text-align--right
Floats
Sometimes you may need to set a float on an element. Don’t worry we’ve got that too!
.float--left
.float--right
Lists
Lists can often come in different shapes and sizes. Launchpad has a couple classes you can add to your lists in order to quickly modify them to your needs.
Horizontal lists
- Item 1
- Item 2
- Item 3
.horizontal-list
No bullets
- Item 1
- Item 2
- Item 3
.no-bullets
Flexbox
As Launchpad is built with flexbox we decide to add a couple helper classes so you can build some of your own elements using flexbox.
Display as flexbox
.flex
Justify contents
.justify-content--center
.justify-content--left
.justify-content--right
Align items
.align-items--center
.align-items--start
.align-items--end
Includes
For those build a site using the SASS version of Launchpad, here are some handy includes you can use to build faster.
Display as flexbox
@include flexbox()
Justify content
@include justify-content(VALUEHERE)
Align items
@include align-items(VALUEHERE)
It’s also worth noting more helpers will be adding as time goes on. Since we are an open source project feel free to contribute if you’d like to add new helpers.