{"id":13446722,"url":"https://github.com/oddbird/susy","last_synced_at":"2025-12-16T19:59:58.265Z","repository":{"id":612242,"uuid":"250144","full_name":"oddbird/susy","owner":"oddbird","description":"Pre-grid responsive layout toolkit for Sass, now deprecated","archived":false,"fork":false,"pushed_at":"2024-04-16T18:19:02.000Z","size":7522,"stargazers_count":3859,"open_issues_count":24,"forks_count":352,"subscribers_count":164,"default_branch":"main","last_synced_at":"2025-04-28T11:56:15.327Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://oddbird.net/susy/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oddbird.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"oddbird","open_collective":"oddbird-open-source"}},"created_at":"2009-07-13T17:14:28.000Z","updated_at":"2025-04-27T14:47:58.000Z","dependencies_parsed_at":"2024-11-24T14:37:17.369Z","dependency_job_id":null,"html_url":"https://github.com/oddbird/susy","commit_stats":{"total_commits":1463,"total_committers":61,"mean_commits":"23.983606557377048","dds":"0.33287764866712233","last_synced_commit":"f7b64487ac15c2c7fc982e4cebfb6ac79c9a57c2"},"previous_names":["ericam/susy"],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsusy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsusy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsusy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsusy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddbird","download_url":"https://codeload.github.com/oddbird/susy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311332,"owners_count":21569008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:00:58.121Z","updated_at":"2025-12-16T19:59:53.224Z","avatar_url":"https://github.com/oddbird.png","language":"SCSS","readme":"# Power Tools For The Web [Deprecated]\n\n**Susy is Deprecated. It should no longer be used on new projects, and will no longer be receiving any updates.**\n\n[![npm version](https://badge.fury.io/js/susy.svg)](https://badge.fury.io/js/susy)\u003cbr /\u003e\n\nSusy is a design-agnostic set of tools\nfor creating powerful, custom layouts.\nWe didn't want another grid system\nfull of rules and restrictions —\nwe wanted a power tool\nfor building our own damn systems.\nVersion Three is trimmed down to it's most basic components —\nfunctions that can be used to build any grid system.\n\n- [Susy Website](http://oddbird.net/susy/) |\n  [@SassSusy](http://twitter.com/sasssusy/)\n- [Susy3 Intro](http://oddbird.net/2017/06/28/susy3) |\n  [Spread in Susy3](http://oddbird.net/2017/06/13/susy-spread)\n- [Susy3 Documentation](http://oddbird.net/susy/docs/)\n- [Susy1/Susy2 Documentation](http://susy.readthedocs.io)\n\n## Quotes\n\n\u003e \"I like the idea of grids-on-demand,\n\u003e rather than a strict framework.\"\u003cbr /\u003e\n\u003e – Chris Coyier, [CSS Tricks](http://css-tricks.com/build-web-layouts-easily-susy/)\n\n\u003e \"Susy and Zendesk have been getting along magically…\n\u003e It’s precisely what you need and nothing more.\"\u003cbr /\u003e\n\u003e — Stephany Varga, [Zendesk](https://medium.com/zendesk-creative-blog/responsive-a-harrowing-meditation-on-the-brutal-realities-of-web-content-organization-in-5-acts-1d33ce25f062)\n\n\u003e \"If you’re interested in reading Sass poetry,\n\u003e be sure to look at Susy’s source code!\"\u003cbr /\u003e\n\u003e — Kitty Giraudel, [SitePoint](http://www.sitepoint.com/my-favorite-sass-tools/)\n\n## Resources\n\n- [OddBird](http://oddbird.net/) | [@OddBird](http://twitter.com/oddbird/)\n- [Sites using Susy](http://oddbird.net/susy/sites/)\n- [Changelog](https://github.com/oddbird/susy/blob/main/CHANGELOG.md)\n- [Guidelines for contributing](https://github.com/oddbird/susy/blob/main/CONTRIBUTING.md)\n- [BSD3 License](https://github.com/oddbird/susy/blob/main/LICENSE.txt)\n\n## Third-Party Tools\n\n- [Susy.js](https://github.com/ignota/susy.js) CSS-in-JS port\n\n## Installation\n\n```\nnpm install susy\n```\n\nThere are two imports to choose from.\nThe default `sass/susy` comes with\nun-prefixed versions of the core API functions.\nIf you want Susy to be name-spaced,\nimport `sass/susy-prefix` instead.\n\n```scss\n// un-prefixed functions\n@import '\u003cpath-to\u003e/susy/sass/susy';\n\n// susy-prefixed functions\n@import '\u003cpath-to\u003e/susy/sass/susy-prefix';\n```\n\n### Using [Eyeglass](http://eyeglass.rocks/)\n\nWith eyeglass set up,\nyou can `@import 'susy';`\nwithout providing the npm-modules path.\n\n### Using Webpack\n\nMake sure `sass-loader` is installed:\n\n```bash\nnpm install sass-loader --save-dev\n```\n\nMake sure you have sass-loader enabled in your webpack configuration:\n\n```javascript\n// webpack.config.js\nmodule: {\n  rules: [\n    {\n      test: /\\.scss$/,\n      use: ['style-loader', 'css-loader', 'sass-loader'],\n    },\n  ];\n}\n```\n\nStart using Susy:\n\n```scss\n/* app.scss */\n@import '~susy/sass/susy';\n```\n\n### Using Gulp\n\nAdd a gulp task:\n\n```javascript\n// gulpfile.js\ngulp.task('sass', function () {\n  return gulp\n    .src('scss/*.scss')\n    .pipe(\n      sass({\n        outputStyle: 'compressed',\n        includePaths: ['node_modules/susy/sass'],\n      }).on('error', sass.logError),\n    )\n    .pipe(gulp.dest('dist/css'));\n});\n```\n\nStart using Susy:\n\n```scss\n/* app.scss */\n@import 'susy';\n```\n\n### Using Grunt (and Yeoman)\n\nTo add Susy to the Sass task,\nedit your `Gruntfile.js` at the root level of your project\nand look for the Sass-related rules.\nAdd `require: 'susy'` inside the options object:\n\n```javascript\n// Gruntfile.js\nsass: {\n  dist: {\n    options: {\n      style: 'expanded',\n      require: 'susy'\n    },\n    files: {\n      'css/style.css': 'scss/style.scss'\n    }\n  }\n}\n```\n\nAssuming you’ve already installed Susy,\nit will now be added to the project\nand will not clash with Yeoman's grunt rules.\n\nStart using Susy:\n\n```scss\n/* app.scss */\n@import 'susy';\n```\n\n## Susy vs Su\n\nYou may notice that some functions have a `susy-` prefix,\nwhile others only have `su-`.\nThis helps distinguish between the two distinct layers:\n\n- The core grid-math layer is called **Su**,\n  and is made up of \"pure\" functions\n  that expect normalized values.\n  This is useful if you prefer argument-syntax to shorthand syntax,\n  or if you are building your own Susy mixins.\n- The upper **Susy** layer provides syntax-sugar –\n  global defaults, shorthand-parsing, normalization,\n  and a smaller set of common-use functions\n  that call on the core math as necessary.\n  This is the primary API for most users.\n\n---\n\n### Sponsor OddBird's OSS Work\n\nAt OddBird, we love contributing to the languages \u0026 tools developers rely on.\nWe're currently working on polyfills for new Popover \u0026 Anchor Positioning\nfunctionality, as well as CSS specifications for functions, mixins, and\nresponsive typography. Help us keep this work sustainable and centered on your\nneeds as a developer! We display sponsor logos and avatars on our\n[website](https://www.oddbird.net/susy/#open-source-sponsors).\n\n[Sponsor OddBird's OSS Work](https://opencollective.com/oddbird-open-source)\n","funding_links":["https://github.com/sponsors/oddbird","https://opencollective.com/oddbird-open-source"],"categories":["CSS","SCSS","Frontend","Libraries and Mixins","Frameworks / Resources"],"sub_categories":["Preprocessors","Grid","S"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fsusy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddbird%2Fsusy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fsusy/lists"}