### Initialize Yumma CSS Configuration File Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/installation.mdx Creates a default yumma.config.js configuration file in your project, which is necessary for further setup. ```bash yummacss init ``` -------------------------------- ### Install Yumma CSS Package Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/installation.mdx Adds the Yumma CSS package to your project as a development dependency using the command line. ```bash yummacss -D ``` -------------------------------- ### Clone Solid.js Starter Project with Yumma CSS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/solidjs.mdx This command clones the official Solid.js starter project pre-configured with Yumma CSS, allowing users to quickly get started without following the manual setup steps. ```bash git clone https://github.com/yumma-lib/with-solidjs.git ``` -------------------------------- ### Clone Next.js starter project with Yumma CSS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/nextjs.mdx This command clones the official Next.js starter project pre-configured with Yumma CSS, allowing users to quickly get started without following the manual setup steps. ```bash git clone https://github.com/yumma-lib/with-nextjs.git ``` -------------------------------- ### Clone React Starter Project with Yumma CSS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/react.mdx This command clones a pre-configured React starter project that already has Yumma CSS integrated, allowing you to quickly get started without manual setup. ```bash git clone https://github.com/yumma-lib/with-react.git ``` -------------------------------- ### Build Yumma CSS Styles Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/installation.mdx Executes the build command to generate the final CSS file based on the configured settings and utility classes found in your project. ```bash yummacss build ``` -------------------------------- ### Set Place Content to Start in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/box-model/place-content.mdx This example sets the place content to start. The items will be aligned to the start of the container. ```html

``` -------------------------------- ### Install Yumma CSS as Development Dependency Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/upgrade-guide.mdx Installs Yumma CSS v3 as a development dependency, reflecting its new role as a CLI tool for generating CSS files. ```Terminal npm install yummacss -D ``` -------------------------------- ### Build Yumma CSS Styles Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/upgrade-guide.mdx Executes the Yumma CSS build command to generate the final CSS file based on your project's configuration, completing the v3 setup. ```Terminal npx yummacss build ``` -------------------------------- ### Install Yumma CSS Package Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/qwik.mdx Install the Yumma CSS package as a development dependency using npm. ```bash npm install yummacss -D ``` -------------------------------- ### HTML Scroll Snap Align Start Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/interactivity/scroll-snap-align.mdx This example demonstrates setting the scroll snap align to 'start'. The `ssa-s` utility class ensures that the element will snap to the start of the scroll container when scrolling. ```html

``` -------------------------------- ### Align Place Items to Start in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/box-model/place-items.mdx This example demonstrates how to align items to the start of a grid container using the `pi-s` utility class. Items will be positioned at the start of both axes. ```html

``` -------------------------------- ### HTML Grid Row Start Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/grid/grid-row.mdx Demonstrates how to control where a grid item begins on the grid rows using the `grs-2` class. The example shows an item starting at the second row line, positioning it to begin in the third row of the grid. ```html

``` -------------------------------- ### Align Place Self to Start in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/box-model/place-self.mdx This example sets the place self to start. The item will be aligned to the start of its grid area. ```html

