Stack Overflow
Stack Overflow

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

Isolate nested sass map into new map

How can I isolate nested sass map into a new map? For example I have sass map like this: $susy-setting: ( s: ( 'columns': 4, 'gutters': 30px, ), m: ( 'columns': 8, 'gutters': 30px, ), l: ( 'columns': 12, …
Nizamil Putra
  • 582
  • 1
  • 7
  • 26
0
votes
1 answer

Vertical alignment of items in a susy gallery()

How do I vertical-align: middle items in a susy gallery()? The image I have attached shows my items vertical alignment as it currently stands. As you can see from my highlighting they are all currently vertical-align: top. Thank you in…
Oliver Martin
  • 101
  • 1
  • 2
  • 8
0
votes
1 answer

Susy Next content Mobile to Desktop layout order

I'm having a few issues understanding how to produce the following layout using Susy Next. I can't seem to get my head around doing this cleanly in Susy, or at all really. The source order is the following and may not be changed.
Felipe Gutierrez
  • 15
  • 5
0
votes
1 answer

Align center depending on number of columns susy

I am using the following style to align the columns at the center of the page using susy: card{ @include span(3 of 12); margin: 0 auto; cursor: pointer; } But its not moving the elements (div) to center of the page by default, if I have single…
user1188867
  • 3,726
  • 5
  • 43
  • 69
0
votes
1 answer

Fluid container in a static container on a fluid site

i am trying to achieve a specific layout in SUSY but i am kinda struggling. I want to have a site that is basically fluid full width when it comes to header or footer, the main content should be in a container that is restricted to a specific…
HendrikEng
  • 654
  • 1
  • 10
  • 32
0
votes
1 answer

SASS, SUSY and RTL - trying to set specific layout rules when [dir="rtl"] is set dynamically

Using SASS/SUSY, I am trying to create RTL rules that only apply when [dir="rtl"] is set (dynamically) but my layout is taking on the RTL flow rules by default. How do I do this with SUSY? I have a Demo here $default-dir: ( math: fluid, …
vince-ux
  • 35
  • 6
0
votes
1 answer

Nested split gutters using Susy's span functions

Does Susy have a built in way to account for children of parents with split gutters using the span function rather than the mixin? The child here ends up gutter short (as expected): $susy: (columns: 8, gutters: 0.3, global-box-sizing: border-box,…
velvetkevorkian
  • 660
  • 1
  • 5
  • 13
0
votes
1 answer

How to stretch nested div full width outside of container div with susy?

What is the recommended way to stretch nested div across full width using susy? I am currently using bleed and wonder whether that's the correct approach. And also how to make the design responsive mobile first? Here is my html:
EBamba
  • 131
  • 1
  • 2
  • 10
0
votes
1 answer

Error: File to import not found or unreadable: susy

Having looked at, File to import not found or unreadable: susy, I was unable to get the answer. My Partial gruntfile.js sass: { options: { /** Only use include_paths if extracting elements from Node_Modules */ includePaths:…
Dos
  • 154
  • 2
  • 4
  • 16
0
votes
1 answer

Susy: override bleed() at breakpoint

How do I undo the bleed-x() mixin at a smaller breakpoint so box4 (the yellow box) in example 2 goes back in between the purple columns and doesn't wrap to the next line. .story4 { @include bleed-x(); @include span(2); background: yellow; …
meijiOrO
  • 411
  • 4
  • 7
  • 14
0
votes
1 answer

Susy Grid Issue with spanning 6 items

I am having some issues spanning my 12 items across 2 rows of 6. I am having issues with the "artist" section. I'm not sure if I should be using the gallery mixin for this or just use spans like I am for my other…
626
  • 1,159
  • 2
  • 16
  • 27
0
votes
1 answer

susy title bar not centering

I am trying to understand scss and I am using susy to create the grid system. My basic settings are: $susy: ( columns: 12, gutters: 1/4, math: fluid, output: float, gutter-position: inside, ); And I have some divides: #border{ …
user6787125
0
votes
1 answer

Best way to add floating area beside susy gallery?

Here's a link to the codepen so far The number of items in the gallery is based on search results, but I'd like the area to the right to be filled with a fixed area that will stay where it's at as the user scrolls down the search results gallery. So…
Jon
  • 143
  • 12
0
votes
2 answers

Cant get images responsive after a width of 1920

i am struggling to get a card flip section fully responsive. I managed to get everything working and responsive but as soon as i hit a width of 1920px they cards to move apart and dont scale up in width. I don't know why since i set width etc all to…
HendrikEng
  • 654
  • 1
  • 10
  • 32
0
votes
1 answer

How to make static element widths in a fluid grid system in Susy2

I'm new to CSS and front end styling and I've chosen Sass and Susy2 as the 2 frameworks I'd like to work off of. My susy config looks like this: $susy: ( columns: 16, gutters: 1/4, column-width: 2rem, output:…
Josh Elias
  • 3,250
  • 7
  • 42
  • 73
1 2 3
…
13 14