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

In a Susy gallery I need to span the first element across the first two gallery columns

Another very similar question has already been asked. I've set a gallery composed of elements in six columns. However I want the first element to span the first two columns of the gallery. $deskcol : 12; .colSixth { @include gallery(2 of…
Seb
  • 723
  • 1
  • 6
  • 11
0
votes
2 answers

using the first-child selector with susy navigation

I am trying to add some pipe (|) styling to my navigation. My susy code is @include with-layout(6 inside, true){ @include span(1); I have added &::before { content: " | "; } but when I add &:first-child { …
0
votes
1 answer

set column position with Susy

How do I set where the columns show up in Susy? I thought this would work: #idLeftColumn{ @include span(1 at 1 first); } #idMiddleColumn{ @include span(1 at 2); } #idRightColumn{ @include span(1 at 3 last); } The html code has the order…
brian
  • 773
  • 4
  • 9
  • 24
0
votes
0 answers

Susy 2 and Media Queries

I need some help about setting breakpoints for my theme. Basically it's some simple : mobile; tablet and desktop. But the issue come with landscape orientation and device resolution. Actually this is my variables and a code example: $mobile : …
webmaster pf
  • 389
  • 1
  • 5
  • 23
0
votes
1 answer

fixed width sidebar uses more than the 3 defined columns

i have a little problem when I'm using a fixed position element with susy. I know that Elements with a fixed position are sized relative to the viewport rather than the grid. But I don't know how to solve this problem. I made a pen to show the…
emjay
  • 1,491
  • 5
  • 17
  • 35
0
votes
1 answer

Struggling with creating a navigation bar with angled divs that are stacking on top of each other

I'm a visual designer struggling to code, to cut to the chase, below is the problem: What I'm trying to achieve: Goal 1 and Goal 2 screenshots, including my current dilemma, I've placed a link below (as I'm not allowed to include screenshots yet as…
canecorso
  • 211
  • 1
  • 2
  • 7
0
votes
1 answer

How to assign the height of an element as a ratio of its width with Susy v2

I have broadly two aspect ratios (1:1 and 16:9) that according to a page's layout may occupy 4, 8 or 12 columns in a 12 column grid. How do I pass the values set by, say, span(4 of 12) to the same element's hight? A very similar question has already…
Seb
  • 723
  • 1
  • 6
  • 11
0
votes
2 answers

Laravel Gulp Elixir with Sass and including libraries

I've just started using Laravel 5.0 and noticed it comes installed with Gulp and it's own library called Elixir. Looks good, however I'm having trouble including libraries such as Susy and Breakpoint to run with it. In a typical Gulp setup I would…
Liam Chapman
  • 140
  • 3
  • 10
0
votes
1 answer

Custom columns width with fluid grid susy

I would like to know if there is a way to change column width on susy but using fluid layouts instead of static.
bxg83613
  • 1
  • 1
0
votes
1 answer

SUSY - using fractions for the gutter

When I setup my grid with a map in susy $susy: ( columns: 12, gutters: 1/4, math: fluid, output: float, gutter-position: inside, ); It does not like the gutter as a fraction and I have had to change this to a decimal. No big deal but why…
LeBlaireau
  • 17,133
  • 33
  • 112
  • 192
0
votes
1 answer

How to use Susy for Static Layouts?

I am struggling to learn Susy and building responsive pages with it. Prior to Susy I have been using Bootstrap grid and have gotten used to designing web pages using that Grid. When I design in Bootstrap Grid I know the exact with of the columns and…
Afraz Ali
  • 2,672
  • 2
  • 27
  • 47
0
votes
2 answers

How to work around @mixins naming conflicts?

I use Zurb Foundation along with Susy grids, they both have a mixin named "prefix". I'm using "bower" to include them in my project, so how to namespace them without changing in their source code?
Kevin Grace
  • 535
  • 1
  • 4
  • 7
0
votes
1 answer

Can't Get Susy Version 2 to work

I've started using Susy 2 with my Rails projects and now I want use it with a php project. I just installed sass-3.4.11, compass-1.0.3 and susy-2.2.2 using rbenv to control my environment. I imported compass and susy at the start of my scss file…
curt
  • 4,422
  • 3
  • 42
  • 61
0
votes
2 answers

Adding Padding to the sides keeps breaking layout

I thought I had Susy down, but have been struggling with this for a couple of hours now. I feel incredibly stupid, too, because I have never had this problem before, so I know it is on my end. Probably a misunderstanding of the box model, but here…
Colby Work
  • 13
  • 5
0
votes
1 answer

Susy, proper way to put page left and right margins

I am trying to use susy in one of my web sites. I have set susy map settings with a 12 column layout i have gutters ( right margins ) between columns... What is the proper way to give the 'container' a left and right margin ( or padding )?
ratata
  • 1,129
  • 14
  • 42