Questions tagged [susy]

Susy is a (now deprecated) design-agnostic set of tools for creating powerful, custom layouts.

Web:
Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date.

Github:
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 is Deprecated. It should no longer be used on new projects, and will no longer be receiving any updates.

Web: www.oddbird.net/susy/
Github: https://github.com/oddbird/susy

207 questions
1
vote
1 answer

Dealing with Gulp, Bundler, Ruby and Susy

According to this it's possible to compile susy install from Ruby with Gulp. But is it possible to use gulp-sass instead of gulp-compass or gulp-ruby-sass because of performance and deprecation ? Actually I use this in my gulpfile.js: gulpfile var…
webmaster pf
  • 389
  • 1
  • 5
  • 23
1
vote
1 answer

SASS Susy and Flexbox for vertically aligned LI in Susy Grid

I've looked at about a dozen various stack questions about vertically aligning items and a few websites with tutorials for aligning / working with SASS Susy. It seems perhaps my use case is unique and I just don't have the skills to work it…
1
vote
2 answers

Breakpoint-sass not loading in gulp setup, Susy is working fine

Hi I'm trying to get breakpoint-sass working with susy in my Gulp set-up I have ran npm install breakpoint-sass --save-dev and linked it to the top of my sass file with @import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (susy is…
Jafoolee
  • 11
  • 4
1
vote
1 answer

Using Susy, how can I make a div expand to height of tallest sibling?

In susyless CSS, I could make containers with various content lengths grow to the height of of their tallest sibling using display: table and display: table-cell. .not-susy { .short { width: calc(100%/12 * 8); } .wrap{ display:…
1252748
  • 14,597
  • 32
  • 109
  • 229
1
vote
1 answer

Does Susy have a clearfix mixin within it?

I'm starting to use the Libsass version of Susy together with Gulp, and can see within the scss files that there is mention of a clearfix mixin / clearfix fallback mixin. But if I try to refer to this within my sass styling, compiling via gulp…
Ian Ryde
  • 23
  • 4
1
vote
1 answer

susy grid pixel rounding error

hey there i tried to fix the susy sub-pixel rounding error with the use of the isolate method, but somehow it still exists in chrome....cant figure out what i am actually doing wrong, thanks a lot for your help, really…
HendrikEng
  • 654
  • 1
  • 10
  • 32
1
vote
0 answers

Susy grid gallery or columns layout with different heights

I wonder if there is an easy way to accomplish a grid with different heights using susy gallery or the column system, I want it to look like this image: My problem is when I try to work with the gallery system it seems to work only with blocks…
ryangus
  • 679
  • 3
  • 8
  • 22
1
vote
0 answers

Susy Import Failing in Dart Project

I'm setting up a standalone Dart project in Rubymine that uses sass/compass/susy. The main scss file is from a Ruby on Rails project. In it I have @import "compass"; @import 'susy'; When I do a build, it's happy with the compass import but not…
curt
  • 4,422
  • 3
  • 42
  • 61
1
vote
0 answers

Configuring PhpStorm for using Susy in Drupal 8 project

I need help to configuring PhpStorm for using Susy in Drupal 8 project. My actions: Install Ruby Install Compass (cmd => gem install compass) Install Susy (cmd => gem install susy) Change directory to core theme in cmd Run in cmd => compass…
Lexs
  • 25
  • 4
1
vote
1 answer

setting nested element width to column width

I'm having some troubles to find the right way to approach this problem: I've got a situation like the following:
Mr Peach
  • 1,364
  • 1
  • 12
  • 20
1
vote
2 answers

Susy 2: background color on a nearby gutter

OK, first of all I tried to show the issue with Sassmeister, but it's so f... slow to compile that I just gave up. I use Susy, SCSS and Haml. So here is the image that I think is relevant. I want to make the black bar at the top (background-color)…
Tomasz Gałkowski
  • 1,841
  • 4
  • 24
  • 39
1
vote
2 answers

Where to put grid layout in SUSY/SMACSS structure

say on the about page you have 3 column grid and on the home page you have a four column grid, in which file within the css architecture should these styles be placed to layout these pages, should each page have a layout css?
user1937021
  • 10,151
  • 22
  • 81
  • 143
1
vote
1 answer

Susy Pull Div Gutter Amount?

Im stumped as to how to pull a div back in the amount of a gutter. I have 12 columns with two divs. I have a Left div and a right div. The bottom portion of the screenshot is what I would like to achieve, however, I am not sure if my solution is…
lnickel
  • 331
  • 1
  • 6
  • 17
1
vote
1 answer

Change layout with susy

I want to change the layout from 12 columns to 24 when the site gets larger than 1000px. My markup
and the scss with susy $susy: ( columns: 12, global-box-sizing: border-box, debug:…
Gregor Voinov
  • 2,203
  • 7
  • 34
  • 52
1
vote
1 answer

How do I change a susy parameter based on the number of items in an array?

I have an ng-repeat in an angular app that could have anywhere between 2 to 5 items and a 20 column susy grid. I want the items to total the full width of the grid so if there are 2 I want: .card:nth-child(1) { @include span(10 of 20); } …
1 2
3
13 14