mdc-utility-styles v0.1.0-alpha.3

mdc-css-utils

This package is inspired by Bootstrap utility styles and implements very similar set of CSS classes for Material Components for web (MDC).

Why not use Bootstrap's utility styles? Or some stand-alone package?

Nothing prevents from using some other utility styles package because MDC is highly compatible with other frameworks. However there are these reasons why you might need this package: 1. Often Material design apps don't use Bootstrap, but you still need those utility styles. 2. Other packages has their own breakpoints system.

• Styles
  • Class naming
  • Display

Styles

Class naming

Class names are basically the same as in Bootstrap, with a little bit of MDC flavor. Lets review an example: .mdx-d--flex-desktop:

1. Class name starts with .mdx- prefix. mdx stands for Material Design Extensions. Having prefix makes it easy finding all usages of this package.
2. d--flex corresponds with Bootstrap's d-flex. But since we follow BEM naming, we separate flex with double dash. BEM naming is used to be inline with other MDC packages.
3. At the end there is optional -desktop, -tablet or -phone. It is basically similar to lg, md and sm in Bootstrap, but follows MDC pattern for naming such classes.

Breakpoints:

• phone
• tablet
• desktop

Classes without breakpoint apply to all breakpoints.

Styles behavior is very similar to Bootstrap's Utility styles with a few differences:

• in Bootstrap class with breakpoint applies to the breakpoint and above breakpoints. In MDC class with breakpoint applies to specified breakpoint only.

Here is list of CSS classes:

Flex utility CSS classes

Display

Change the value of the display property. The classes are named using the format:

• .mdx-d--{value}
• .mdx-d--{value}-{breakpoint}

Where value is one of:

• none
• inline
• inline-block
• block
• grid
• table
• table-cell
• table-row
• flex
• inline-flex

Examples: .mdx-d--flex .mdx-d--none-desktop - sets display:flex, but hides the element on desktop screen size.