-1

Can this be done? I've looked into susy, jeet, singularity etc. I'm using latest version of libsass. I might have a few more options if I switched to Ruby.

I love susy, but for my next project I need fixed gutters (set them in px).

Suggestions welcome!

user1754576
  • 1

1 Answers1

0

If I wanted to use Susy (my favourite grid) with this approach, I’d set the gutter to 0 and manage the margins manually in my Sass, like this:

$susy: (columns: 4, gutters: 0, math: fluid, output: float, last-flow: to)

@import "susy/susy"

body
    background-color: #fff
    margin: 0
    padding: 0
    font-size: 100%
    color: #000

.container
    @include container()

.box
    @include span(1)
    &:last-child
        @include last()
    div
        background-color: #ccc
        margin: 0 10px // Will result in 20px margin
    &:first-child
        div
            margin-left: 0 // Skip, if you want outer gutter
    &:last-child
        div
            margin-right: 0 // Skip, if you want outer gutter

Now, with markup like …

<div class="container">

    <div class="box">
        <div>A</div>
    </div>

    <div class="box">
        <div>B</div>
    </div>

    <div class="box">
        <div>C</div>
    </div>

    <div class="box">
        <div>D</div>
    </div>

</div>

… you’ll get fluid columns with fixed gutter – which is not a gutter for Susy, but a “visible” gutter. Of course if you need breakpoint-dependend behaviour, it’s a little extra work, but IMHO acceptable.

And Susy aside: Bootstrap uses a fixed gutter width. Although I find it pretty cumbersome to rip the grid out of the Bootstrap bloat, if I only want a grid and nothing else.

BlueM
  • 3,658
  • 21
  • 34
  • Thanks. I suppose if I was adding an extra div, I could use Susy's inside-static option. I'll look into this as well. Might be my best option. – user1754576 Jul 19 '15 at 20:20