CSS Components

Stylify components are inspired by the Material Design 3.
We do not provide any color palettes by default, because prepared color palettes mostly doesn't match project needs and are changed anyway.
However we have a guide on how to use theme and color palettes generated by the Material Theme Builder.

Components' proportions are taken from their community figma file.

Components expect that you have some kind of a "reset" stylesheet included in your page. For example Normalize.css . Also the box-sizing:border-box should be added on all elements.

How to use and modify Stylify CSS components

  • The easiest way is to copy&paste a piece of provided HTML
  • For color palettes, checkout our guide for Material Theme Builder.
  • The $color (and any other) variable can be replaced by your custom color (HEX, RGBA) or by your variable defined in Stylify CSS config.
  • In case you plan to use it in multiple places, you might want to check out the component version of the component that uses Stylify CSS component definition. This way you are not going to have bloated templates with utilities.
  • Feel free to change the proportion like margin, padding, width, height, font-size, line-height, etc
  • All components mostly use CSS flexbox or CSS Grid. In case you change the display type, make sure to check the alignment of the internal elements.
  • Some components use JavaScript (for example dialog), so make sure to copy it too, or write your own.

Components list: