Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog

Yumma CSS Next

Beta documentation

It looks like you’re just as excited as we are about what’s to come in the next version of Yumma CSS! We can’t wait to show you what we’ve got in store. Get ready, because the next version of Yumma CSS is going to be amazing!

Yumma CSS Next

Yumma CSS CLI

Up until recently, the only way to use Yumma CSS was to import the compiled CSS into your main CSS file. As Yumma CSS is becoming more and more extensive, importing all its content at once might cause performance issues and slower loading times.

We’re really excited to introduce Yumma CSS CLI, an awesome new way to create production-ready and fully optimized Yumma CSS projects.

Dependency Changes

If you’re planning on using the command-line interface feature, we suggest installing yummacss as a dev dependency. The reason is simple: we’re now compiling SCSS from the yummacss package to our project to get the minimal amount of CSS possible.

Terminal window
npm i yummacss@latest --save-dev

The full set of utilities will be retained within the distribution folder for the purpose of facilitating the importation of the entire Yumma utilities suite, should this be required.

  • Directorydist
    • yumma.css
    • yumma.min.css

Upgrade from v2.1

The new CLI system lets you compile and get rid of any unused utilities you’re not using in your Yumma CSS project, which means smaller CSS files and better performance.

  1. Remove @import rules

    The CLI works by compiling SCSS to CSS, so there’s no need to import the Yumma CSS package dependency.

    src/globals.css
    /* Minified Version */
    @import "/node_modules/yummacss/dist/yumma.min.css";

  2. Add the Yumma config file

    Next, add the yummacss.config.js to the root level of your project.

    • Directorypublic
      • favicon.ico
    • Directorysrc
      • globals.css
      • page.html
    • .gitignore
    • package-lock.json
    • package.json
    • yummacss.config.js // Add the config file

  3. Set up the config file

    To allow the CLI command to scan your project files and build the CSS base in the output path, add the content array and output string field.

    yummacss.config.js
    export const config = {
        content: ["src/**/*.{html}"],
        output: "src/globals.css",
    };

  4. Compile the SCSS

    To compile the SCSS from to CSS, just run npx yummacss build. This command will only compile the used CSS that’s been scanned in your project files each time you run the command. It’ll also tree shake any unusable utilities in your code.

    Terminal
    npx yummacss build

Core Changes

From now on, core files like yumma-core.css and yumma-core.min.css will be deleted from the /dist folder in favor of the yummacss.config.js config file.

yummacss.config.js
export const config = {
    content: ["src/**/*.{html}"],
    output: "src/globals.css",
    capabilities: {
        core: false, // Disable base styles
        minify: true, // Minifies CSS
    }
};

Performance Boost

We completely overhauled the codebase to get better performance in build times and overall file size. We changing the way utilities and modifiers are generated, to eliminate any potential for duplicated or unnecessary data in the /dist folder.

Metricv2.1v3.0Improvement
Complete build13.88 s??????
File size (standard)3.21 MB??????
File size (minified)2.48 MB??????
Utilities coverage108175+67

New Colors

The colors are getting some big changes. We’ve gone from 10% shade modification to 14%. This means that light colors are going to be even lighter and dark colors are going to be even darker.

1
2
3
4
5
6
Base
1
2
3
4
5
6
Red
Orange
Yellow
Green
Teal
Cyan
Blue
Indigo
Violet
Pink
Lead
Gray
Silver

All-new Utilities

To make the Yumma CSS framework as complete as possible, we’re adding support for over 60 utility classes to the core of the framework.

Backgrounds

  • Background Attachment
  • Background Clip
  • Background Origin
  • Background Position
  • Background Repeat
  • Background Size

Borders

  • Border Spacing

Box Model

  • Margin Block End
  • Margin Block Start
  • Margin Inline End
  • Margin Inline Start
  • Padding Block End
  • Padding Block Start
  • Padding Inline End
  • Padding Inline Start
  • Place Content
  • Place Items
  • Place Self

Flexbox

  • Order

Effect

  • Blur
  • Box Decoration Break
  • Grayscale

Interactivity

  • Scroll Behavior
  • Scroll Margin
  • Scroll Margin Bottom
  • Scroll Margin Inline End
  • Scroll Margin Inline Start
  • Scroll Margin Left
  • Scroll Margin Right
  • Scroll Margin Top
  • Scroll Margin X
  • Scroll Margin Y
  • Scroll Padding
  • Scroll Padding Bottom
  • Scroll Padding Inline End
  • Scroll Padding Inline Start
  • Scroll Padding Left
  • Scroll Padding Right
  • Scroll Padding Top
  • Scroll Padding X
  • Scroll Padding Y
  • Scroll Snap Align
  • Scroll Snap Stop
  • Scroll Snap Type

Layout

  • Clear
  • Direction (Axis)
  • Isolation

SVG

  • Fill
  • Stroke
  • Stroke Width

Text

  • Letter Spacing
  • List Style Position
  • Text Indent
  • Text Overflow
  • Text Transform
  • Text Underline Offset
  • Text Wrap
  • Vertical Align
  • Whitespace

Transforms & Transitions

  • Rotate
  • Scale
  • Skew
  • Transform Origin
  • Transition Delay
  • Transition Duration
  • Transition Property
  • Translate

Goodbye Inset

We’re removing the ins utility class from Yumma. It’s been a great ride, and we’re sure most of you have used it to easily center a div in the middle of the screen. But to keep things modern and flexible, this concept doesn’t fit into the framework, so we’ve decided to remove it.

Syntax Changes

We’re making Yumma CSS even more concise with the utility classes to keep everything minimal. Here are some of the new changes we’ve got planned:

Dimension

Class Properties

d-0

 height: 0rem; width: 0rem;

d-1

 height: 0.25rem; width: 0.25rem;

d-2

 height: 0.5rem; width: 0.5rem;

d-3

 height: 0.75rem; width: 0.75rem;

d-4

 height: 1rem; width: 1rem;

d-5

 height: 1.25rem; width: 1.25rem;

d-6

 height: 1.5rem; width: 1.5rem;

d-7

 height: 1.75rem; width: 1.75rem;

d-8

 height: 2rem; width: 2rem;

d-9

 height: 2.25rem; width: 2.25rem;

d-10

 height: 2.5rem; width: 2.5rem;

d-11

 height: 2.75rem; width: 2.75rem;

d-12

 height: 3rem; width: 3rem;

d-13

 height: 3.25rem; width: 3.25rem;

d-14

 height: 3.5rem; width: 3.5rem;

d-15

 height: 3.75rem; width: 3.75rem;

d-16

 height: 4rem; width: 4rem;

d-17

 height: 4.25rem; width: 4.25rem;

d-18

 height: 4.5rem; width: 4.5rem;

d-19

 height: 4.75rem; width: 4.75rem;

d-20

 height: 5rem; width: 5rem;

d-21

 height: 5.25rem; width: 5.25rem;

d-22

 height: 5.5rem; width: 5.5rem;

d-23

 height: 5.75rem; width: 5.75rem;

d-24

 height: 6rem; width: 6rem;

d-25

 height: 6.25rem; width: 6.25rem;

d-26

 height: 6.5rem; width: 6.5rem;

d-27

 height: 6.75rem; width: 6.75rem;

d-28

 height: 7rem; width: 7rem;

d-29

 height: 7.25rem; width: 7.25rem;

d-30

 height: 7.5rem; width: 7.5rem;

d-31

 height: 7.75rem; width: 7.75rem;

d-32

 height: 8rem; width: 8rem;

d-33

 height: 8.25rem; width: 8.25rem;

d-34

 height: 8.5rem; width: 8.5rem;

d-35

 height: 8.75rem; width: 8.75rem;

d-36

 height: 9rem; width: 9rem;

d-37

 height: 9.25rem; width: 9.25rem;

d-38

 height: 9.5rem; width: 9.5rem;

d-39

 height: 9.75rem; width: 9.75rem;

d-40

 height: 10rem; width: 10rem;

d-41

 height: 10.25rem; width: 10.25rem;

d-42

 height: 10.5rem; width: 10.5rem;

d-43

 height: 10.75rem; width: 10.75rem;

d-44

 height: 11rem; width: 11rem;

d-45

 height: 11.25rem; width: 11.25rem;

d-46

 height: 11.5rem; width: 11.5rem;

d-47

 height: 11.75rem; width: 11.75rem;

d-48

 height: 12rem; width: 12rem;

d-49

 height: 12.25rem; width: 12.25rem;

d-50

 height: 12.5rem; width: 12.5rem;

d-51

 height: 12.75rem; width: 12.75rem;

d-52

 height: 13rem; width: 13rem;

d-53

 height: 13.25rem; width: 13.25rem;

d-54

 height: 13.5rem; width: 13.5rem;

d-55

 height: 13.75rem; width: 13.75rem;

d-56

 height: 14rem; width: 14rem;

d-57

 height: 14.25rem; width: 14.25rem;

d-58

 height: 14.5rem; width: 14.5rem;

d-59

 height: 14.75rem; width: 14.75rem;

d-60

 height: 15rem; width: 15rem;

d-61

 height: 15.25rem; width: 15.25rem;

d-62

 height: 15.5rem; width: 15.5rem;

d-63

 height: 15.75rem; width: 15.75rem;

d-64

 height: 16rem; width: 16rem;

d-65

 height: 16.25rem; width: 16.25rem;

d-66

 height: 16.5rem; width: 16.5rem;

d-67

 height: 16.75rem; width: 16.75rem;

d-68

 height: 17rem; width: 17rem;

d-69

 height: 17.25rem; width: 17.25rem;

d-70

 height: 17.5rem; width: 17.5rem;

d-71

 height: 17.75rem; width: 17.75rem;

d-72

 height: 18rem; width: 18rem;

d-73

 height: 18.25rem; width: 18.25rem;

d-74

 height: 18.5rem; width: 18.5rem;

d-75

 height: 18.75rem; width: 18.75rem;

d-76

 height: 19rem; width: 19rem;

d-77

 height: 19.25rem; width: 19.25rem;

d-78

 height: 19.5rem; width: 19.5rem;

d-79

 height: 19.75rem; width: 19.75rem;

d-80

 height: 20rem; width: 20rem;

d-81

 height: 20.25rem; width: 20.25rem;

d-82

 height: 20.5rem; width: 20.5rem;

d-83

 height: 20.75rem; width: 20.75rem;

d-84

 height: 21rem; width: 21rem;

d-85

 height: 21.25rem; width: 21.25rem;

d-86

 height: 21.5rem; width: 21.5rem;

d-87

 height: 21.75rem; width: 21.75rem;

d-88

 height: 22rem; width: 22rem;

d-89

 height: 22.25rem; width: 22.25rem;

