Questions tagged [susy-sass]

Susy is a layout toolkit for the Sass CSS pre-processor. Susy is built to be flexible, so that you can customize it to fit your markup and your design, in a responsive and semantic way.

Susy is a layout toolkit for the Sass CSS pre-processor. Susy is built to be flexible, so that you can customize it to fit your markup and your design, in a responsive and semantic way. See more at http://susy.oddbird.net

148 questions
0
votes
1 answer

Susy 2.0 responsive grid

I'm converting a layout from Susy 1 to Susy 2.0 and have some things working differently than expected. Am I doing something wrong here? I would like the container to span the width of the page and have a column half the width be in the middle of…
byrdr
  • 5,197
  • 12
  • 48
  • 78
0
votes
1 answer

Is there a way to base Susy gutter widths off a percentage of the container width?

On reading the documentation Susy takes its gutter width as a percentage of the column width. I have a container that has a width of 768px I have 3 columns I want each gutter to be 5% of 768px which is 38.4px I am using a gutter-position of…
Rupert
  • 1,629
  • 11
  • 23
0
votes
1 answer

3 column to 2 column stacked layout w/ Susy (EG twitter)

I've been working with Susy for a while now and came across a use case that I can't seem to figure out. The best way to explain it is to use Twitter as an example. If you look on their site you'll see they use a three column standard layout with…
Mr. BigglesWorth
  • 1,530
  • 3
  • 18
  • 33
0
votes
1 answer

Can I stack columns with Susy?

Loving Susy, so far! Now I'd like this initial layout... ... to turn into this layout on a smaller screen: Is this possible using Susy? Furthermore, I'd want the AC-column to function as a single entity when they're in the same column, since I'd…
Squis
  • 921
  • 2
  • 8
  • 14
0
votes
1 answer

How do gutters work in Susy 2?

I am trying to generate gutters which span 1/5 of 4 a column span. The global setup is: $page-width: 1080px; $susy: ( columns: 12, math: fluid, gutter-position: inside, gutters: 1/4.5, // will be overriden; I think ... …
Thomas Luzat
  • 710
  • 7
  • 21
0
votes
1 answer

Static nested grids using Susy

I am experimenting static layout with Susy and I need some directions on how to establish a nested grid with same gutter width. In this example below, I have .main that spans 9 columns out of 12 columns and I like to make its children .main-item to…
user1203249
0
votes
1 answer

Can you have a grid using Susy that has 3 fluid and 1 static column?

I'm new to "Susy" and am struggling with figuring out a few items. I'm trying to create a row that has 3 fluid promo boxes (all gray in attached image) and 1 static box (which is a 300px x 250px big box ad - JPG file). I don't want to have the…
Mark Dodgson
  • 181
  • 2
0
votes
1 answer

Create two column form layout at breakpoint using Susy 2

I have a basic contact form that I'd like to have stacked at smaller screen sizes, with a two-column layout at larger sizes. My first three labels and inputs should go into the first column while my textarea and accompanying label should go into the…
Patrick Beeson
  • 1,667
  • 21
  • 36
0
votes
1 answer

Proper padding for nested elements with Susy 2

I am trying to build a simple nested layout with Susy 2: A container with two columns (children), with each child column containing copy and two nested columns (grandchildren). I am noticing that the grandchildren columns have their own gutters and…
aaandre
  • 2,502
  • 5
  • 33
  • 46
0
votes
1 answer

Use gutter removed from a column into witdh of another column - Susy

See below: Please click here to see the image, with the question http://imgr.es/26LP I cant add the gutter with padding, because I'm using Paul Irish global box sizing. Follows my code: $susy: ( columns: 12, gutters: 18/81, …
0
votes
1 answer

Changing a fluid site to two fixed breakpoints in Susy 2

I created a fluid site for a client using Susy 2/breakpoint However they want to change the site to show the mobile layout less than 320px and then the desktop zoomed out ( like loading a fixed width site) on any device above 321px. Is there a way…
user2852784
  • 101
  • 1
  • 4
0
votes
1 answer

Position elements with Susy

I've got a bunch of articles defined in HTML5 like so:

...

...

...
Gargoyle
  • 9,590
  • 16
  • 80
  • 145
0
votes
1 answer

How do I make Susy 1 work?

I'm totally confused by this whole susy/compass thing. If I just try to include susy, then I get tons of errors about things like at-breakpoint not existing. Googling says they're a susy 1 thing. OK, so I try to use that, but now I get errors…
Gargoyle
  • 9,590
  • 16
  • 80
  • 145
0
votes
1 answer

Susy 2 Debug Grids: possible to change individual grid color?

When debug grids overlap, I'm having issues visually delineating the individual grids. Is it possible to specify a color? Thanks!
cs44
  • 1,210
  • 1
  • 9
  • 11
0
votes
1 answer

Add Susy to existing grunt build

I have an existing project that I build with grunt and would like to add Susy. The build works fine without Susy. It looks like Breakpoint should be used with Susy. Both of these require Sass to be at least V3.3. And from the CLI it is: Sass 3.3.10…
OPunWide
  • 133
  • 1
  • 8