CSS HTML JavaScript
Need help with susy?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
oddbird

Description

Responsive layout toolkit for Sass

3.9K Stars 367 Forks BSD 3-Clause "New" or "Revised" License 1.6K Commits 24 Opened issues

Services available

Need anything else?

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.

npm version
Build Status

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.

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

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
@import '/susy/sass/susy';

// susy-prefixed functions @import '/susy/sass/susy-prefix';

Using Eyeglass

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

Start using Susy:

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

Using Gulp

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';

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.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';

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.