d-90

 height: 22.5rem; width: 22.5rem;

d-91

 height: 22.75rem; width: 22.75rem;

d-92

 height: 23rem; width: 23rem;

d-93

 height: 23.25rem; width: 23.25rem;

d-94

 height: 23.5rem; width: 23.5rem;

d-95

 height: 23.75rem; width: 23.75rem;

d-96

 height: 24rem; width: 24rem;

d-97

 height: 24.25rem; width: 24.25rem;

d-98

 height: 24.5rem; width: 24.5rem;

d-99

 height: 24.75rem; width: 24.75rem;

d-100

 height: 25rem; width: 25rem;

d-1/1

 height: 100dvh; width: 100dvh;

d-1/2

 height: 50dvh; width: 50dvh;

d-auto

 height: auto; width: auto;

d-fc

 height: fit-content; width: fit-content;

d-full

 height: 100%; width: 100%;

d-half

 height: 50%; width: 50%;

d-max

 height: max-content; width: max-content;

d-min

 height: min-content; width: min-content;

Max Dimension

Class Properties

max-d-0

 max-height: 0rem; max-width: 0rem;

max-d-1

 max-height: 0.25rem; max-width: 0.25rem;

max-d-2

 max-height: 0.5rem; max-width: 0.5rem;

max-d-3

 max-height: 0.75rem; max-width: 0.75rem;

max-d-4

 max-height: 1rem; max-width: 1rem;

max-d-5

 max-height: 1.25rem; max-width: 1.25rem;

max-d-6

 max-height: 1.5rem; max-width: 1.5rem;

max-d-7

 max-height: 1.75rem; max-width: 1.75rem;

max-d-8

 max-height: 2rem; max-width: 2rem;

max-d-9

 max-height: 2.25rem; max-width: 2.25rem;

max-d-10

 max-height: 2.5rem; max-width: 2.5rem;

max-d-11

 max-height: 2.75rem; max-width: 2.75rem;

max-d-12

 max-height: 3rem; max-width: 3rem;

max-d-13

 max-height: 3.25rem; max-width: 3.25rem;

max-d-14

 max-height: 3.5rem; max-width: 3.5rem;

max-d-15

 max-height: 3.75rem; max-width: 3.75rem;

max-d-16

 max-height: 4rem; max-width: 4rem;

max-d-17

 max-height: 4.25rem; max-width: 4.25rem;

max-d-18

 max-height: 4.5rem; max-width: 4.5rem;

max-d-19

 max-height: 4.75rem; max-width: 4.75rem;

max-d-20

 max-height: 5rem; max-width: 5rem;

max-d-21

 max-height: 5.25rem; max-width: 5.25rem;

max-d-22

 max-height: 5.5rem; max-width: 5.5rem;

max-d-23

 max-height: 5.75rem; max-width: 5.75rem;

max-d-24

 max-height: 6rem; max-width: 6rem;

max-d-25

 max-height: 6.25rem; max-width: 6.25rem;

max-d-26

 max-height: 6.5rem; max-width: 6.5rem;

max-d-27

 max-height: 6.75rem; max-width: 6.75rem;

max-d-28

 max-height: 7rem; max-width: 7rem;

max-d-29

 max-height: 7.25rem; max-width: 7.25rem;

max-d-30

 max-height: 7.5rem; max-width: 7.5rem;

max-d-31

 max-height: 7.75rem; max-width: 7.75rem;

max-d-32

 max-height: 8rem; max-width: 8rem;

max-d-33

 max-height: 8.25rem; max-width: 8.25rem;

max-d-34

 max-height: 8.5rem; max-width: 8.5rem;

max-d-35

 max-height: 8.75rem; max-width: 8.75rem;

max-d-36

 max-height: 9rem; max-width: 9rem;

max-d-37

 max-height: 9.25rem; max-width: 9.25rem;

max-d-38

 max-height: 9.5rem; max-width: 9.5rem;

max-d-39

 max-height: 9.75rem; max-width: 9.75rem;

max-d-40

 max-height: 10rem; max-width: 10rem;

max-d-41

 max-height: 10.25rem; max-width: 10.25rem;

max-d-42

 max-height: 10.5rem; max-width: 10.5rem;

max-d-43

 max-height: 10.75rem; max-width: 10.75rem;

max-d-44

 max-height: 11rem; max-width: 11rem;

max-d-45

 max-height: 11.25rem; max-width: 11.25rem;

max-d-46

 max-height: 11.5rem; max-width: 11.5rem;

max-d-47

 max-height: 11.75rem; max-width: 11.75rem;

max-d-48

 max-height: 12rem; max-width: 12rem;

max-d-49

 max-height: 12.25rem; max-width: 12.25rem;

max-d-50

 max-height: 12.5rem; max-width: 12.5rem;

max-d-51

 max-height: 12.75rem; max-width: 12.75rem;

max-d-52

 max-height: 13rem; max-width: 13rem;

max-d-53

 max-height: 13.25rem; max-width: 13.25rem;

max-d-54

 max-height: 13.5rem; max-width: 13.5rem;

max-d-55

 max-height: 13.75rem; max-width: 13.75rem;

max-d-56

 max-height: 14rem; max-width: 14rem;

max-d-57

 max-height: 14.25rem; max-width: 14.25rem;

max-d-58

 max-height: 14.5rem; max-width: 14.5rem;

max-d-59

 max-height: 14.75rem; max-width: 14.75rem;

