• Stars
    star
    3,868
  • Rank 11,335 (Top 0.3 %)
  • Language SCSS
  • License
    BSD 3-Clause "New...
  • Created over 15 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Pre-grid responsive layout toolkit for Sass, now deprecated

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

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!"
— Kitty 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 '<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.

More Repositories

1

true

Sass unit tests
SCSS
683
star
2

popover-polyfill

Polyfills the HTML popover attribute and showPopover/hidePopover/togglePopover methods onto HTMLElement, as well as the popovertarget and popovertargetaction attributes on <button> elements.
TypeScript
255
star
3

css-anchor-positioning

Polyfill for CSS Anchor Positioning
TypeScript
248
star
4

sassdoc-theme-herman

An Odd SassDoc theme.
JavaScript
117
star
5

cascading-color-system

CSS Custom Property color-theming
SCSS
71
star
6

susysite

Source for the new susy.oddbird.net
CSS
59
star
7

css-toggles

CSS Toggles demo and polyfill
JavaScript
58
star
8

css-sandbox

A place to draft & experiment with CSS proposals
Nunjucks
53
star
9

accoutrement

Combined Sass Accoutrement tools, with option for individual module imports
SCSS
36
star
10

accoutrement-color

Color helpers
CSS
32
star
11

oddcontrast

Svelte
28
star
12

blend

More color options for sass…
SCSS
26
star
13

show-when

An element that shows or hides based on provided conditions
JavaScript
22
star
14

slide-deck

Web presentations, as a self-contained web component
JavaScript
20
star
15

odd-browser

A place to explore ideas towards a site-building & networking browser
17
star
16

oddsite

⛔️ DEPRECATED: Old (unused) OddBird site
HTML
17
star
17

sliiides

An 11ty attempt at web presentations
Nunjucks
17
star
18

sass-json-export

JSON exporter for Sass. Based on SassyJSON, by Kitty Giraudel.
SCSS
12
star
19

vuefinder

mia-style slideshows with nuxt
Vue
11
star
20

portfoliyo

A communication tool for teachers and parents
Python
11
star
21

accoutrement-scale

Size and scale helpers for typography and layout
CSS
9
star
22

accoutrement-init

browser normalization and baseline defaults
CSS
6
star
23

greenmud

into the green green mud
JavaScript
6
star
24

accoutrement-maps

Sass map helpers
CSS
5
star
25

oddleventy

Official OddBird Site
Nunjucks
5
star
26

source-element

An exploratory Web Component to conditionally load one of several scripts based on user and browser settings.
JavaScript
4
star
27

PyFly

Python
3
star
28

mlt

Python
3
star
29

polyfill-template

TypeScript
3
star
30

cascade-layers-polyfill-demo

HTML
3
star
31

portfoliyo-landing

A landing page for the Portfoliyo project
JavaScript
2
star
32

accoutrement-type

Font helpers
CSS
2
star
33

susy.oddbird.net

New home for the Susy website
CSS
2
star
34

mozdemos

Demos for Mozilla Developer Channel – https://youtube.com/MozillaDeveloper
HTML
2
star
35

knet

Collecting stories of inspiration for teachers
Python
2
star
36

start-testing-preso

A talk on testing for PyCon US 2013
JavaScript
2
star
37

buntpress

PHP
1
star
38

set-your-code-free-preso

A presentation by Carl Meyer for PyCon 2014
CSS
1
star
39

rectangles

Vue
1
star
40

mahjongg

Concise scoring summary for Classical European style mahjongg
Ruby
1
star
41

project-templates

JavaScript
1
star
42

accoutrement-layout

Layout helpers in Sass
CSS
1
star
43

herman-test-project

a test project for sassdoc-theme-herman
CSS
1
star
44

bugdash

A "release readiness" and work prioritization dashboard for Bugzilla users.
JavaScript
1
star
45

accoutrement-queries

Media-query helpers
CSS
1
star
46

oddtools

project management tools for oddbird
JavaScript
1
star
47

advanced-python-preso

A presentation by Carl Meyer for ConFoo 2014, on advanced Python techniques.
CSS
1
star
48

sass-colors-sample

Sample code for implementing support of CSS color spaces in Sass
SCSS
1
star
49

accoutrement-reset

Reset helpers
CSS
1
star
50

odddocker

A base Docker image for OddBird web projects
Dockerfile
1
star