Skip to main
Article

Susy Next, Alpha 4

Susy Next alpha 4 is now available.

I don’t have a lot of time to delve, but let me run through some of the changes and new features in Susy Next alpha 4 – as well as alpha 3, which never got a blog post. You can see the full list of changes in the Susy Next Changelog, and we’ll work on examples as we start writing docs.

If you haven’t already started using a Susy Next alpha, read the alpha 2 introduction first to get a sense of the new syntax and approach.

In addition to the new features, we’ve added comprehensive unit test tests using True, which we built for the occasion. We also have a set of complex nesting tests that show how things work in practice. Right now, the test folder provides the best documentation – with index.html showing the True results and ag.html showing several standard grid-types. Explore, download, and play!

New Features:

Backwards Incompatible Changes:

New Features:

Backwards Incompatible Changes:

Recent Articles

  1. A chain-link gate in black and white with a sign that says closed indefinitely, and a smaller warning with gruesome icons for entrapment (a person being smashed) and pinching (a hand going through gears)
    Article post type

    How do we move logical shorthands forward?

    There are several proposals, but one major road block

    We’re trying to make progress on shorthand syntax for CSS logical properties. But the path forward depends on where we hope to be a decade from now.

    see all Article posts
  2. block-size, inline-size, size?
    Article post type

    Support Logical Shorthands in CSS

    Can we get this process unstuck?

    The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years. Can we…

    see all Article posts
  3. A hand with painted nails placing a white square of paper into a 9 by 9 grid.
    Article post type

    Better Anchor Positioning with position-area

    It’s not just a shorthand for anchor()

    position-area might be my favorite part of the CSS Anchor Positioning spec, with a ton of features packed in to make things just… work. But there’s no magic here, just a few key parts that work well.

    see all Article posts