max-d-60

 max-height: 15rem; max-width: 15rem;

max-d-61

 max-height: 15.25rem; max-width: 15.25rem;

max-d-62

 max-height: 15.5rem; max-width: 15.5rem;

max-d-63

 max-height: 15.75rem; max-width: 15.75rem;

max-d-64

 max-height: 16rem; max-width: 16rem;

max-d-65

 max-height: 16.25rem; max-width: 16.25rem;

max-d-66

 max-height: 16.5rem; max-width: 16.5rem;

max-d-67

 max-height: 16.75rem; max-width: 16.75rem;

max-d-68

 max-height: 17rem; max-width: 17rem;

max-d-69

 max-height: 17.25rem; max-width: 17.25rem;

max-d-70

 max-height: 17.5rem; max-width: 17.5rem;

max-d-71

 max-height: 17.75rem; max-width: 17.75rem;

max-d-72

 max-height: 18rem; max-width: 18rem;

max-d-73

 max-height: 18.25rem; max-width: 18.25rem;

max-d-74

 max-height: 18.5rem; max-width: 18.5rem;

max-d-75

 max-height: 18.75rem; max-width: 18.75rem;

max-d-76

 max-height: 19rem; max-width: 19rem;

max-d-77

 max-height: 19.25rem; max-width: 19.25rem;

max-d-78

 max-height: 19.5rem; max-width: 19.5rem;

max-d-79

 max-height: 19.75rem; max-width: 19.75rem;

max-d-80

 max-height: 20rem; max-width: 20rem;

max-d-81

 max-height: 20.25rem; max-width: 20.25rem;

max-d-82

 max-height: 20.5rem; max-width: 20.5rem;

max-d-83

 max-height: 20.75rem; max-width: 20.75rem;

max-d-84

 max-height: 21rem; max-width: 21rem;

max-d-85

 max-height: 21.25rem; max-width: 21.25rem;

max-d-86

 max-height: 21.5rem; max-width: 21.5rem;

max-d-87

 max-height: 21.75rem; max-width: 21.75rem;

max-d-88

 max-height: 22rem; max-width: 22rem;

max-d-89

 max-height: 22.25rem; max-width: 22.25rem;

max-d-90

 max-height: 22.5rem; max-width: 22.5rem;

max-d-91

 max-height: 22.75rem; max-width: 22.75rem;

max-d-92

 max-height: 23rem; max-width: 23rem;

max-d-93

 max-height: 23.25rem; max-width: 23.25rem;

max-d-94

 max-height: 23.5rem; max-width: 23.5rem;

max-d-95

 max-height: 23.75rem; max-width: 23.75rem;

max-d-96

 max-height: 24rem; max-width: 24rem;

max-d-97

 max-height: 24.25rem; max-width: 24.25rem;

max-d-98

 max-height: 24.5rem; max-width: 24.5rem;

max-d-99

 max-height: 24.75rem; max-width: 24.75rem;

max-d-100

 max-height: 25rem; max-width: 25rem;

max-d-1/1

 max-height: 100dvh; max-width: 100dvh;

max-d-1/2

 max-height: 50dvh; max-width: 50dvh;

max-d-auto

 max-height: auto; max-width: auto;

max-d-fc

 max-height: fit-content; max-width: fit-content;

max-d-full

 max-height: 100%; max-width: 100%;

max-d-half

 max-height: 50%; max-width: 50%;

max-d-max

 max-height: max-content; max-width: max-content;

max-d-min

 max-height: min-content; max-width: min-content;

Min Dimension

Class Properties

min-d-0

 min-height: 0rem; min-width: 0rem;

min-d-1

 min-height: 0.25rem; min-width: 0.25rem;

min-d-2

 min-height: 0.5rem; min-width: 0.5rem;

min-d-3

 min-height: 0.75rem; min-width: 0.75rem;

min-d-4

 min-height: 1rem; min-width: 1rem;

min-d-5

 min-height: 1.25rem; min-width: 1.25rem;

min-d-6

 min-height: 1.5rem; min-width: 1.5rem;

min-d-7

 min-height: 1.75rem; min-width: 1.75rem;

min-d-8

 min-height: 2rem; min-width: 2rem;

min-d-9

 min-height: 2.25rem; min-width: 2.25rem;

min-d-10

 min-height: 2.5rem; min-width: 2.5rem;

min-d-11

 min-height: 2.75rem; min-width: 2.75rem;

min-d-12

 min-height: 3rem; min-width: 3rem;

min-d-13

 min-height: 3.25rem; min-width: 3.25rem;

min-d-14

 min-height: 3.5rem; min-width: 3.5rem;

min-d-15

 min-height: 3.75rem; min-width: 3.75rem;

min-d-16

 min-height: 4rem; min-width: 4rem;

min-d-17

 min-height: 4.25rem; min-width: 4.25rem;

min-d-18

 min-height: 4.5rem; min-width: 4.5rem;

min-d-19

 min-height: 4.75rem; min-width: 4.75rem;

min-d-20

 min-height: 5rem; min-width: 5rem;

min-d-21

 min-height: 5.25rem; min-width: 5.25rem;

min-d-22

 min-height: 5.5rem; min-width: 5.5rem;

min-d-23

 min-height: 5.75rem; min-width: 5.75rem;

min-d-24

 min-height: 6rem; min-width: 6rem;

min-d-25

 min-height: 6.25rem; min-width: 6.25rem;

