Helpers

  1. Basics
  2. Text
  3. Floats
  4. Lists
  5. Flexbox
  6. Includes

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

.horizontal-list

No bullets

.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.