Susy is Deprecated. It should no longer be used on new projects, and will no longer be receiving any updates.

npm version

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

"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!"
— Kitty Giraudel, SitePoint

• OddBird | @OddBird
• Sites using Susy
• Changelog
• Guidelines for contributing
• BSD3 License

• Susy.js CSS-in-JS port

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
@import '<path-to>/susy/sass/susy';
// susy-prefixed functions
@import '<path-to>/susy/sass/susy-prefix';

With eyeglass set up, you can @import 'susy'; without providing the npm-modules path.

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.js
module: {
 rules: [
 {
 test: /\.scss$/,
 use: ['style-loader', 'css-loader', 'sass-loader'],
 },
 ];
}

Start using Susy:

/* app.scss */
@import '~susy/sass/susy';

Add a gulp task:

// gulpfile.js
gulp.task('sass', function () {
 return gulp
 .src('scss/*.scss')
 .pipe(
 sass({
 outputStyle: 'compressed',
 includePaths: ['node_modules/susy/sass'],
 }).on('error', sass.logError),
 )
 .pipe(gulp.dest('dist/css'));
});

Start using Susy:

/* app.scss */
@import 'susy';

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.js
sass: {
 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 */
@import 'susy';

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.

At OddBird, we love contributing to the languages & tools developers rely on. We're currently working on polyfills for new Popover & Anchor Positioning functionality, as well as CSS specifications for functions, mixins, and responsive typography. Help us keep this work sustainable and centered on your needs as a developer! We display sponsor logos and avatars on our website.

Sponsor OddBird's OSS Work