min-d-26

 min-height: 6.5rem; min-width: 6.5rem;

min-d-27

 min-height: 6.75rem; min-width: 6.75rem;

min-d-28

 min-height: 7rem; min-width: 7rem;

min-d-29

 min-height: 7.25rem; min-width: 7.25rem;

min-d-30

 min-height: 7.5rem; min-width: 7.5rem;

min-d-31

 min-height: 7.75rem; min-width: 7.75rem;

min-d-32

 min-height: 8rem; min-width: 8rem;

min-d-33

 min-height: 8.25rem; min-width: 8.25rem;

min-d-34

 min-height: 8.5rem; min-width: 8.5rem;

min-d-35

 min-height: 8.75rem; min-width: 8.75rem;

min-d-36

 min-height: 9rem; min-width: 9rem;

min-d-37

 min-height: 9.25rem; min-width: 9.25rem;

min-d-38

 min-height: 9.5rem; min-width: 9.5rem;

min-d-39

 min-height: 9.75rem; min-width: 9.75rem;

min-d-40

 min-height: 10rem; min-width: 10rem;

min-d-41

 min-height: 10.25rem; min-width: 10.25rem;

min-d-42

 min-height: 10.5rem; min-width: 10.5rem;

min-d-43

 min-height: 10.75rem; min-width: 10.75rem;

min-d-44

 min-height: 11rem; min-width: 11rem;

min-d-45

 min-height: 11.25rem; min-width: 11.25rem;

min-d-46

 min-height: 11.5rem; min-width: 11.5rem;

min-d-47

 min-height: 11.75rem; min-width: 11.75rem;

min-d-48

 min-height: 12rem; min-width: 12rem;

min-d-49

 min-height: 12.25rem; min-width: 12.25rem;

min-d-50

 min-height: 12.5rem; min-width: 12.5rem;

min-d-51

 min-height: 12.75rem; min-width: 12.75rem;

min-d-52

 min-height: 13rem; min-width: 13rem;

min-d-53

 min-height: 13.25rem; min-width: 13.25rem;

min-d-54

 min-height: 13.5rem; min-width: 13.5rem;

min-d-55

 min-height: 13.75rem; min-width: 13.75rem;

min-d-56

 min-height: 14rem; min-width: 14rem;

min-d-57

 min-height: 14.25rem; min-width: 14.25rem;

min-d-58

 min-height: 14.5rem; min-width: 14.5rem;

min-d-59

 min-height: 14.75rem; min-width: 14.75rem;

min-d-60

 min-height: 15rem; min-width: 15rem;

min-d-61

 min-height: 15.25rem; min-width: 15.25rem;

min-d-62

 min-height: 15.5rem; min-width: 15.5rem;

min-d-63

 min-height: 15.75rem; min-width: 15.75rem;

min-d-64

 min-height: 16rem; min-width: 16rem;

min-d-65

 min-height: 16.25rem; min-width: 16.25rem;

min-d-66

 min-height: 16.5rem; min-width: 16.5rem;

min-d-67

 min-height: 16.75rem; min-width: 16.75rem;

min-d-68

 min-height: 17rem; min-width: 17rem;

min-d-69

 min-height: 17.25rem; min-width: 17.25rem;

min-d-70

 min-height: 17.5rem; min-width: 17.5rem;

min-d-71

 min-height: 17.75rem; min-width: 17.75rem;

min-d-72

 min-height: 18rem; min-width: 18rem;

min-d-73

 min-height: 18.25rem; min-width: 18.25rem;

min-d-74

 min-height: 18.5rem; min-width: 18.5rem;

min-d-75

 min-height: 18.75rem; min-width: 18.75rem;

min-d-76

 min-height: 19rem; min-width: 19rem;

min-d-77

 min-height: 19.25rem; min-width: 19.25rem;

min-d-78

 min-height: 19.5rem; min-width: 19.5rem;

min-d-79

 min-height: 19.75rem; min-width: 19.75rem;

min-d-80

 min-height: 20rem; min-width: 20rem;

min-d-81

 min-height: 20.25rem; min-width: 20.25rem;

min-d-82

 min-height: 20.5rem; min-width: 20.5rem;

min-d-83

 min-height: 20.75rem; min-width: 20.75rem;

min-d-84

 min-height: 21rem; min-width: 21rem;

min-d-85

 min-height: 21.25rem; min-width: 21.25rem;

min-d-86

 min-height: 21.5rem; min-width: 21.5rem;

min-d-87

 min-height: 21.75rem; min-width: 21.75rem;

min-d-88

 min-height: 22rem; min-width: 22rem;

min-d-89

 min-height: 22.25rem; min-width: 22.25rem;

min-d-90

 min-height: 22.5rem; min-width: 22.5rem;

min-d-91

 min-height: 22.75rem; min-width: 22.75rem;

min-d-92

 min-height: 23rem; min-width: 23rem;

min-d-93

 min-height: 23.25rem; min-width: 23.25rem;

min-d-94

 min-height: 23.5rem; min-width: 23.5rem;

min-d-95

 min-height: 23.75rem; min-width: 23.75rem;

min-d-96

 min-height: 24rem; min-width: 24rem;

min-d-97

 min-height: 24.25rem; min-width: 24.25rem;

min-d-98

 min-height: 24.5rem; min-width: 24.5rem;

min-d-99

 min-height: 24.75rem; min-width: 24.75rem;

min-d-100

 min-height: 25rem; min-width: 25rem;