``` -------------------------------- ### Qwik Component Example Using Yumma CSS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/qwik.mdx Example of a Qwik component demonstrating the usage of Yumma CSS utility classes for styling, such as background color, display grid, height, padding, and text color. ```tsx import { component$ } from "@builder.io/qwik"; export default component$(() => { return (

Yumma CSS ⚙️ Qwik

); }); ``` -------------------------------- ### Configure Yumma CSS Source and Output Paths Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/installation.mdx Specifies the input source files (e.g., TSX files) for scanning utility classes and defines the output path for the generated CSS file within the yumma.config.js configuration. ```javascript export default { source: ["./src/**/*.{ts,tsx}"], output: "./src/styles.css", buildOptions: { reset: true, minify: false } }; ``` -------------------------------- ### Install Yumma CSS with npm Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/blog/posts/meet-yummacss/meet-yummacss.mdx Installs Yumma CSS as a development dependency using npm, making it available for use in your project. ```bash npm install yummacss -D ``` -------------------------------- ### Install Yumma CSS package Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/astro.mdx Install the `yummacss` package as a development dependency using a package manager. ```bash yummacss -D ``` -------------------------------- ### Install Yumma CSS as Development Dependency Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/blog/releases/yummacss-3.0.0/yummacss-3.0.0.mdx Explains how to install `yummacss` as a development dependency, reflecting its new role as a CLI tool for generating CSS files rather than a standard runtime dependency. ```shell npm install yummacss -D ``` -------------------------------- ### Align Content: Flex Start in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/align-content.mdx This example sets the align content to flex-start. The items will be aligned to the start of the container. ```html

``` -------------------------------- ### Install Yumma CSS Package Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/solidjs.mdx Installs the Yumma CSS package as a development dependency using a package manager. ```bash yummacss -D ``` -------------------------------- ### HTML Grid Column Start Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/grid/grid-column.mdx Shows how to set the starting grid line for a grid item within the column layout using the `gcs-3` class. The item will begin at the third column line, positioning it to start in the third column of the grid. ```html

``` -------------------------------- ### Flex Start Justify Content (HTML) Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/justify-content.mdx This example sets the justify content to flex-start. The items will be aligned to the start of the container along the main axis. ```html

``` -------------------------------- ### Apply logical inline start padding in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/box-model/padding.mdx This example demonstrates how to set logical inline start padding of 2rem using the `pis-6` utility class. This padding maps to a physical padding based on the element's writing mode, directionality, and text orientation, typically appearing on the left side in a horizontal writing mode. ```html

``` -------------------------------- ### Install Yumma CSS Package Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/preact.mdx Commands to install the Yumma CSS package as a development dependency using various Node.js package managers. ```Bash npm install yummacss -D ``` ```Bash yarn add yummacss -D ``` ```Bash pnpm add yummacss -D ``` -------------------------------- ### Apply logical block start padding in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/box-model/padding.mdx This example demonstrates how to set logical block start padding of 2rem using the `pbs-6` utility class. This padding maps to a physical padding based on the element's writing mode, directionality, and text orientation, typically appearing at the top in a vertical writing mode. ```html

``` -------------------------------- ### Remove Old Yumma CSS Package Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/upgrade-guide.mdx Removes the existing Yumma CSS v2 package from your project using a package manager, preparing for the v3 installation. ```Terminal npm uninstall yummacss ``` -------------------------------- ### Install Yumma CSS Package Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/svelte.mdx Command to install the `yummacss` package as a development dependency using a package manager. This command is typically run in the terminal. ```bash yummacss -D ``` -------------------------------- ### Install Yumma CSS development dependency Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/nextjs.mdx Installs the Yumma CSS package as a development dependency using a package manager like npm, yarn, or pnpm. ```bash npm install yummacss -D ``` -------------------------------- ### Yumma CSS Responsive Grid Layout Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/blog/releases/yummacss-2.0.0/yummacss-2.0.0.mdx Illustrates the application of responsive utility classes for a grid layout. The example demonstrates how to dynamically change the number of grid columns based on different screen sizes (small, medium, large) using sm:gtc-2, md:gtc-3, and lg:gtc-4. ```html

...

``` -------------------------------- ### Initialize Yumma CSS Project Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Run the Yumma CLI `init` command to set up a new Yumma CSS project, creating necessary configuration files. ```shell npx yummacss init ``` -------------------------------- ### Clone Yumma CSS Qwik Starter Project Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/qwik.mdx Quickly set up a Qwik project pre-configured with Yumma CSS by cloning the official starter repository. ```bash git clone https://github.com/yumma-lib/with-qwik.git ``` -------------------------------- ### HTML Example: Setting 4 Columns with c-4 Utility Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/positioning/columns.mdx This example demonstrates how to use the 'c-4' utility class to divide an element's content into 4 equal columns. It shows a simple div containing four paragraphs, each styled with background, border-radius, text alignment, text color, and padding to visually represent the columns. ```html

