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.
Note that the gem name has changed from
omegacan now be set directly through the
columnsmixin for much more compact output.
- Create responsive grid break-points using
containermixin now accepts one or more grids/breakpoints as a shortcut.
- All mixins respect your
spacefunction can be used anywhere you need column+gutter math.
squishadd margin left/right shortcuts.
nth-omegamixin can be used to set omega on any nth-child, nth-of-type, first, last, or only element - using pseudo-class selectors.
remove-nth-omegawill remove the omega-specific styles from an element, returning it to the regular grid flow.
$container-stylesettings will override the width and type (magic, fluid, fixed, static, etc) of your grid container.
$breakpoint-raw-outputallow you to turn on and off the different outputs from
at-breakpoint. This is useful when you have IE-overrides living in a file of their own.
- Unit tests live in the
- Apply the
border-box-sizingmixin at the root of your document to set the border-box model on all elements (universal selector), and Susy will make all the necessary grid adjustments.
- Change the grid settings for a block of code using the
@include columns($columns, $context, $from)=>
@include span-columns($columns, $context, $padding, $from)
@include alphais no longer needed.
@include omegano longer accepts the
@include fullcan be replaced by a simple
clear: both;when needed.
side-gutter()is no longer needed. Use
- Fix bug in susy-background-grid for fluid sites.
- Fix minor bug with repeated 'display' properties.
- Lower Compass dependency to 0.12.2
- Add Sass dependency at 3.2.0
susyin it's place.
- Find and replace the 5 simple "Changed API's" listed above.
- Remove the
$contextargument from all
- Remove any mention of
fullin your code.
clear: both;where necessary.
- Remove any mention of
- This may require some refactoring, depending on your uses.
- [Optional] Any time 'columns' and 'omega' are declared in the same block,
they can now be joined together.
@include columns(3); @include omega();can become
@include columns(3 omega).
You're done! Stop worrying about all that "nested vs. root" bullshit, and start playing with the new toys!
Everything here is about simplicity. Susy has scaled back to it's most basic function: providing flexible grids. That is all.
susy/susyimport is deprecated in favor of simply importing
show-gridimport is deprecated in favor of CSS3 gradient-based grid-images. You can now use the
susy-grid-backgroundmixin. See below.
- 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.
- Use the
susy-grid-backgroundmixin on any
containerto display the grid. This toggles on and off with the same controls that are used by the compass grid-background module.
susy/resetimport has been deprecated in favor of the Compass core
susymixin has been deprecated. If you plan to continue using vertical-rhythms, you should replace it with the
establish-baselinemixin from the Compass Core.
vertical-rhythmmodule has moved into compass core. The API remains the same, but if you were importing it directly, you will have to update that import. (
$px2emwas removed as part of this, but didn't make it into core).
defaultstemplate 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.
- Susy now supports RTL grids and bi-directional sites using the
$from-directionvariable (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
skip-linkwas deprecated as it doesn't belong in Susy.
- All the IE-specific mixins have been deprecated, along with the
$hacksvariable. Hacks are now used in the default mixins as per Compass.
hidemixin was deprecated in favor of the Compass code
inline-block-listwill 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 use
inline-block-list-itemas you would with the Compass
$alignarguments have been removed from both the
containermixins. Text-alignment is no longer used or needed in achieving page centering. That was a cary-over from the IE5 Mac days.
containermixin now uses the
pie-clearfixcompass 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
un-columnmixin to reset elements previously declared as columns.
rhythmmixin as shortcut for leaders/trailers. accepts 4 args: leader, padding-leader, padding-trailer, trailer.
- added a warning on
alphato remind you that
alphais 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-styleoverrides default rhythm border styles
- Better handling of sub-pixel rounding for IE6
+h-borders()shortcut for vertical_rhythm
- 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.sassin ways that are not entirely backwards compatible. Check the file for details.
_defaults.sassis re-ordered from inline to block.
:focusdefaults 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.
_vertical_rhythm.sass(thanks to Chris Eppstein) provides better establishing of the baseline grid, as well as mixins to help you manage it.
px2em()- see below.
px2em()has been removed and replaced with a simple variable
!px2emwhich returns the size of one pixel relative to your basic em-height. Multiply against your desired px dimensions (i.e.
border-width = !px2em*5pxwill output the em-equivalent of 5px).
!base_line_height_pxhave been replaced with
!base_line_heightwhich take advantage of sass's built-in unit handling.
!grid_unitsis not needed, as you can now declare your units directly in the other grid
_widthvariables. 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_unitsvariable and add units to your grid variable values.
- find any uses of
px2em()and replace them with something.
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.