@teasim/ui-styles v6.6.0

ui-styles

ui-styles uses both Less and PostCSS to build styles.

Naming conventions

• Blocks; the top level components, are camel case. For instance, .card
• Elements; children of the block elements, are named like so: .card-body
• Modifier; classes are then applied to change the default block styles. For instance .card--primary
• Specific; No-one likes one-offs, but depending on your project; like a marketing site - you may have the need to create styles that are meant to be used on a very specific page. We get around this by prefixing page-specific styles with the page name. If you're on a product page; prefix styles with .product_; like .product_card. This; just like namespacing JavaScript classes/methods allows us to maintain a consistent class structure. Then, if you notice that you've re-used those same styles elsewhere; you can pull them out into a global file that has names that fit more within a global-scope; like .card.

Modify components

You can modify components three different ways:

Install

$ yarn add @teasim/ui-styles

Variables

Each component has a slew of variables that you can easily override in your project to fit your design needs.