- Fix more edge mixed-unit conflicts with
container-style: static
.
- Fix edge-case where
$container-style
and$container-width
cause conflict.
- Add
isolate
andisolate-grid
mixins. - Add
bleed
mixin. - Add
$style
argument to grid mixins. - Fix documentation typos.
- Switch from
#
to*
in legacy-ie hacks.
- Add support for rem-units.
- Clean-up quoted arguments.
- Fix a few bugs related to the override settings.
- Fix bug in nested mixins that adjust support (e.g.
nth-omeg
insideat-breakpoint
). - Remove non-ie experimental support in
at-breakpoint
ie-fallback output.
- Fix Compass dependencies.
- Fix a bug with
container-outer-width
ignoring$columns
argument. - Turn off legacy-ie support inside CSS3 selectors (
nth-omega
etc).
- Fix a bug in the relationship between
$container-width
and$border-box-sizing
, so that grid-padding is subtracted from the width in certain cases. - Reset right margin to
auto
rather than0
withremove-omega
.
This release is loaded with new features, but don't let that fool you. Susy just became shockingly simple to use. See the website for details.
The gem name has changed from compass-susy-plugin
to susy
.
First uninstall the old gem, then install the new one.
If you have both gems installed, you will get errors.
Semantics:
We re-arranged the code in order to make the syntax simpler and more consistent:
$total-cols
is now$total-columns
.$col-width
is now$column-width
.$side-gutter-width
is now$grid-padding
and gets applied directly to the grid container.un-column
&reset-column
mixins have merged intoreset-columns
.columns
has been renamedspan-columns
to resolve the conflict with CSS3 columns. See other improvements to span-columns below.
We also removed several bothersome requirements:
- The
alpha
mixin is no longer needed. Ever. - The
omega
no longer takes a$context
argument. full
has been removed entirely. Elements will be full-width by default. You can addclear: both;
back in as needed.side-gutter()
is no longer needed. You can use the$grid-padding
setting directly.
Upgrade:
That's all you need in order to upgrade from Susy 0.9.
- Uninstall and re-install the gem.
- Find and replace the semantic changes listed above.
You're done! Stop worrying about all that "nested vs. root" bullshit, and start playing with the new toys!
If you use the $from
directional arguments
directly in the span-columns
mixin,
there may be one more change to make.
See below:
New Features:
span-columns
supports new features:- "omega" can be applied directly through the
$columns
argument. - Internal padding can be added through the
$padding
argument. - This pushes the
$from
argument from third position into fourth.
- "omega" can be applied directly through the
at-breakpoint
allows you to change layouts at media breakpoints.container
accepts multiple media-layout combinations as a shortcut.layout
allows you to use a different layout at any time.with-grid-settings
allows you to change any or all grid settings.set-container-width
does what it says, without the other container code.$breakpoint-media-output
,$breakpoint-ie-output
, and$breakpoint-raw-output
settings help manage the different outputs fromat-breakpoint
when you have IE-overrides living in a file of their own.border-box-sizing
will apply the popular* { box-sizing: border-box }
universal box-model fix, as well as changing the Susy$border-box-model
setting for you, so Susy knows to adjust some math.- The
space()
function can be used anywhere you need column+gutter math. push
,pull
,pre
,post
, andsquish
mixins help manage margins.- use the
nth-omega
mixin to set omega on any nth-child, nth-of-type, first, last, or only element. remove-omega
andremove-nth-omega
will remove the omega-specific styles from an element.$container-width
will override the width of your container with any arbitrary length.$container-style
will override the type of grid container (magic, fluid, fixed, static, etc) to use.
Everything here is about simplicity. Susy has scaled back to it's most basic function: providing flexible grids. That is all.
Deprecated:
- The
susy/susy
import is deprecated in favor of simply importingsusy
. - The
show-grid
import is deprecated in favor of CSS3 gradient-based grid-images. You can now use thesusy-grid-background
mixin. See below.
Removed:
- Susy no longer imports all of compass.
- Susy no longer establishes your baseline and no longer provides a reset. All of that is in the Compass core. You can (and should!) keep using them, but you will need to import them from compass.
New:
- Use the
susy-grid-background
mixin on anycontainer
to display the grid. This toggles on and off with the same controls that are used by the compass grid-background module.
Deprecated:
- The
susy/reset
import has been deprecated in favor of the Compass corecompass/reset
import. - The
susy
mixin has been deprecated. If you plan to continue using vertical-rhythms, you should replace it with theestablish-baseline
mixin from the Compass Core.
Removed:
- The
vertical-rhythm
module has moved into compass core. The API remains the same, but if you were importing it directly, you will have to update that import. ($px2em
was removed as part of this, but didn't make it into core). - The
defaults
template has been removed as 'out-of-scope'. This will not effect upgrading in any way, but new projects will not get a template with default styles.
New Features:
- Susy now supports RTL grids and bi-directional sites using the
$from-direction
variable (default: left) and an optional additional from-direction argument on all affected mixins. Thanks to @bangpound for the initial implementation. - Susy is now written in pure Sass! No extra Ruby functions included! Thanks to the Sass team for making it possible.
- Fixed typos in tutorial and
_defaults.scss
Deprecated:
- The
skip-link
was deprecated as it doesn't belong in Susy. - All the IE-specific mixins have been deprecated, along with the
$hacks
variable. Hacks are now used in the default mixins as per Compass. - The
hide
mixin was deprecated in favor of the Compass codehide-text
mixin.
Other Changes:
inline-block-list
will be moved to the compass core soon. In preparation, I've cleaned it up some. You can now apply a padding of "0" to override previous padding arguments. You can also useinline-block-list-container
andinline-block-list-item
as you would with the Compasshorizontal-list
mixins.- The
$align
arguments have been removed from both thesusy
andcontainer
mixins. Text-alignment is no longer used or needed in achieving page centering. That was a cary-over from the IE5 Mac days. - The
container
mixin now uses thepie-clearfix
compass mixin to avoid setting the overflow to hidden. - Default styles have been cleaned up to account for better font stacks and typography, html5 elements, vertically-rhythmed forms, expanded print styles, use of
@extend
, and overall simplification.
- updated documentation
- Fixes a bug with grid.png and a typo in the readme. Nothing major here.
- template cleanup & simplification - no more pushing CSSEdit comments, etc.
- expanded base and defaults with better fonts & styles out-of-the-box
- expanded readme documentation. This will expand out into a larger docs/tutorial site in the next week.
- mostly syntax and gem cleanup
- added
un-column
mixin to reset elements previously declared as columns. - added
rhythm
mixin as shortcut for leaders/trailers. accepts 4 args: leader, padding-leader, padding-trailer, trailer. - added a warning on
alpha
to remind you thatalpha
is not needed at nested levels.
- Requires HAML 3 and Compass 0.10.0.rc2
- Internal syntax switched to scss. This will have little or no effect on users. You can still use Susy with either (Sass/Scss) syntax.
$default-rhythm-border-style
overrides default rhythm border styles- Better handling of sub-pixel rounding for IE6
- Added
+h-borders()
shortcut for vertical_rhythm+horizontal-borders()
- Fixed vertical rhythm font-size typo (thanks @oscarduignan)
- Added to template styles, so susy is already in place from the start
- Expanded and adjusted
_vertical_rhythm.sass
in ways that are not entirely backwards compatible. Check the file for details. _defaults.sass
is re-ordered from inline to block.:focus
defaults cleaned up.- README and docs updated.
Update: pre2 was missing a file in the manifest. Use pre4.
Update: Forgot to note one change: +susy
is no longer assigned to the body
tag, but instead at the top level of the document (not nested under anything).
Warning: This update is not backwards compatible. We've changed some things. You'll have to change some things. Our changes were fairly major in cleaning up the code - yours will be minor and also clean up some code.
Added:
- new
_vertical_rhythm.sass
(thanks to Chris Eppstein) provides better establishing of the baseline grid, as well as mixins to help you manage it. !px2em
has replacedpx2em()
- see below.
Removed:
px2em()
has been removed and replaced with a simple variable!px2em
which returns the size of one pixel relative to your basic em-height. Multiply against your desired px dimensions (i.e.border-width = !px2em*5px
will output the em-equivalent of 5px).!base_font_size_px
and!base_line_height_px
have been replaced with!base_font_size
and!base_line_height
which take advantage of sass's built-in unit handling.!grid_units
is not needed, as you can now declare your units directly in the other grid_width
variables. Use any one type of units in declaring your grid. The units you use will be used in setting the container size.
Once you've upgraded, before you compile your files, make these changes:
- remove the "_px" from the font-size and line-height variables, and add "px" to their values.
- remove the
!grid_units
variable and add units to your grid variable values. - find any uses of
px2em()
and replace them with something. - enjoy!
Not a lot of new functionality here – it all moved over to Compass 0.10.0 – mostly just cleaning it up to match.
- simplified the default styles and gave them their own project template (‘_defaults.sass’).
- defaults not imported by ‘ie.sass’, as ‘ie.sass’ should be cascading on top of ‘screen.sass’ anyway
- changed the syntax to match CSS and Compass (‘property:’ replaces ‘:property’)
- added more inline documentation and brought tutorial up to date
- moved CSS3 module over to Compass
- import the compass HTML5 reset along with the normal reset by default (because Susy loves the future)
- little internal management fixes and so on and so on…
- not documented here.
- check the commit log.