DEV Community

Florian Woelki
Florian Woelki

Posted on

Y(et) A(nother) CSS framework

You might ask why another CSS framework?

The quick question is, I didn't find one that fits my needs. Therefore, I made yet another css framework.

YACSS is a modern utility and component based CSS framework. If you know Tailwind, you should be pretty familiar with YACSS. YACSS uses utility classes and beautiful prestyled components to work. You can look at some examples on the github page.

What utility based classes are in YACSS?

The reason why there are for every single width or color a system is really easy to explain. The focus should be on the development of the product and not the difference between margin-left 1px or 2px.

We have different utility classes and systems:

  • different colors (e.g. indigo, blue, red, gray) for background, on hover or text color
  • spacing system (e.g. m-1 sets a margin with 16px)
  • font size system (e.g. font-12 sets the font size to 12px)
  • border radius system (e.g. btl-sm sets top left border radius to 2px)
  • border system (e.g. b-2 sets a white border with 2px width. You can set the border color with bc-purple-700)
  • and much more to explore...

What components are in YACSS?

Right now, there are some components you can dynamically change or apply:

  • Sidebar, Navbar
  • Buttons (Primary, Secondary, Tertiary)
  • Links
  • 12 grid system with large, medium and small device breakpoints
  • Button Animations
  • Avatars
  • Alerts
  • Cards
  • Pagination
  • Tags
  • Modals
  • Input Forms

The best thing is: you can customize every single component with the utility classes.

Top comments (0)