Maintaining and scaling styles in CSS can be a lot of work, whether you're using inline or external styles. It can be really frustrating when you're trying to keep your designs consistently predictable, and most importantly, scalable. inline or external styles What is Yumma CSS? Think of Yumma CSS as a set of abbreviated utility classes for building faster and more maintainable UIs. Yumma CSS has a wide range of reusable utilities that you can apply to your design system to make it more consistent and less unpredictable. Yumma CSS Here's a reference example of the Yumma CSS utilities: CSS Property Yumma CSS Utility align-items: center; ai-c background-color: white; bg-white background-repeat: no-repeat; br-nr background-size: cover; bs-c border-color: black; bc-black border-radius: 0.5rem; rad-2 border-width: 1px; b-1 box-sizing: border-box; bs-bb display: flex; d-f filter: grayscale(100%); f-g-100 font-weight: 600; fw-600 gap: 1rem; g-4 grid-column: span 2 / span 2; gc-s-2 grid-template-columns: repeat(3, 1fr); gtc-3 height: auto; h-auto justify-content: space-between; jc-sb margin: 1rem; m-4 opacity: 0.5; o-50 outline-style: solid; os-s outline-width: 2px; ow-2 overflow: hidden; o-h padding: 0.5rem; p-2 text-align: center; ta-c text-color: white; tc-white width: 100%; w-full CSS Property Yumma CSS Utility align-items: center; ai-c background-color: white; bg-white background-repeat: no-repeat; br-nr background-size: cover; bs-c border-color: black; bc-black border-radius: 0.5rem; rad-2 border-width: 1px; b-1 box-sizing: border-box; bs-bb display: flex; d-f filter: grayscale(100%); f-g-100 font-weight: 600; fw-600 gap: 1rem; g-4 grid-column: span 2 / span 2; gc-s-2 grid-template-columns: repeat(3, 1fr); gtc-3 height: auto; h-auto justify-content: space-between; jc-sb margin: 1rem; m-4 opacity: 0.5; o-50 outline-style: solid; os-s outline-width: 2px; ow-2 overflow: hidden; o-h padding: 0.5rem; p-2 text-align: center; ta-c text-color: white; tc-white width: 100%; w-full CSS Property Yumma CSS Utility CSS Property CSS Property Yumma CSS Utility Yumma CSS Utility align-items: center; ai-c align-items: center; align-items: center; align-items: center; ai-c ai-c ai-c background-color: white; bg-white background-color: white; background-color: white; background-color: white; bg-white bg-white bg-white background-repeat: no-repeat; br-nr background-repeat: no-repeat; background-repeat: no-repeat; background-repeat: no-repeat; br-nr br-nr br-nr background-size: cover; bs-c background-size: cover; background-size: cover; background-size: cover; bs-c bs-c bs-c border-color: black; bc-black border-color: black; border-color: black; border-color: black; bc-black bc-black bc-black border-radius: 0.5rem; rad-2 border-radius: 0.5rem; border-radius: 0.5rem; border-radius: 0.5rem; rad-2 rad-2 rad-2 border-width: 1px; b-1 border-width: 1px; border-width: 1px; border-width: 1px; b-1 b-1 b-1 box-sizing: border-box; bs-bb box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; bs-bb bs-bb bs-bb display: flex; d-f display: flex; display: flex; display: flex; d-f d-f d-f filter: grayscale(100%); f-g-100 filter: grayscale(100%); filter: grayscale(100%); filter: grayscale(100%); f-g-100 f-g-100 f-g-100 font-weight: 600; fw-600 font-weight: 600; font-weight: 600; font-weight: 600; fw-600 fw-600 fw-600 gap: 1rem; g-4 gap: 1rem; gap: 1rem; gap: 1rem; g-4 g-4 g-4 grid-column: span 2 / span 2; gc-s-2 grid-column: span 2 / span 2; grid-column: span 2 / span 2; grid-column: span 2 / span 2; gc-s-2 gc-s-2 gc-s-2 grid-template-columns: repeat(3, 1fr); gtc-3 grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); gtc-3 gtc-3 gtc-3 height: auto; h-auto height: auto; height: auto; height: auto; h-auto h-auto h-auto justify-content: space-between; jc-sb justify-content: space-between; justify-content: space-between; justify-content: space-between; jc-sb jc-sb jc-sb margin: 1rem; m-4 margin: 1rem; margin: 1rem; margin: 1rem; m-4 m-4 m-4 opacity: 0.5; o-50 opacity: 0.5; opacity: 0.5; opacity: 0.5; o-50 o-50 o-50 outline-style: solid; os-s outline-style: solid; outline-style: solid; outline-style: solid; os-s os-s os-s outline-width: 2px; ow-2 outline-width: 2px; outline-width: 2px; outline-width: 2px; ow-2 ow-2 ow-2 overflow: hidden; o-h overflow: hidden; overflow: hidden; overflow: hidden; o-h o-h o-h padding: 0.5rem; p-2 padding: 0.5rem; padding: 0.5rem; padding: 0.5rem; p-2 p-2 p-2 text-align: center; ta-c text-align: center; text-align: center; text-align: center; ta-c ta-c ta-c text-color: white; tc-white text-color: white; text-color: white; text-color: white; tc-white tc-white tc-white width: 100%; w-full width: 100%; width: 100%; width: 100%; w-full w-full w-full Using Flexbox utilities Let’s look at a classic layout case: centering with flexbox. Using inline styles <div style="align-items: center; display: flex; justify-content: center;"> ... </div> <div style="align-items: center; display: flex; justify-content: center;"> ... </div> Using external styles p { align-items: center; display: flex; justify-content: center; } p { align-items: center; display: flex; justify-content: center; } Using Yumma CSS Using Yumma CSS <div class="ai-c d-f jc-c">...</div> <div class="ai-c d-f jc-c">...</div> You end up with the same result, but the code is much shorter, more reusable, and way easier to grow. You can use consistent patterns like m-{n} or bg-{color} to get faster prototyping directly in markup without writing the traditional inline or external styles. m-{n} bg-{color} Overriding styles conditionally So, let's say you use a specific utility in your markup and you want to override its value based on the user's screen size or other factors, such as hover states. screen size hover states Yumma CSS hooks you up with utility modifiers that let you target use cases like sm:*, md:*, lg:*, and xxl:* to target a specific viewport, and h:* to target hover states. utility modifiers sm:* md:* lg:* xxl:* h:* Media queries Let's take a look at how we can use media queries to change the layout of a grid based on the size of the screen. Using external styles .container { display: grid; gap: 4rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .container { grid-template-columns: repeat(3, 1fr); } } .container { display: grid; gap: 4rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .container { grid-template-columns: repeat(3, 1fr); } } Using Yumma CSS <div class="d-g g-16 gtc-1 sm:gtc-3"> <div class="bg-indigo d-16"></div> <div class="bg-indigo d-16"></div> <div class="bg-indigo d-16"></div> </div> <div class="d-g g-16 gtc-1 sm:gtc-3"> <div class="bg-indigo d-16"></div> <div class="bg-indigo d-16"></div> <div class="bg-indigo d-16"></div> </div> Hover states Also, you can control hover states with Yumma CSS. For example, if you want to hide an element when the user hovers over it, you can use the h:* modifier. hover states h:* Using external styles .flex { display: flex; } .hidden:hover { display: none; } .flex { display: flex; } .hidden:hover { display: none; } Using Yumma CSS <div class="d-g g-16 gtc-1 sm:gtc-3"> <div class="ai-c bg-indigo d-16 d-f h:d-none jc-c"></div> </div> <div class="d-g g-16 gtc-1 sm:gtc-3"> <div class="ai-c bg-indigo d-16 d-f h:d-none jc-c"></div> </div> Getting started Try Yumma CSS with npm or in your browser on Yumma CSS Play. Yumma CSS with npm Yumma CSS Play npm install yummacss -D npm install yummacss -D Closing thoughts With Yumma CSS, you get a set of abbreviated utilities designed to make your design system easier to maintain and extend, so you can focus on creating reusable UI components. Yumma CSS Learn more about Yumma CSS, in the documentation. in the documentation
