A design-agnostic Sass toolkit for building custom responsive grid layouts with pure functions.
Susy is a Sass-based responsive layout toolkit that provides functions for building custom grid systems. It solves the problem of rigid grid frameworks by offering design-agnostic tools that let developers create tailored layouts without unnecessary restrictions. The toolkit separates core grid math (Su layer) from syntax-sugar conveniences (Susy layer) for flexible usage.
Frontend developers and designers working with Sass who need to build custom, responsive grid layouts beyond what standard CSS frameworks offer.
Developers choose Susy for its pure function approach that grants complete control over grid math, enabling highly customized layouts without the bloat of opinionated frameworks. Its design-agnostic philosophy makes it adaptable to any project's unique requirements.
Pre-grid responsive layout toolkit for Sass, now deprecated
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows building any grid system without pre-defined constraints, enabling tailored layouts that fit specific design needs, as emphasized in its philosophy.
Core grid-math functions (Su layer) use normalized values for precise control, letting developers handle complex layout logic directly, as outlined in the Su vs Susy section.
Focuses on providing tools rather than opinions, adapting to any design requirement, which is central to its value proposition for custom systems.
The Susy layer offers shorthand parsing and global defaults, simplifying common tasks while maintaining flexibility, as described in the README's layer distinction.
Explicitly marked as deprecated in the README, meaning no future updates, bug fixes, or official support, making it risky for long-term or new projects.
Integration requires specific configuration with build tools like Webpack, Gulp, or Grunt, as detailed in the installation section, which can be cumbersome compared to drop-in CSS solutions.
With the widespread adoption of CSS Grid and Flexbox, the need for Sass-based grid toolkits has diminished, reducing its utility in contemporary frontend workflows.