So, why Yumma CSS?
Yumma CSS uses an abbreviated naming convention that’s similar to the regular
CSS syntax.
< div class = "max-w-96 ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-xs " >
< h4 class = "mb-2 fs-xxl fw-600 lh-1 tc-d-lead-2" >Heading</ h4 >
< p class = "mb-4 tc-l-lead-3 " >Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia velit fugit voluptates quod, placeat quam maxime earum voluptas provident, natus omnis saepe beatae vitae.</ p >
< a class = "fs-sm lh-1 tc-pink tdl-u " href = "/" >Link to page</ a >
< button class = "mb-4 mt-6 h-12 rad-2 bg-pink px-6 fw-600 tc-white h:bg-d-pink-1" >Primary Button</ button >
Abbreviated syntax
Abbreviated naming convention syntax for better maintainability and
scalability.
Framework integrations
Add Yumma CSS to your favorite frameworks or try Yumma CSS Play.
Responsive design
Responsive breakpoint utilities and other utility variants to create complex
layouts.
Components
Fully responsive components in your Yumma CSS projects — just copy and go!
Create a new project
To learn how to install Yumma CSS in your project framework, follow the
step-by-step installation guide
See for yourself
Take a look at how Yumma CSS compares to other popular frameworks.
Learn more ↦
< div class = "max-w-96 ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-xs" >
< h4 class = "mb-2 fs-xxl fw-600 lh-1 tc-d-lead-2" >Heading</ h4 >
< p class = "mb-4 tc-l-lead-3 " >Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia velit fugit voluptates quod, placeat quam maxime earum voluptas provident, natus omnis saepe beatae vitae.</ p >
< a class = "fs-sm lh-1 tc-pink tdl-u" href = "/" >Link to page</ a >
< button class = "mb-4 mt-6 h-12 rad-2 bg-pink px-6 fw-600 tc-white h:bg-d-pink-1" >Primary Button</ button >
< div class = "max-w-sm overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 shadow-sm" >
< h4 class = "mb-2 text-3xl font-semibold leading-none text-gray-800" >Heading</ h4 >
< p class = "mb-4 text-gray-500" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia velit fugit voluptates quod, placeat quam maxime earum voluptas provident, natus omnis saepe beatae vitae.</ p >
< a class = "text-sm leading-none text-pink-500 underline" href = "/" >Link to page</ a >
< button class = "mb-4 mt-6 h-12 rounded-lg bg-pink-500 px-6 font-semibold text-white hover:bg-pink-600" >Primary Button</ button >
Built by Renildo Pereira
Yumma CSS is a utility-first CSS library that uses abbreviated naming conventions that follow regular CSS syntax to help you debug, scale, and maintain your markup better and get your application out the door faster.