min-d-1/1

 min-height: 100dvh; min-width: 100dvh;

min-d-1/2

 min-height: 50dvh; min-width: 50dvh;

min-d-auto

 min-height: auto; min-width: auto;

min-d-fc

 min-height: fit-content; min-width: fit-content;

min-d-full

 min-height: 100%; min-width: 100%;

min-d-half

 min-height: 50%; min-width: 50%;

min-d-max

 min-height: max-content; min-width: max-content;

min-d-min

 min-height: min-content; min-width: min-content;

Spacing X

Class Properties

sx-0

 margin-left: 0rem; margin-right: 0rem;

sx-1

 margin-left: 0.25rem; margin-right: 0.25rem;

sx-2

 margin-left: 0.5rem; margin-right: 0.5rem;

sx-3

 margin-left: 0.75rem; margin-right: 0.75rem;

sx-4

 margin-left: 1rem; margin-right: 1rem;

sx-5

 margin-left: 1.25rem; margin-right: 1.25rem;

sx-6

 margin-left: 1.5rem; margin-right: 1.5rem;

sx-7

 margin-left: 1.75rem; margin-right: 1.75rem;

sx-8

 margin-left: 2rem; margin-right: 2rem;

sx-9

 margin-left: 2.25rem; margin-right: 2.25rem;

sx-10

 margin-left: 2.5rem; margin-right: 2.5rem;

sx-11

 margin-left: 2.75rem; margin-right: 2.75rem;

sx-12

 margin-left: 3rem; margin-right: 3rem;

sx-13

 margin-left: 3.25rem; margin-right: 3.25rem;

sx-14

 margin-left: 3.5rem; margin-right: 3.5rem;

sx-15

 margin-left: 3.75rem; margin-right: 3.75rem;

sx-16

 margin-left: 4rem; margin-right: 4rem;

sx-17

 margin-left: 4.25rem; margin-right: 4.25rem;

sx-18

 margin-left: 4.5rem; margin-right: 4.5rem;

sx-19

 margin-left: 4.75rem; margin-right: 4.75rem;

sx-20

 margin-left: 5rem; margin-right: 5rem;

sx-21

 margin-left: 5.25rem; margin-right: 5.25rem;

sx-22

 margin-left: 5.5rem; margin-right: 5.5rem;

sx-23

 margin-left: 5.75rem; margin-right: 5.75rem;

sx-24

 margin-left: 6rem; margin-right: 6rem;

sx-25

 margin-left: 6.25rem; margin-right: 6.25rem;

sx-26

 margin-left: 6.5rem; margin-right: 6.5rem;

sx-27

 margin-left: 6.75rem; margin-right: 6.75rem;

sx-28

 margin-left: 7rem; margin-right: 7rem;

sx-29

 margin-left: 7.25rem; margin-right: 7.25rem;

sx-30

 margin-left: 7.5rem; margin-right: 7.5rem;

sx-31

 margin-left: 7.75rem; margin-right: 7.75rem;

sx-32

 margin-left: 8rem; margin-right: 8rem;

sx-33

 margin-left: 8.25rem; margin-right: 8.25rem;

sx-34

 margin-left: 8.5rem; margin-right: 8.5rem;

sx-35

 margin-left: 8.75rem; margin-right: 8.75rem;

sx-36

 margin-left: 9rem; margin-right: 9rem;

sx-37

 margin-left: 9.25rem; margin-right: 9.25rem;

sx-38

 margin-left: 9.5rem; margin-right: 9.5rem;

sx-39

 margin-left: 9.75rem; margin-right: 9.75rem;

sx-40

 margin-left: 10rem; margin-right: 10rem;

sx-41

 margin-left: 10.25rem; margin-right: 10.25rem;

sx-42

 margin-left: 10.5rem; margin-right: 10.5rem;

sx-43

 margin-left: 10.75rem; margin-right: 10.75rem;

sx-44

 margin-left: 11rem; margin-right: 11rem;

sx-45

 margin-left: 11.25rem; margin-right: 11.25rem;

sx-46

 margin-left: 11.5rem; margin-right: 11.5rem;

sx-47

 margin-left: 11.75rem; margin-right: 11.75rem;

sx-48

 margin-left: 12rem; margin-right: 12rem;

sx-49

 margin-left: 12.25rem; margin-right: 12.25rem;

sx-50

 margin-left: 12.5rem; margin-right: 12.5rem;

sx-51

 margin-left: 12.75rem; margin-right: 12.75rem;

sx-52

 margin-left: 13rem; margin-right: 13rem;

sx-53

 margin-left: 13.25rem; margin-right: 13.25rem;

sx-54

 margin-left: 13.5rem; margin-right: 13.5rem;

sx-55

 margin-left: 13.75rem; margin-right: 13.75rem;

sx-56

 margin-left: 14rem; margin-right: 14rem;

sx-57

 margin-left: 14.25rem; margin-right: 14.25rem;

sx-58

 margin-left: 14.5rem; margin-right: 14.5rem;

sx-59

 margin-left: 14.75rem; margin-right: 14.75rem;

sx-60

 margin-left: 15rem; margin-right: 15rem;

sx-61

 margin-left: 15.25rem; margin-right: 15.25rem;

sx-62

 margin-left: 15.5rem; margin-right: 15.5rem;

sx-63

 margin-left: 15.75rem; margin-right: 15.75rem;

sx-64

 margin-left: 16rem; margin-right: 16rem;

