awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
ericam avatar

ericam/susy

0
View on GitHub↗
oddbird.net/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.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

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.
3,831 stars·349 forks·SCSS·BSD-3-Clause·13 views

Star history

Star history chart for ericam/susyStar history chart for ericam/susy

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

Projects sharing features with Susy

These projects share indexed features with Susy. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • oddbird/susyoddbird avatar

    oddbird/susy

    3,831View on GitHub↗

    Susy is a Sass layout framework and grid computation engine designed to automate complex mathematical layout calculations within stylesheets. It functions as a responsive grid generator that calculates column widths, gutters, and spans based on customizable viewport breakpoints to ensure precise element alignment. The system includes a visual layout debugger that generates browser-based grid overlays to verify column alignment and baseline rhythm during development. It also provides utilities for creating repeating background colors and gradients using a template-based syntax. The framework

    SCSS
    View on GitHub↗3,831
  • thoughtbot/neatthoughtbot avatar

    thoughtbot/neat

    4,368View on GitHub↗

    Neat is a Sass grid framework and responsive layout system used to build fluid, column-based web architectures. It provides a structured approach to managing layout properties and global design settings through a central configuration map and a toolset of Sass mixins and functions. The system is distinguished by its ability to handle nested grid architectures, allowing flexible grids to be placed inside other grid containers while maintaining precise alignment and gutter control. It also includes development tools for frontend layout debugging that render background guide lines to visualize c

    Rubybourbonbourbon-familycss
    View on GitHub↗4,368
  • jalxob/cool-kittenjalxob avatar

    jalxob/cool-kitten

    1,373View on GitHub↗

    Cool-kitten is a web framework designed for building responsive layouts that incorporate multi-speed parallax scrolling effects and automated asset optimization. At its core, the project functions as a scroll-driven animation engine that synchronizes DOM element transformations with user scroll coordinates using custom easing functions. The framework integrates a fluid grid layout system alongside multi-speed layered parallax capabilities, enabling background elements to move at different relative speeds than foreground content to produce visual depth. Additionally, it includes build-time ass

    JavaScript
    View on GitHub↗1,373
  • haltu/muurihaltu avatar

    haltu/muuri

    10,954View on GitHub↗

    Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures. The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements. The system provides interactive capabilities for moving items between multiple containers, filtering visibility based

    JavaScriptbin-packingdnddrag-and-drop
    View on GitHub↗10,954
Compare all 30 related projects→

Frequently asked questions

What does ericam/susy do?

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.

What are the main features of ericam/susy?

The main features of ericam/susy are: Responsive Grid Layouts, Grid Dimension Calculators, Compile-Time Layout Calculations, Shorthand Parsers, Column Slice Extractions, Structure Definitions, Responsive Grid Frameworks, Fluid Grid Frameworks.

Which projects share features with ericam/susy?

Projects with overlapping indexed features include: oddbird/susy — Susy is a Sass layout framework and grid computation engine designed to automate complex mathematical layout… thoughtbot/neat — Neat is a Sass grid framework and responsive layout system used to build fluid, column-based web architectures. It… jalxob/cool-kitten — Cool-kitten is a web framework designed for building responsive layouts that incorporate multi-speed parallax… haltu/muuri — Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with… roylee0704/react-flexbox-grid — This project is a collection of React components that implement a responsive grid system using CSS Flexbox and CSS… sdras/cssgridgenerator — This project is a CSS grid layout generator and visual layout editor. It serves as a frontend development tool that…