Susy was a responsive layout engine for Sass,
before flexbox and CSSgrid 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.
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.
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.
A huge thank you to the individuals and organizations
sponsoring OddBird’s open source work!
Blue-Footed Boobies
Common Loons
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!
Take your time with new CSS, but don’t sleep on the essentials
byMiriam Suzanneon
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.
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…
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.
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.
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!
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!
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!
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.
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.
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.
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?
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.
