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
1 answer

Susy - Prevent Grid from creating a line break during transition

I noticed on my phone, using this menu: It's obvious that it exceeded the size of the row from this picture and it creates a line break during the transition, however, on desktop, it does not. It should stay in the same row during the…
user3186219
0
votes
1 answer

integrating susy suport in anglar2 seed

I had integrated sass suport in angular2 seed (https://github.com/mgechev/angular2-seed) and also installed susy form npm(npm install susy --save-dev) but when I imported susy form .scss file it gives following errors [13:01:16] Starting…
Jorin
  • 1,316
  • 1
  • 12
  • 16
0
votes
1 answer

Set suzy gutters for a certain file / grouped set of classes?

I know that you can set gutters for a suzy grid globally: $susy: ( columns: 12, gutters: 0.32, } And you can also override this for a particular class: .something { @include span(1 of 3); @include gutters(1em); } But can you override…
Evanss
  • 23,390
  • 94
  • 282
  • 505
0
votes
1 answer

susy argument from sass custom function

How can I pass the return value form a custom Sass function to a Susy function? Or is there any better approach? This works fine: .foo{ max-width: get_breakpoint('large'); } But that won't: .foo{ @include layout(get_breakpoint('large')…
Maciek Rek
  • 1,525
  • 2
  • 14
  • 18
0
votes
1 answer

Susy Grid block not flowing properly

I'm using susy to create a very basic blog layout, its 3 columns wide for large medium screens, 2 columns for small (tablet) and then 1 column for mobile. The mobile and tablet layout works fine but medium and large screens are not flowing properly,…
Duggy G
  • 465
  • 3
  • 12
  • 27
0
votes
1 answer

Meteor meta:susy package surprising path

I'm trying to use the meta:susy package on my meteor installation. On my iMac there are no problems, but on windows 10 it say: throw Error("surprising path" + p); Error: surprising path: /{meta:susy}/susy I removed the fourseven:scss package, then…
0
votes
1 answer

Susy nested contexts

If you have a look at this Code Pen demo i've created: http://codepen.io/rctneil/pen/aNJjeP How can I use Susy to get the padding on both the
rctneil
  • 7,016
  • 10
  • 40
  • 83
0
votes
1 answer

Susy Columns - Stacking Mobile

Ok, I'm new to Susy and I'm trying to do something that is probably very easy. On a large display I have two columns side-by-side |A|B|. When I shrink the browser down to a mobile size it stacks the columns A over B. How would I make B stack over…
shbrantley
  • 31
  • 3
0
votes
1 answer

Scale pygal svg graphs in web page with susy

I am trying to place two svg files side by side in a web page. This I have done using susy to create the spans, first one is 2 columns wide, the second 10 columns. I place a narrow bar graph in the first span, and a wide line graph in the second…
Rob
  • 2,511
  • 2
  • 20
  • 31
0
votes
0 answers

Unable to successfully install Susy

I'm using PhpStorm 10. I attempted to install Susy 2.2.12 and received the following error: Successfully installed susy-2.2.12 Parsing documentation for susy-2.2.12 Done installing documentation for susy after 0 seconds WARNING: Unable to pull…
0
votes
0 answers

Susy grid same height

I have this susy grid and I would like to have all its columns the same height, I tried adding the display: table technique but I can't get it to work. I tried the suggestions posted in here but that didn't get me anywhere either, I created this…
ryangus
  • 679
  • 3
  • 8
  • 22
0
votes
1 answer

Unable to Import Susy in SASS / Compass

I don't know how to connect the atom.io editor with susy. I have tried searching the "atom susy", "atom susy sass" and simmiliar in google, but I have found nothing that help me. (most result were connected with chemistry, so I started to write…
Daniel Mizerski
  • 1,123
  • 1
  • 8
  • 24
0
votes
1 answer

Using susy in Rails

I am using Rails 4.2.5. And I want to use susy. I've installed some gems required, gem 'susy' gem 'compass-rails', '~> 2.0.0' gem 'compass-susy-plugin' gem 'sass-rails', '~> 5.0.0' And in config/application.rb, I've added require 'susy' In…
Allen Ye
  • 119
  • 1
  • 5
0
votes
1 answer

How to set the width AND max-width of a susy container

I would like to achieve this mixin natively with Susy: @mixin mainContainer($width, $maxWidth) { width: $width; max-width: $maxWidth; margin-right: auto; margin-left: auto; } How can I do that? Thanks!
Florian G
  • 567
  • 1
  • 5
  • 15
0
votes
1 answer

Nest elements has different padding value

I spent a couple hours to figure it out but no luck, so basically I've this configuration $susy: ( columns: 12, gutters: 54px/53px, container: 1230px ); In my layout file _layout.scss, I've this @include layout( $susy inside…
Satrya
  • 1
  • 4