What is Yumma CSS?
Yumma CSS is a utility-first 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.
No need to set anything up, just install and off you go!
Installation
Here’s how you can add yummacss
into your project or framework.
Install Yumma CSS:
Install the Yumma CSS Library using a package manager.
Add yummacss
to your main CSS file:
@import "/node_modules/yummacss/dist/yumma.min.css" ;
Use Yumma CSS in your project:
You’re all set to start using Yumma CSS utility classes in your project.
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< link rel = "stylesheet" href = "app.css" />
< h1 class = "fs-xxl fw-500 tc-pink" >Yumma CSS + Node.js</ h1 >
Angular A scalable web app framework. Astro Modern static site builder. Next.js An advanced React framework. Nuxt.js Powerful framework for Vue.js apps. Preact Lightweight React alternative. React Library for interactive UIs. Svelte Compiles to optimized JavaScript. Vue Progressive UI framework. .NET Dynamic server-side web apps.
Add the CDN to your HTML file
Just add the CDN to the <head>
tag to your HTML file, and you’re good to go!
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
<!-- Minified version -->
< link href = "https://cdn.jsdelivr.net/gh/yumma-lib/yumma-css@latest/dist/yumma.min.css" rel = "stylesheet" crossorigin = "anonymous" >
< h1 class = "fs-xxl fw-500 tc-pink" >Try Yumma CSS CDN</ h1 >
CSS options
Once Yumma CSS has been installed via Package Manager or CDN , you will be able to access different compiled CSS files.
/dist/yumma.css
— Standard
/dist/yumma.min.css
— Minified
/dist/yumma-core.css
— Standard (without Stylecent)
/dist/yumma-core.min.css
— Minified (without Stylecent)
Next steps
Learn about Yumma CSS, and see how it works differently from other CSS frameworks.
Color System Use predefined colors to keep designs consistent across Yumma CSS projects. Responsive Design Use media queries to make interfaces responsive to any screen size. Utility Classes Use a constrained set of primitive utilities for complex components. Variants Use variants such as hover to create more engaging elements.