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:
gutters mixin to apply gutters as margin or padding on an
element.outer keyword to include gutters in any returned width. This
replaces the Susy 1 space mixin.container function to return a given container’s width.auto keyword to any grid argument as a setting for
$container-width. This will use $column-width settings to
calculate a container, or fallback to 100%.show-columns and show-baseline keywords for controlling
background-grids. The show keyword will display both.gutter function now returns half-widths when using split or
inside gutters.prefix, suffix, pad,
pre, post, push, pull, and squish. They work pretty much
the way you expect them to, although there’s a small issue we’ll
be fixing in the next release (alpha 5).Backwards Incompatible Changes:
$isolate setting to $layout-method, which no longer
accepts a boolean, only the isolate and float keywords.$static setting to $layout-math, which no longer accepts
a boolean, only the static and fluid keywords. Fluid is used for
both Susy 1 fluid and magic styles, depending on the presence of
a $column-width setting.New Features:
bleed mixin. This works similar to bleed in Susy 1, but
accounts for gutters as well (unless you pass the no-gutters
keyword). Currently only inside gutters are being incorporated, but
that will be fixed along with the issue linked above.$last-flow setting to control the flow direction of
row-ending elements. It accepts either to of from. This is
similar to $omega-float in Susy 1.span mixin now accepts nested @content, so you can nest
styles directly in a new context.inside-static option for static gutters in otherwise fluid
grids.gutters mixin uses span syntax, accepts explicit gutter spans.Backwards Incompatible Changes:
grid-background, grid-overlay, grid-background-output, &
$grid-background-color have been renamed to remiain consistent and
avoid conflicts with Compass:
grid-background => background-gridgrid-overlay => overlay-gridgrid-background-output => background-grid-output$grid-background-color => $grid-color
We don’t have to choose between px and rem for spacing
There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions are well supported in CSS, we don’t have to choose.
It’s time to stop spreading this out-dated practice
Setting the box-sizing model to border-box is one of the few remaining CSS ‘resets’ used across most projects. But there are two common approaches, and the more popular choice will cause more problems than it solves.
What do all the numbers in our clamp() do?
There are multiple tools that can help create a fluid font-size calculation for CSS – generally expressed as a clamp() function combining em (or rem) with vw (or vi) units. But the results are difficult to understand at a glance, so I wanted to visualize what’s going on…