Getting Started

Leap includes resources to create user interfaces consistent with the Treehouse brand and best practices. Here are few things to consider before you start using Leap on your next project.

Markup Considerations

Leap contains a lot of utility classes that can be stacked up to quickly create layouts and components. While it may look a little messier than you are used to on the markup side of things, this saves us a ton of extra CSS. These classes also make it much more clear what styles are applied to an element to anyone looking at the markup. When building layouts and such with Leap, make sure you don't apply extra styles on containers and grid columns. Anything needing styles outside of utility classes should typically be nested inside those types of containers.

BEM Class Naming

BEM is a well-known method of naming components — block, element, modifier. For those unfamiliar or who need a quick refresh, let’s briefly look at how BEM works. As an example, we’ll build a sandwich component.

Block

A block represents the main component. If you were building a tasty sandwich, the class name would be .sandwich. All the properties that would be shared by all different sandwiches would be included within .sandwich.

Element

An element is part of the main component and its class name is separated by two underscores. The bread of the sandwich would be reprented by the class .sandwich__bread. The cheese would be .sandwich__cheese. Be on the look out for smaller component possibilities within a larger component. If we were to take a look at sandwich condiments, which can be used on other things outside of sandwiches. We'd want to avoid a class name such as .sandwich__condiment__mayo. We could use something like .sandwich__condiment--mayo because a single dash doesn't represent anything in BEM. But, since condiments can be used on things other than sandwiches, we could make this a component in an of itself. In that case, we could name it .condiment__mayo and use that inside the sandwich element.

Modifier

A modifier is a component or element variation that only slightly differes from the main element. The variation can be applied to the entire element or just a part of it. Since the properties that should apply to every sandwich are placed on the main .sandwich class, all sandwiches receive the .sandwich class as the base. If there is a variation of a sandwich — maybe it has wheat bread — the .sandwich--wheat class would be added the component in addition to the .sandwich class.

If the sandwich has swiss cheese, a variation can be placed on the cheese element itself, like .sandwich__cheese--swiss.

Utility Classes

The one place we diverge from BEM is within our utility classes. These are immutable classes that use !important to ensure they never break. And for the most part are classes that only apply a single property, which is why we felt okay using the important declaration on them. Leap's utility classes should be used whenever possible to create the layout and style of a page or element. Each utility class end with a breakpoint suffix. Since Leap is built mobile-first, you'd apply the -xs suffix to make those styles work across all breakpoints. To modify those styles at a larger breakpoint, you'd apply an additional utility class that employs one of the other suffixes, such as -sm, -md, -lg, -xl. Whichever the highest suffix is, those styles will apply all the way up through any screen size. To learn more about these suffixes, take a gander at the Responsive page.

Mixins, Variables and Functions

Leap comes with different mixins, variables and functions that make it easy to apply its styles to elements or components that aren't contained within Leap. To learn more about the Sassy goodness within Leap, read through the Sass page.