sx-65

 margin-left: 16.25rem; margin-right: 16.25rem;

sx-66

 margin-left: 16.5rem; margin-right: 16.5rem;

sx-67

 margin-left: 16.75rem; margin-right: 16.75rem;

sx-68

 margin-left: 17rem; margin-right: 17rem;

sx-69

 margin-left: 17.25rem; margin-right: 17.25rem;

sx-70

 margin-left: 17.5rem; margin-right: 17.5rem;

sx-71

 margin-left: 17.75rem; margin-right: 17.75rem;

sx-72

 margin-left: 18rem; margin-right: 18rem;

sx-73

 margin-left: 18.25rem; margin-right: 18.25rem;

sx-74

 margin-left: 18.5rem; margin-right: 18.5rem;

sx-75

 margin-left: 18.75rem; margin-right: 18.75rem;

sx-76

 margin-left: 19rem; margin-right: 19rem;

sx-77

 margin-left: 19.25rem; margin-right: 19.25rem;

sx-78

 margin-left: 19.5rem; margin-right: 19.5rem;

sx-79

 margin-left: 19.75rem; margin-right: 19.75rem;

sx-80

 margin-left: 20rem; margin-right: 20rem;

sx-81

 margin-left: 20.25rem; margin-right: 20.25rem;

sx-82

 margin-left: 20.5rem; margin-right: 20.5rem;

sx-83

 margin-left: 20.75rem; margin-right: 20.75rem;

sx-84

 margin-left: 21rem; margin-right: 21rem;

sx-85

 margin-left: 21.25rem; margin-right: 21.25rem;

sx-86

 margin-left: 21.5rem; margin-right: 21.5rem;

sx-87

 margin-left: 21.75rem; margin-right: 21.75rem;

sx-88

 margin-left: 22rem; margin-right: 22rem;

sx-89

 margin-left: 22.25rem; margin-right: 22.25rem;

sx-90

 margin-left: 22.5rem; margin-right: 22.5rem;

sx-91

 margin-left: 22.75rem; margin-right: 22.75rem;

sx-92

 margin-left: 23rem; margin-right: 23rem;

sx-93

 margin-left: 23.25rem; margin-right: 23.25rem;

sx-94

 margin-left: 23.5rem; margin-right: 23.5rem;

sx-95

 margin-left: 23.75rem; margin-right: 23.75rem;

sx-96

 margin-left: 24rem; margin-right: 24rem;

sx-97

 margin-left: 24.25rem; margin-right: 24.25rem;

sx-98

 margin-left: 24.5rem; margin-right: 24.5rem;

sx-99

 margin-left: 24.75rem; margin-right: 24.75rem;

sx-100

 margin-left: 25rem; margin-right: 25rem;

Spacing Y

Class Properties

sy-0

 margin-bottom: 0rem; margin-top: 0rem;

sy-1

 margin-bottom: 0.25rem; margin-top: 0.25rem;

sy-2

 margin-bottom: 0.5rem; margin-top: 0.5rem;

sy-3

 margin-bottom: 0.75rem; margin-top: 0.75rem;

sy-4

 margin-bottom: 1rem; margin-top: 1rem;

sy-5

 margin-bottom: 1.25rem; margin-top: 1.25rem;

sy-6

 margin-bottom: 1.5rem; margin-top: 1.5rem;

sy-7

 margin-bottom: 1.75rem; margin-top: 1.75rem;

sy-8

 margin-bottom: 2rem; margin-top: 2rem;

sy-9

 margin-bottom: 2.25rem; margin-top: 2.25rem;

sy-10

 margin-bottom: 2.5rem; margin-top: 2.5rem;

sy-11

 margin-bottom: 2.75rem; margin-top: 2.75rem;

sy-12

 margin-bottom: 3rem; margin-top: 3rem;

sy-13

 margin-bottom: 3.25rem; margin-top: 3.25rem;

sy-14

 margin-bottom: 3.5rem; margin-top: 3.5rem;

sy-15

 margin-bottom: 3.75rem; margin-top: 3.75rem;

sy-16

 margin-bottom: 4rem; margin-top: 4rem;

sy-17

 margin-bottom: 4.25rem; margin-top: 4.25rem;

sy-18

 margin-bottom: 4.5rem; margin-top: 4.5rem;

sy-19

 margin-bottom: 4.75rem; margin-top: 4.75rem;

sy-20

 margin-bottom: 5rem; margin-top: 5rem;

sy-21

 margin-bottom: 5.25rem; margin-top: 5.25rem;

sy-22

 margin-bottom: 5.5rem; margin-top: 5.5rem;

sy-23

 margin-bottom: 5.75rem; margin-top: 5.75rem;

sy-24

 margin-bottom: 6rem; margin-top: 6rem;

sy-25

 margin-bottom: 6.25rem; margin-top: 6.25rem;

sy-26

 margin-bottom: 6.5rem; margin-top: 6.5rem;

sy-27

 margin-bottom: 6.75rem; margin-top: 6.75rem;

sy-28

 margin-bottom: 7rem; margin-top: 7rem;

sy-29

 margin-bottom: 7.25rem; margin-top: 7.25rem;

sy-30

 margin-bottom: 7.5rem; margin-top: 7.5rem;

sy-31

 margin-bottom: 7.75rem; margin-top: 7.75rem;

sy-32

 margin-bottom: 8rem; margin-top: 8rem;

