ericam/susy
Susy
Susy is a responsive grid framework and layout calculation engine for Sass. It provides a toolkit for building fluid or static column structures and gutter spacing directly within stylesheets, automating layout mathematics during the compilation phase to produce precise CSS properties.
The system distinguishes itself through a layout calculation engine that translates human-readable shorthand syntax into structured data for mathematical functions. It also includes a grid visualization tool that generates inline SVG background overlays to programmatically verify and debug grid alignment.
The framework covers wide-ranging grid capabilities, including column extraction for symmetrical and asymmetrical layouts, dimension calculations for element spans and gutters, and the management of nested layout contexts. It further provides utilities for grid configuration validation and settings management to maintain consistency across a project.
Features
- Responsive Grid Layouts - Implements layout systems that adapt fluidly across screen sizes using grid-based structures.
- Grid Dimension Calculators - Computes the width of grid-spanning elements based on the number of columns and the chosen gutter spread.
- Compile-Time Layout Calculations - Performs grid mathematics during the Sass compilation phase to produce static CSS values.
- Shorthand Parsers - Maps concise configuration strings into structured layout properties during the Sass compilation phase.
- Column Slice Extractions - Returns a specific list of columns based on a defined span or location within the layout grid.
- Structure Definitions - Allows developers to configure the number of columns and gap sizes using flexible or fixed measurements.
- Grid Dimension Calculators - Provides utilities for computing precise grid measurements and spacing values to eliminate manual arithmetic.
- Grid Dimension Calculators - Computes precise column widths, gutter sizes, and container spans based on custom settings.
- Responsive Grid Frameworks - Provides a system for defining fluid or static column structures and gutter spacing directly within stylesheets.
- Fluid Grid Frameworks - Provides a system for defining fluid, column-based structural frameworks using rows and outer containers.
- Sass Grid Frameworks - Uses Sass mixins and functions to automate the building of responsive, fluid grid systems.
- Rendering Debug Overlays - Generates visual SVG background overlays to inspect the internal state of the grid layout.
- Layout Gap Management - Manages the relationship between columns and gutters to control element alignment within containers.
- Grid Alignment Verifiers - Generates visual SVG overlays to verify the alignment and structure of grid elements.
- Grid Gutters - Retrieves the specific width of a single grid gutter for consistent margin and padding application.
- CSS Unit Converters - Provides utilities for calculating and translating size values between different CSS measurement units for responsive scaling.
- Grid Layout Visualizers - Provides a utility to generate SVG background overlays for visually verifying and debugging grid alignment.
- SVG Debug Overlays - Produces inline SVG data for use in backgrounds to help developers visualize and debug grid layouts.
- Configuration State Management - Merges global project defaults with local overrides to ensure consistent layout calculations across a site.
- Grid Offsetting Utilities - Provides functions for adjusting element positioning and internal spacing using grid-aligned margins and padding.
- Nested Grid Structures - Supports embedding grid containers within other grid cells to enable hierarchical layout inheritance.
- Gutter Management - Implements techniques for controlling the whitespace and distribution of gutters between grid columns.
- Grid Systems - Powerful, math-based grid system for custom responsive designs.
Star history
How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.
