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

Susy2 Sass: Centering elements vertically inside grid columns?

I'm having a bit of trouble with vertically centering elements inside of grid column. Typically I'd use table-cell for something like that, but I'm having problems due to the float nature of Susy. Everything I try seems to fall apart at some…
christian
  • 2,279
  • 4
  • 31
  • 42
1
vote
0 answers

Invalid CSS Susy 1.0.9

I got this invalid code. I use it with grunt. I try some versions in combination, still failed. Thanks for your help Ogni Terminal error sass/style.scss (Line 13 of sass/susy/language/susyone/_grid.scss: Invalid CSS after "...x-sizing: true ":…
ogni
  • 327
  • 7
  • 17
0
votes
1 answer

Grid size using susy

I am trying to create a grid structure using the susy plugins but some reason I am getting an extra space for it. $susy: ( gutter-position: after, container: 1280px, container-position: center, columns: 14, gutters: 0.6, …
Neela
  • 311
  • 1
  • 4
  • 16
0
votes
1 answer

What am I doing wrong with npm susy and grunt?

I am trying to compile my scss files using susy, node-sass, grunt-sass I added all these dependencies using npm install. I am adding the setup for grunt like sass: { options: { implementation: sass, sourceMap: true }, …
Subhendu Kundu
  • 3,618
  • 6
  • 26
  • 57
0
votes
2 answers

How to install Susy 2 using npm for use with gulp

According to the Susy 2.1.2 documentation, installing Susy is as simple as running npm install susy --save-dev then altering your Gulpfile in accordance with the afore-mentioned doc. You might suspect this would install 2.1.2. However, this…
DMCoding
  • 1,167
  • 2
  • 15
  • 30
0
votes
1 answer

Susy 2 - Debug image not correct - Not a sub-pixel rounding issue

Have a look at this Sassmeister and let me know where the extra darker blue column to the far right comes from please. I don't believe this is a sub-pixel rounding issue but something else. What really confuses me is that the extra bit shows up with…
lowtechsun
  • 1,915
  • 5
  • 27
  • 55
0
votes
1 answer

Susy with Google Web Starter Kit

Wondering where I went wrong? Trying to get Susy working with Google Web Starter Kit. 1.Cloned GWSK into new directory. 2.Ran yarn to install dependencies. 3.Installed Susy: yarn add susy --dev 4.Added to gulplfile: /* gulpfile.babel.js…
skube
  • 5,867
  • 9
  • 53
  • 77
0
votes
1 answer

Can`t make susy start working

I wanted to start a project with Sass / Compass and for grid I want to use susy. Installed sass -v 3.4.24 Compass 1.0.3 All good and working. After I installed susy 3.0.6 and not working then I tried 2.2.12, and use the simple code body {…
0
votes
1 answer

Susy - sass, not SCSS

I'm trying to get started with Susy (grid system) using sass and gulp. I've got the files imported but I can only find SCSS files of Susy. Are there anywhere you can get sass versions of Susy instead? Håkan
Håkan
  • 161
  • 1
  • 13
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

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

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 Grid 2 / Grid Floats: How to verticle align bottom on a floated element?

Lets say I have a simple floated grid, made with susy (or anything else). How do I make the contents of one of the columns stick to the bottom of that column? I tried verticle-align, align-items, and other combos, but no luck. And since it is made…
TetraDev
  • 16,074
  • 6
  • 60
  • 61
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