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
oddbird avatar

oddbird/susy

0
View on GitHub↗
oddbird.net/susy↗

Susy

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 covers comprehensive grid mathematics, including column spanning logic and gutter width calculation, alongside responsive breakpoint integration for flexible layout construction. It further manages box sizing to maintain consistent cross-browser rendering.

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 Systems - Provides a responsive grid system that links mathematical layout definitions to media query breakpoints.
  • Sass Grid Frameworks - Provides a framework that uses Sass mixins and functions to automate responsive, fluid grid systems.
  • Compile-Time Layout Calculations - Automates complex grid mathematics during the Sass compilation process to generate static CSS values.
  • CSS Grid Computation Engines - Provides a system for performing complex mathematical layout calculations within stylesheets to ensure precise alignment.
  • Grid Dimension Calculators - Implements precise grid measurements and normalized layout calculations to eliminate manual arithmetic in CSS.
  • Grid Dimension Calculators - Computes precise column widths and gutter sizes that automatically adapt to specific viewport breakpoints.
  • Responsive Grid Layouts - Implements layout systems that adapt fluidly across screen sizes using calculated grid dimensions.
  • Grid Layout Systems - Provides a comprehensive CSS system for defining responsive grid structures with precise column and gutter control.
  • Visual Layout Debugging - Ships visual overlays of columns and baselines to verify layout alignment and rhythm directly in the browser.
  • Visual Debugging Overlays - Generates dedicated CSS layers that render column and baseline guides for browser-based alignment verification.
  • Grid Overlays - Offers background grid overlays to verify column alignment and baseline rhythm during development.
  • Column Spanning - Includes logic to calculate widths for elements that span multiple columns in standard or asymmetrical grids.
  • Context Scoping - Manages layout variables within specific scopes to maintain consistent spacing across nested elements.
  • Shorthand Parsers - Translates concise configuration strings into structured layout properties during the compilation process.
  • Grid Column Sizing - Provides utilities to compute column widths using fluid percentages, static units, or mathematical expressions.
  • Grid Systems - Responsive layout toolkit for Sass.
3,831 stars·348 forks·SCSS·BSD-3-Clause·12 views

Star history

Star history chart for oddbird/susyStar history chart for oddbird/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.

Frequently asked questions

What does oddbird/susy do?

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.

What are the main features of oddbird/susy?

The main features of oddbird/susy are: Responsive Grid Systems, Sass Grid Frameworks, Compile-Time Layout Calculations, CSS Grid Computation Engines, Grid Dimension Calculators, Responsive Grid Layouts, Grid Layout Systems, Visual Layout Debugging.

Which projects share features with oddbird/susy?

Projects with overlapping indexed features include: ericam/susy — Susy is a responsive grid framework and layout calculation engine for Sass. It provides a toolkit for building fluid… thoughtbot/neat — Neat is a Sass grid framework and responsive layout system used to build fluid, column-based web architectures. It… dhg/skeleton — Skeleton is a lightweight responsive CSS boilerplate and mobile-first framework. It provides a foundation for building… carbon-design-system/carbon — Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design… designmodo/flat-ui — Flat-UI is a collection of responsive UI toolkits and CSS libraries used to build websites and interactive web… bootflat/bootflat.github.io — Bootflat is a front-end component library and CSS framework extension that implements a flat-design aesthetic for web…

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.
  • ericam/susyericam avatar

    ericam/susy

    3,831View on GitHub↗

    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

    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
  • dhg/skeletondhg avatar

    dhg/Skeleton

    19,410View on GitHub↗

    Skeleton is a lightweight responsive CSS boilerplate and mobile-first framework. It provides a foundation for building mobile-friendly websites through a fluid 12-column grid system, a minimal CSS reset library to normalize browser defaults, and default styling for raw HTML elements. The project emphasizes a mobile-first development approach, using percentage-based widths and predefined media queries to progressively enhance layouts for larger screens. It includes a utility-first library of single-purpose classes to manage common layout tasks such as floating elements, clearing, and width con

    CSS
    View on GitHub↗19,410
  • bootflat/bootflat.github.iobootflat avatar

    bootflat/bootflat.github.io

    4,217View on GitHub↗

    Bootflat is a front-end component library and CSS framework extension that implements a flat-design aesthetic for web application styling. It provides a set of reusable interface elements and a mobile-first grid system to facilitate responsive web design. The project integrates design and development through a PSD-driven workflow, providing professional Photoshop component sets and curated color palettes for interface prototyping. Visual customization is handled via variable-based theme overrides for colors and fonts. The library covers a broad range of UI components, including form elements

    HTML
    View on GitHub↗4,217
Compare all 30 related projects→