Yumma CSS and Svelte

Creating a new project

To create a new Svelte project, you need run the Svelte command in your terminal.

1. Install Yumma CSS

   Install the Yumma CSS Library using a package manager.

   npm

   Installing dependencies...

   npm i yummacss

   pnpm

   Installing dependencies...

   pnpm add yummacss

   yarn

   Installing dependencies...

   yarn add yummacss

2. Include yummacss in your main CSS file:

   In this case, we’re importing the minified version of Yumma CSS.

   Create a new /src/global.css file

   src/global.css

   @import "/node_modules/yummacss/dist/yumma.min.css";

3. Import the CSS file

   Create a /src/routes/+layout.svelte file

   routes/+layout.svelte

   <script>
       import "../global.css";
   </script>
   
   <slot />

4. Start development server

   Start your application using npm run dev.

   npm

   Starting development server...

   npm run dev

   pnpm

   Starting development server...

   pnpm run dev

   yarn

   Starting development server...

   yarn run dev

5. Done!

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

   routes/+page.svelte

   <h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🤝 Svelte</h1>

---

Clone this project

You can clone the project from the GitHub repository.

Cloning the project...

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