Search code examples
singularitygs

Singularity grid system gutters

I'm trying to have gutters not only between columns but also left and right of the layout. Is there a way to do that using the add-gutter function?

Solution

  • Unlike Susy, Singularity does not provide scaffolding for containers.

    To my personal taste, this is a great advantage: Singularity does not require any scaffolding either! The result is cleaner, more understandable HTML and CSS.

    This does not mean that Singularity is limited in functionality. When you do need some scaffolding, you are free to build some.

    Singularity provides all the necessary instruments: https://github.com/Team-Sass/Singularity/wiki/Grid-Helpers

    For your purpose, there's the gutter-span() function that returns the width of the guttter relative to the container's width.

    SASS:

    $grids: 4
$gutters: 0.2

.element
  +float-span(1)

.container
  $grid-padding: gutter-span() / 2 //Adjust as necessary
  padding-left: $grid-padding
  padding-right: $grid-padding

    Resulting CSS:

    .element {
  width: 21.73913%;
  clear: right;
  float: left;
  margin-left: 0%;
  margin-right: 4.34783%;
}

.container {
  padding-left: 2.17391%;
  padding-right: 2.17391%;
}