``` -------------------------------- ### Clone Astro with Yumma CSS starter project Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/astro.mdx Quickly set up an Astro project pre-configured with Yumma CSS by cloning the official starter repository. ```bash git clone https://github.com/yumma-lib/with-astro.git ``` -------------------------------- ### Install Yumma CSS in React Project Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/react.mdx This command installs the Yumma CSS package as a development dependency in your React project using npm. ```bash npm install yummacss -D ``` -------------------------------- ### Yumma CSS Utility-First Styling Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Illustrates styling a button using Yumma CSS utility classes directly in HTML, showcasing its abbreviated naming convention for concise inline styles. ```html ``` -------------------------------- ### HTML Example: Applying a 2.5rem Gap with g-10 Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/grid/gap.mdx This HTML snippet illustrates the use of the `g-10` utility class to apply a uniform gap of 2.5rem between elements within a grid layout. The example showcases a grid container with five child divisions, demonstrating the visual effect of the applied gap. ```html

``` -------------------------------- ### HTML Flex Wrap Wrap Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/flex-wrap.mdx This example sets the flex wrap to wrap. The items will wrap onto multiple lines if there is not enough space in the container. ```html

``` -------------------------------- ### HTML Example: Setting Grid Template Rows Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/grid/grid-template-rows.mdx This HTML snippet demonstrates setting grid template rows to `repeat(3, minmax(0, 1fr))`. It creates a grid with 3 rows, each designed to grow equally, and populates it with example content. The `gtr-3` class applies the grid template row style, showcasing a basic grid layout with responsive row sizing. ```html

``` -------------------------------- ### Set Text Alignment to Start Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/typography/text/text-align.mdx This example sets the text alignment to `start`. The text will be aligned to the start of the container, which is typically side-to-right languages. ```html

Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live. I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to see you tomorrow night. I love you, and take care. — Vigo

``` -------------------------------- ### Build Yumma CSS Files Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Run the Yumma CLI `build` command to compile your Yumma CSS files once, generating the final CSS output. ```shell npx yummacss build ``` -------------------------------- ### Clone Nuxt.js Starter Project with Yumma CSS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/nuxtjs.mdx Quickly set up a Nuxt.js project pre-configured with Yumma CSS by cloning the official starter repository. This allows skipping manual setup steps. ```bash git clone https://github.com/yumma-lib/with-nuxtjs.git ``` -------------------------------- ### Update Float Utilities Shortening Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/upgrade-guide.mdx Demonstrates the shortening of the `float` utilities from `flo-*` to `fl-*` in Yumma CSS v3. ```html -

...

``` -------------------------------- ### Align Items: Flex Start Alignment in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/align-items.mdx This example sets the align items to flex-start. The items will be aligned to the start of the container. ```html

``` -------------------------------- ### Yumma CSS Configuration for ES Modules Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Configure Yumma CSS for ES Modules projects, specifying source and output paths, and build options like reset and minify. ```javascript export default { source: ["..."], output: "...", buildOptions: { reset: true, minify: false, }, }; ``` -------------------------------- ### Align Justify Items to Start in HTML Grid Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/justify-items.mdx Shows how to align grid items to the start of their inline axis using the `ji-s` class in an HTML grid. The example presents a basic grid container with three items aligned to the start. ```html

``` -------------------------------- ### Traditional CSS Styling Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Demonstrates styling a button element using traditional CSS with a `.button` class, including hover effects. ```html ``` -------------------------------- ### Set Float Property to Inline Start Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/positioning/float.mdx This example sets the float property to inline-start. The element will float to the start of the inline direction, which is typically the left side in left-to-right languages. ```html

