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
0
votes
2 answers

Shorthand syntax gutters being ignored for span mixin

I've set global settings for susy: $susy: ( columns: 8, gutters: 1/4, ); I want to override the gutters for a couple of span .tile-left { @include span(1 of 2 1px); } .tile-right { @include span(1 at 2 of 2 1px); } Generated…
FlyingNimbus
  • 453
  • 2
  • 5
  • 11
0
votes
1 answer

Gutter Width Issues in Susy

I have a 24 Susy column grid. I'm trying to do some boxes that will each span 6 columns (so 4 per row), but I'm wanting to add some gutters around them, withing a wider container that is 24 columns wide. Unfortunately, no matter what I try, I can't…
0
votes
1 answer

Susy math always makes elements too large

I'm trying to use Susy but I can not create a desirable grid. I want a fixed gutter grid with the gutters coming after the element, not before. I couldn't get that to work. It seems that no matter what I do the elements are too large and the last…
0
votes
1 answer

Elements not sitting side by side (Complex Grid) There is space, but acts as if there isn't

Having problems executing a complex layout with minimal usage of relative and absolute positioning. Here's my layout: All my elements are floating left sitting side by side with only a single problem: the border img needs to bleed down into the…
Andrew
  • 737
  • 2
  • 8
  • 24
0
votes
2 answers

Different gutters with susy sass

I have this susy settings: $susy: ( columns: 8, gutters: 1/4, global-box-sizing: border-box, ); Sometimes I need different gutters instead 1/4. See image for example: And the code: .wrap { @include clearfix; @include container…
kurtko
  • 1,978
  • 4
  • 30
  • 47
0
votes
1 answer

Gutters in Susy remaining intact as spacing between elements. Bonus: wider doesn't work

There's an unwanted space between two blocks in susy. It seems to follow the size of the grid exactly, despite using the wide feature. $susy: ( columns: 9, gutters: 0.454, debug:(image: show, output : overlay,) ) ; #grid{ @include…
Andrew
  • 737
  • 2
  • 8
  • 24
0
votes
1 answer

Div not confirming to grid. Defined an 8 column grid and elements are binding to 4 column. Susy

My div is not matching up to my grid. It's an 8 container grid and when I tell the element to span(2), it acts as if the grid were 4. Is this because I'm not defining a global grid in $susy? Some contextual code: First I defined a container grid: …
Andrew
  • 737
  • 2
  • 8
  • 24
0
votes
1 answer

How to propery define nested elements?

Given I have the following markup:
Foo
Bar
The body has a fixed width of 910px: body { @include container(910px); } The body has an article element,…
Christian Fazzini
  • 19,613
  • 21
  • 110
  • 215
0
votes
1 answer

Susy columns overflowing grid

I'm just trying susy for the first time, but having a bit of difficulty. HTML
SCSS @import "susy"; $susy: ( …
Djave
  • 8,595
  • 8
  • 70
  • 124
0
votes
1 answer

Susy Gutter Size

I am brand new to using Susy. I have just downloaded and installed into my application. I am using Susy 2.2 I have trying to created a simple page/grid that has 2 columns of equal width (50%). The problem i am facing is that each column is only…
Oam Psy
  • 8,555
  • 32
  • 93
  • 157
0
votes
1 answer

2 rows having equal heights to fill parent element with Susy

Not sure if this is something Susy is made to handle, how can I get 2 elements that include a span to fill the parent evenly? So row 1 and 2 will have equal heights. -------------- . row 1 . container …
el_pup_le
  • 11,711
  • 26
  • 85
  • 142
0
votes
1 answer

Get the width of grid columns from within a div of changing width in susy

New to susy and can't find an answer to this simple question: Here's the html structure:
and here my basic susy settings and…
fekioh
  • 894
  • 2
  • 9
  • 22
0
votes
1 answer

Gulp Bower error on default task with Libsass & Susy

When I run the gulp task (default) for the first time, the sass task gives an error on a Bower package. More specifically on Susy. The error: Plumber found unhandled error: Error in plugin 'gulp-sass' Message: file to import not found…
Jrn
  • 1,185
  • 1
  • 13
  • 27
0
votes
1 answer

Using susy and breakpoint with grunt-sass

Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. I also removed compass. The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore. I used to put this in a…
Toasty
  • 59
  • 12
0
votes
1 answer

SCSS Susy Configuration Settings

I am trying replicate a Bootstrap equivalent grid to my project. I love the idea but am having trouble with the config. I am using Codekit, on the latest version. I want the grid to use the following: box-sizing: border-box; 15px gutter each side…
Neil
  • 971
  • 2
  • 12
  • 33