Yumma CSS is a tool that scans your project files to generate and clean up any unused styles, ensuring your code remains as small as possible without any unnecessary bloat.
Features
Style Cleanup
Automatically scans your project files and removes unused styles, keeping your code to a minimal and efficient size.
CSS Intellisense
Provides intelligent code completion for CSS, allowing developers to see suggestions and autocomplete options as they type. This helps improve coding speed and accuracy by reducing the need for memorizing exact syntax.
Hover Providers
Offers hover information for media queries and pseudo classes, allowing developers to see details and documentation about CSS features when they hover over them with their cursor.
Utility Control
Offers enhanced control over CSS utilities such as Border and Outline, enabling developers to manage their styles more precisely and effectively.
Improved Default Rules
Enhances the base styles with improved default rules, providing a solid foundation for building consistent and visually appealing web designs.
All-new CLI tool
A new CLI tool that automatically compiles SCSS to CSS, scanning and removing unused CSS to optimize performance.
Over 50 new utility classes
Yumma CSS adds support for over 50 new utility classes covering backgrounds, borders, box models, effects, flexbox, interactivity, positioning, SVG, text, and transformations.
Faster build performance
The framework has been optimized for faster build times, reducing file sizes significantly by changing how utilities and modifiers are generated.
CLI Configuration Setup
Allows users to easily set up their Yumma CSS project by initializing a configuration file using npm, pnpm, or yarn.
CommonJS and ESM Support
Supports both CommonJS and ESM module systems for flexibility in project integration.
Glob Pattern Source Selection
Enables users to specify which files and subfolders the CLI should scan for CSS utilities using glob patterns.
Build and Watch Commands
Provides commands to compile CSS files and watch for changes, allowing for automatic recompilation as files change.
Build Options Control
Gives detailed control over build options like reset functionality and CSS file minification.
Intuitive Box Sizing
Utilizes a more intuitive box-sizing model to ensure consistent design by resetting default margins, paddings, and border styles.
Improved Font Smoothing
Enhances legibility by enabling font smoothing, setting default system fonts, and adding accessible line-heights.
Media Element Block Leveling
Ensures all media elements are block-level and limits their width to prevent layout breaks.
Form Element Reset
Resets all form element backgrounds and borders, inheriting fonts for consistency and usability.
Typography Enhancements
Improves text overflow handling, line wrapping for headings, and sets consistent font weights for bold text.
Dimension Control
Allows you to control the height and width of an element simultaneously with predefined utilities.
Max Dimension Control
Handles maximum height and width constraints for elements, ensuring they do not exceed specified sizes.
Min Dimension Control
Manages minimum height and width constraints, ensuring elements do not shrink below specified sizes.
Conditional Styles
Includes media and hover modifiers to apply CSS utilities based on screen size or other states like hover, empowering responsive design.
Height utilities
Offers a wide range of height utilities such as h-0 to h-100 for precise control over element height.
Max Height utilities
Provides max-height utilities max-h-0 to max-h-100 to set maximum height restrictions on elements.
Min Height utilities
Includes min-height utilities min-h-0 to min-h-100 to ensure minimum height requirements are met.
Responsive design modifiers
Allows for responsive and conditional styling using media and hover modifiers to target utilities at different screen sizes and states.
Margin utilities
Offers over 100 classes for precise margin control on all sides of an element, allowing for fine-tuning of layout and spacing.
Padding Utilities
Provides a comprehensive set of padding utility classes like p-0 to p-100 and p-auto, allowing developers to quickly apply specific padding to elements without writing custom CSS.
Responsive Breakpoints
Allows developers to apply different padding based on responsive breakpoints, enabling designs to adapt to different screen sizes easily using classes like sm:p-*, md:p-*, lg:p-*, etc.
Responsive Width Utilities
Offers a wide range of preset width classes from 0rem to 25rem, allowing developers to set element widths with precision using utility classes like w-16 for 4rem.
Max Width Control
Provides max-width utilities to limit how wide an element can stretch, crucial for responsive designs. Example classes like max-w-64 set maximum widths to prevent overflow.
Min Width Control
Ensures elements maintain at least a minimum width regardless of content, useful for maintaining layout consistency. Classes like min-w-16 enforce this.
Percentage-Based Width
Allows elements to take up full or half the container width using utilities like w-full and w-half, making layout adjustments simple.
Flex Utilities
Provides a range of flex utilities like f-1, f-2, and f-none to control how flex elements grow and shrink, making it easier to design responsive, flexible layouts.
Order Utilities
Provides utility classes to control the order of flex and grid items using properties like order: 0, order: 1, etc., and allows extreme positioning with order: -9999 or order: 9999.
Gap Utility
Provides classes to control spacing between elements, ranging from 0rem to 25rem, allowing precise control over the layout of grid and flexbox items.
Blur Utilities
Provides various pre-defined blur filter options to apply a blur effect on elements with different intensity levels using utility classes like f-b-none, f-b-xs, which apply no blur to slight blur, respectively.
Grayscale Filters
Applies different levels of grayscale effects to elements using simple utility classes like 'f-g-0', 'f-g-50', and 'f-g-100'. This allows for easy visual variations in color scheme.
Opacity Control
Provides a range of utility classes to control the opacity of an element from 0 to 1 in increments of 0.1, allowing for precise visibility customization.
Default Styling Utilities
Allows developers to leverage the default styling provided by browsers using utilities like 'a-auto' that set elements to use this default browser appearance.
Custom Styling Utilities
Provides utilities like 'a-none' to remove all default styles, giving developers the flexibility to apply custom styling to form elements.
Cursor Style Utilities
Offers a range of cursor style utilities such as auto, crosshair, default, pointer, and more, allowing developers to customize cursor behavior over elements.