Power Tools For The Web
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
- 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
@import '<path-to>/susy/sass/susy';
// susy-prefixed functions
@import '<path-to>/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.