oddbird/susy

Name: susy

Owner: OddBird

Description: Responsive layout toolkit for Sass

Created: 2009-07-13 17:14:28.0

Updated: 2018-01-20 09:01:57.0

Pushed: 2017-12-01 23:17:59.0

Homepage: http://susy.oddbird.net/

Size: 6903

Language: CSS

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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.

• 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

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

Installation

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.

n-prefixed functions
ort '<path-to>/susy/sass/susy';

usy-prefixed functions
ort '<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:

install sass-loader --save-dev

Make sure you have sass-loader enabled in your webpack configuration:

ebpack.config.js
le: {
les: [
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

Start using Susy:

pp.scss */
ort "~susy/sass/susy";

Using Gulp

Add a gulp task:

ulpfile.js
.task('sass', function() {
turn 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:

pp.scss */
ort '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:

runtfile.js
: {
st: {
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:

pp.scss */
ort '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.