sy-33

 margin-bottom: 8.25rem; margin-top: 8.25rem;

sy-34

 margin-bottom: 8.5rem; margin-top: 8.5rem;

sy-35

 margin-bottom: 8.75rem; margin-top: 8.75rem;

sy-36

 margin-bottom: 9rem; margin-top: 9rem;

sy-37

 margin-bottom: 9.25rem; margin-top: 9.25rem;

sy-38

 margin-bottom: 9.5rem; margin-top: 9.5rem;

sy-39

 margin-bottom: 9.75rem; margin-top: 9.75rem;

sy-40

 margin-bottom: 10rem; margin-top: 10rem;

sy-41

 margin-bottom: 10.25rem; margin-top: 10.25rem;

sy-42

 margin-bottom: 10.5rem; margin-top: 10.5rem;

sy-43

 margin-bottom: 10.75rem; margin-top: 10.75rem;

sy-44

 margin-bottom: 11rem; margin-top: 11rem;

sy-45

 margin-bottom: 11.25rem; margin-top: 11.25rem;

sy-46

 margin-bottom: 11.5rem; margin-top: 11.5rem;

sy-47

 margin-bottom: 11.75rem; margin-top: 11.75rem;

sy-48

 margin-bottom: 12rem; margin-top: 12rem;

sy-49

 margin-bottom: 12.25rem; margin-top: 12.25rem;

sy-50

 margin-bottom: 12.5rem; margin-top: 12.5rem;

sy-51

 margin-bottom: 12.75rem; margin-top: 12.75rem;

sy-52

 margin-bottom: 13rem; margin-top: 13rem;

sy-53

 margin-bottom: 13.25rem; margin-top: 13.25rem;

sy-54

 margin-bottom: 13.5rem; margin-top: 13.5rem;

sy-55

 margin-bottom: 13.75rem; margin-top: 13.75rem;

sy-56

 margin-bottom: 14rem; margin-top: 14rem;

sy-57

 margin-bottom: 14.25rem; margin-top: 14.25rem;

sy-58

 margin-bottom: 14.5rem; margin-top: 14.5rem;

sy-59

 margin-bottom: 14.75rem; margin-top: 14.75rem;

sy-60

 margin-bottom: 15rem; margin-top: 15rem;

sy-61

 margin-bottom: 15.25rem; margin-top: 15.25rem;

sy-62

 margin-bottom: 15.5rem; margin-top: 15.5rem;

sy-63

 margin-bottom: 15.75rem; margin-top: 15.75rem;

sy-64

 margin-bottom: 16rem; margin-top: 16rem;

sy-65

 margin-bottom: 16.25rem; margin-top: 16.25rem;

sy-66

 margin-bottom: 16.5rem; margin-top: 16.5rem;

sy-67

 margin-bottom: 16.75rem; margin-top: 16.75rem;

sy-68

 margin-bottom: 17rem; margin-top: 17rem;

sy-69

 margin-bottom: 17.25rem; margin-top: 17.25rem;

sy-70

 margin-bottom: 17.5rem; margin-top: 17.5rem;

sy-71

 margin-bottom: 17.75rem; margin-top: 17.75rem;

sy-72

 margin-bottom: 18rem; margin-top: 18rem;

sy-73

 margin-bottom: 18.25rem; margin-top: 18.25rem;

sy-74

 margin-bottom: 18.5rem; margin-top: 18.5rem;

sy-75

 margin-bottom: 18.75rem; margin-top: 18.75rem;

sy-76

 margin-bottom: 19rem; margin-top: 19rem;

sy-77

 margin-bottom: 19.25rem; margin-top: 19.25rem;

sy-78

 margin-bottom: 19.5rem; margin-top: 19.5rem;

sy-79

 margin-bottom: 19.75rem; margin-top: 19.75rem;

sy-80

 margin-bottom: 20rem; margin-top: 20rem;

sy-81

 margin-bottom: 20.25rem; margin-top: 20.25rem;

sy-82

 margin-bottom: 20.5rem; margin-top: 20.5rem;

sy-83

 margin-bottom: 20.75rem; margin-top: 20.75rem;

sy-84

 margin-bottom: 21rem; margin-top: 21rem;

sy-85

 margin-bottom: 21.25rem; margin-top: 21.25rem;

sy-86

 margin-bottom: 21.5rem; margin-top: 21.5rem;

sy-87

 margin-bottom: 21.75rem; margin-top: 21.75rem;

sy-88

 margin-bottom: 22rem; margin-top: 22rem;

sy-89

 margin-bottom: 22.25rem; margin-top: 22.25rem;

sy-90

 margin-bottom: 22.5rem; margin-top: 22.5rem;

sy-91

 margin-bottom: 22.75rem; margin-top: 22.75rem;

sy-92

 margin-bottom: 23rem; margin-top: 23rem;

sy-93

 margin-bottom: 23.25rem; margin-top: 23.25rem;

sy-94

 margin-bottom: 23.5rem; margin-top: 23.5rem;

sy-95

 margin-bottom: 23.75rem; margin-top: 23.75rem;

sy-96

 margin-bottom: 24rem; margin-top: 24rem;

sy-97

 margin-bottom: 24.25rem; margin-top: 24.25rem;

sy-98

 margin-bottom: 24.5rem; margin-top: 24.5rem;

sy-99

 margin-bottom: 24.75rem; margin-top: 24.75rem;

sy-100

 margin-bottom: 25rem; margin-top: 25rem;