``` -------------------------------- ### Yumma CSS Configuration for CommonJS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Configure Yumma CSS for CommonJS projects, specifying source and output paths, and build options like reset and minify. ```javascript module.exports = { source: ["..."], output: "...", buildOptions: { reset: true, minify: false, }, }; ``` -------------------------------- ### Update Dimension Utilities Shortening Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/upgrade-guide.mdx Demonstrates the shortening of `height` and `width` utilities from `dim-*` to `d-*` in Yumma CSS v3. ```html -

...

``` -------------------------------- ### Package.json Configuration for ES Modules Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Add `"type": "module"` to your `package.json` file to enable ES Modules support in your Node.js project. ```json { "type": "module" } ``` -------------------------------- ### Clone Vue.js Starter Project with Yumma CSS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/vuejs.mdx Quickly set up a pre-configured Vue.js project with Yumma CSS by cloning the official starter repository. ```bash git clone https://github.com/yumma-lib/with-vuejs.git ``` -------------------------------- ### Set logical block start margin with HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/box-model/margin.mdx Controls the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. This example sets the margin block start to 2rem. The element will have space above it. ```html

``` -------------------------------- ### Initialize Yumma CSS Configuration File Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/upgrade-guide.mdx Generates a new configuration file (e.g., `yumma.config.js`) for Yumma CSS v3 in your project, which is essential for defining source and output paths. ```Terminal npx yummacss init ``` -------------------------------- ### Set logical inline start margin with HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/box-model/margin.mdx Controls the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. This example sets the margin inline start to 2rem. The element will have space to its left. ```html

``` -------------------------------- ### Set Align Self to Flex-Start Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/align-self.mdx This example sets the align self to flex-start. The item will be aligned to the start of its container. ```html

``` -------------------------------- ### HTML Grid Row End Example Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/grid/grid-row.mdx Illustrates how to control where a grid item ends on the grid rows using the `gre-3` class. The example shows an item ending at the third row line, effectively spanning from its start to the second row line. ```html

``` -------------------------------- ### Initialize Yumma CSS Configuration File Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/blog/releases/yummacss-3.0.0/yummacss-3.0.0.mdx Create the `yummacss.config.js` file at the root of your project. This can be done manually or by running the `npx yummacss init` command, which generates a boilerplate configuration. ```bash npx yummacss init ``` -------------------------------- ### Clone Preact Starter Project with Yumma CSS Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/preact.mdx This command clones the official Yumma CSS Preact starter project from GitHub, allowing users to quickly set up a pre-configured environment without following manual integration steps. ```Bash git clone https://github.com/yumma-lib/with-preact.git ``` -------------------------------- ### Build Yumma CSS Styles Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/guides/qwik.mdx Generate the CSS output file based on your configuration and project files using the Yumma CSS build command. ```bash npx yummacss build ``` -------------------------------- ### Space Between Justify Content (HTML) Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/justify-content.mdx This example sets the justify content to space-between. The items will be evenly distributed in the container, with the first item at the start and the last item at the end. ```html

``` -------------------------------- ### Configure Yumma CSS Source Paths Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/get-started/first-steps.mdx Define an array of glob patterns for your template files (e.g., `.js`, `.tsx`, `.html`) in `yumma.config.js` to tell the CLI where to find utility classes. ```javascript export default { source: ["./src/**/*.html"], }; ``` -------------------------------- ### Align Content: Space Between in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/flexbox-grid/flexbox/align-content.mdx This example sets the align content to space-between. The items will be evenly distributed in the container with the first item at the start and the last item at the end. ```html

``` -------------------------------- ### Set Text Indent to 0px in HTML Source: https://github.com/yumma-lib/yumma-css-docs/blob/release/src/content/docs/core/typography/text/text-indent.mdx This example demonstrates setting the text indent to 0 pixels, resulting in no indentation at the start of the paragraph. It uses the `ti-0` utility class. ```html