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.
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-grid
grid-overlay
=> overlay-grid
grid-background-output
=> background-grid-output
$grid-background-color
=> $grid-color
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.
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…
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.