Skip to main

Susy

CSS layout framework

  • npm

Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date.

Contact us for details »

Not everyone can play with the latest specs, and there will always be edge-cases that require manual grid-math. Susy3 is trimmed down to the most basic features: a lightweight library of functions that can be used along with float, or flexbox or any other CSS – anywhere, any time.

Susy is also available in the CodeKit editor, with 10% of your purchase going to Black Girls Code when you follow the link from our site. You can also still access Susy2 documentation if necessary.

A few of the sites (mobile & desktop) that were built with Susy

I like the idea of grids-on-demand, rather than a strict framework.

My experiments have left me impressed. The current state of CSS layout means that unless you like to spend a lot of time doing calculations something like Susy is really useful. The output CSS is pretty much what I’d come up with myself, which to me is the acid test for tool use.

If you’re interested in reading Sass poetry, be sure to look at Susy’s source code!

Susy & Zendesk have been getting along magically. It’s precisely what you need, and nothing more.

Learning Susy, by Zell Liew

Zell Liew wrote a great book to get you started with Susy. This book will teach you everything you need to know. After going through the book and videos, you’ll never have to pore over the documentation or spend hours searching through Stack Overflow to figure out how to make Susy work ever again.

Get the first seven chapters for free!

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Blue-Footed Boobies

Open Collective Avatar for benface

Common Loons

Open Collective Avatar for ScheppOpen Collective Avatar for Outline GbROpen Collective Avatar for Mat MarquisOpen Collective Avatar for ThijsOpen Collective Avatar for Paul van BuurenOpen Collective Avatar for JohannesOpen Collective Avatar for William KillerudOpen Collective Avatar for Nikita DubkoOpen Collective Avatar for Eric PortisOpen Collective Avatar for AnonymousOpen Collective Avatar for Nicolas ChevobbeOpen Collective Avatar for Pascal DuezOpen Collective Avatar for Tyson GachOpen Collective Avatar for Mayank

Sponsor OddBird’s OSS Work

We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!

2024 Posts

  1. see all Article posts
    A back hoe on the bank of the Suez, trying to free the Ever Given cargo ship
    Article post type

    Learn Grid Now, Container Queries Can Wait

    Take your time with new CSS, but don’t sleep on the essentials

    Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.

2021

  1. see all Podcast posts
    F-Word
    Podcast post type

    Container Queries & the CSSWG

    I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.

2019

  1. see all Talks & Workshops
    Giant pencil awarded to Miriam Suzanne for Best of CSS Dev Conf 2017
    Talk post type

    Don’t Use My Grid System

    It’s time to move past grid systems like Susy

    Past
    • – Boulder, CO

      Boulder Python

    • – San Francisco, CA

      Covalence Conf

2017

  1. Viewport size diagram
    Article post type

    Media Queries & Grid Settings

    Practical media helpers for Susy3

    Most grids change with the viewport – and Susy needs new settings at each breakpoint. Susy3 is designed without mixins for complete flexibility from project to project, but it can be useful to build additional tools and shortcuts as you go. Here are some snippets to help you get started…

    see all Article posts
  2. see all Article posts
    Flexible grid column layout
    Article post type

    Welcome to Susy3!

    Make grid systems your fallback plan

    We’re excited to introduce Susy 3.0, a major update to our popular grid-math calculator – now more focused and flexible than ever. Susy was designed to make layout math easy, without forcing you into generic patterns and ugly markup. But grid systems are on the way out, replaced by real CSS layout specs that live in the browser. With Susy3, we want to help make that a smooth transition.

  3. Narrow and wide spread column math
    Article post type

    Understanding ‘Spread’ in Susy3

    Susy 3.0 will be released in the next week, if all goes well, and there’s a lot to write about it. I wanted to start with a detailed overview of one core concept: spread.

    see all Article posts

2016

  1. Miriam Suzanne answers questions on SitePoint
    Link post type

    Sass Toolkits, Live Q&A

    I did a live Q&A at SitePoint in August, talking about: Customizing Susy for your projects Other ways to do layouts (and why you might not even need a toolkit) How to select a toolkit, or build your very own!

    see all Link posts
  2. Miriam Suzanne answers questions on SitePoint
    Link post type

    Sass Toolkits, Live Q&A

    I did a live Q&A at SitePoint talking about: Customizing Susy for your projects Other ways to do layouts (and why you might not even need a toolkit) How to select a toolkit, or build your very own!

    see all Link posts

2014

  1. see all Talks & Workshops
    Susy is not a grid system
    Talk post type

    Your Own Damn Susy System

    an introduction to the Susy layout toolkit

    Past
    • – Baltimore, MD

      Bmore Sass

    • – San Francisco, CA

      The Mixin

2013

  1. Article post type

    Susy Next, Alpha 5

    Susy Next alpha 5 is out, and loaded with changes. We now require Sass 3.3, we no longer require Compass, and there have been major syntax improvements. We’re getting real close to launch, and we’d love to know what you think. Play around, and let us know!

    see all Article posts
  2. Article post type

    Susy Next, Alpha 4

    Susy Next alpha 4 is now available.

    see all Article posts
  3. Article post type

    Susy Next, The Second Alpha

    Go download & play with it!

    We haven’t written full docs yet, and this blog post will be vastly incomplete, but I’ll give you a quick rundown of where we’re going. This is all open to change, of course. There’s a reason we’re still in alpha.

    see all Article posts
  4. Article post type

    Isolation and Bleed in Susy

    A few new features have landed in Susy 1.0.7, even as we work on more integrated syntaxes for 2.0. The isolate() and isolate-grid() mixins help you manage the worst effects of sub-pixel rounding, while bleed() helps you break items out of the box.

    see all Article posts
  5. Article post type

    Susy Next, The First Alpha

    Last night we released the very first alpha build of Susy Next. This release is extremely sparse. What we have built is a background ‘engine’ for calculating grid math. There are some rough first steps towards api and syntax, but they are more “proof of concept” experimentation than usable interface.

    see all Article posts
  6. see all Article posts
    Article post type

    Sass Layout in 2013 and the Future of Susy

    The web is littered with grid systems and ‘frameworks’ that force your code & design into narrowly defined patterns. Even the most semantic of us have had to push specialized techniques in order to create a usable syntax.

    But Sass has come a long way, and I’m convinced that it’s time for something new.

    What if you had a layout system that bends completely to the needs of your site? What if you could use one unified syntax for handling responsive layouts of any kind? What if you had a modular system that let you mix-and-match to customize for every site, and change your output with simple extensions?

2012

  1. Article post type

    Off-Canvas Layout with Susy

    The off-canvas layout pattern for responsive web design has been getting all the attention lately, and I’ve had several people ask how Susy One might play along. I’ll show you how easy it is, and how much flexibility Susy can add along the way.

    see all Article posts
  2. see all Article posts