Yumma CSS and Astro

Creating a new project

To create a new Astro project, you need run the Astro CLI Wizard in your terminal.

1. Install Yumma CSS:

   Install the Yumma CSS Library using a package manager.

   Installing dependencies...

   npm install yummacss@latest

2. Add yummacss in your Layout.astro file:

   layouts/Layout.astro

   <style is:global>
       @import "/node_modules/yummacss/dist/yumma.min.css";
   </style>

3. Start development server

   Start your application using npm run dev.

   Starting development server...

   npm run dev

4. Done!

   You’re all set to start using Yumma CSS utility classes in your project.

   pages/index.astro

   ---
   import Layout from '../layouts/Layout.astro';
   ---
   
   <Layout title="Welcome to Astro.">
       <h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🤝 Astro</h1>
   </Layout>

---

Clone this project

You can clone the project from the GitHub repository.

Cloning the project...

git clone https://github.com/yumma-lib/astro-example.git