Power Tools For The Web [Deprecated]
Susy is Deprecated. It should no longer be used on new projects, and will no longer be receiving any updates.
Susy is a design-agnostic set of tools for creating powerful, custom layouts. We didn't want another grid system full of rules and restrictions — we wanted a power tool for building our own damn systems. Version Three is trimmed down to it's most basic components — functions that can be used to build any grid system.
- Susy Website | @SassSusy
- Susy3 Intro | Spread in Susy3
- Susy3 Documentation
- Susy1/Susy2 Documentation
Quotes
"I like the idea of grids-on-demand, rather than a strict framework."
– Chris Coyier, CSS Tricks
"Susy and Zendesk have been getting along magically… It’s precisely what you need and nothing more."
— Stephany Varga, Zendesk
"If you’re interested in reading Sass poetry, be sure to look at Susy’s source code!"
— Hugo Giraudel, SitePoint
Resources
Third-Party Tools
- Susy.js CSS-in-JS port
Installation
npm install susy
There are two imports to choose from.
The default sass/susy
comes with
un-prefixed versions of the core API functions.
If you want Susy to be name-spaced,
import sass/susy-prefix
instead.
// un-prefixed functions ; // susy-prefixed functions ;
Eyeglass
UsingWith eyeglass set up,
you can @import 'susy';
without providing the npm-modules path.
Using Webpack
Make sure sass-loader
is installed:
npm install sass-loader --save-dev
Make sure you have sass-loader enabled in your webpack configuration:
// webpack.config.jsmodule: rules: test: /\.scss$/ use: 'style-loader' 'css-loader' 'sass-loader'
Start using Susy:
/* app.scss */;
Using Gulp
Add a gulp task:
// gulpfile.jsgulp;
Start using Susy:
/* app.scss */;
Using Grunt (and Yeoman)
To add Susy to the Sass task,
edit your Gruntfile.js
at the root level of your project
and look for the Sass-related rules.
Add require: 'susy'
inside the options object:
// Gruntfile.jssass: dist: options: style: 'expanded' require: 'susy' files: 'css/style.css': 'scss/style.scss'
Assuming you’ve already installed Susy, it will now be added to the project and will not clash with Yeoman's grunt rules.
Start using Susy:
/* app.scss */;
Susy vs Su
You may notice that some functions have a susy-
prefix,
while others only have su-
.
This helps distinguish between the two distinct layers:
- The core grid-math layer is called Su, and is made up of "pure" functions that expect normalized values. This is useful if you prefer argument-syntax to shorthand syntax, or if you are building your own Susy mixins.
- The upper Susy layer provides syntax-sugar – global defaults, shorthand-parsing, normalization, and a smaller set of common-use functions that call on the core math as necessary. This is the primary API for most users.