Helpers

Beard's most popular and polarizing feature is its helper classes. Many people feel utility classes like the ones that Beard generates for you leads to bloat and are just as bad as using inline styles. We've found that having a rich set of helper classes makes your projects easier to build, easier to reason, and more bulletproof. This approach is more common in web application contexts, which is where Beard was born out of.


Most Beard Helpers Are Responsive

Beard ships with a standard set of breakpoints. As a result, many of the helpers included are responsive, and are generated based on the breakpoints specified in your configuration. These are the default breakpoints:

Name Prefix Target
Small .sm- (min-width: 300px)
Medium .md- (min-width: 600px)
Large .lg- (min-width: 900px)
Extra Large .xlg- (min-width: 1440px)
Only Small .only-sm- (max-width: 599px)
Only Medium .only-md- (min-width: 600px) and (max-width: 899px)
Only Large .only-lg- (min-width: 900px) and (max-width: 1439px)
Only Extra Large .only-xlg- (min-width: 1440px)