Search code examples
singularitygsbreakpoint-sass

Singularity responsive gutter widths

I use Singluritygs and Breakpoints (with the included respond-to) and I want my global gutter width to change according to those breakpoints.

I thought this would work, but it doesn't:

$breakpoints: add-breakpoint('small', 768px);

@include add-grid(12);
@include add-gutter(1);

@include respond-to('small') {
    @include add-gutter(1/2);
}

Am I approaching this the wrong way?

Note that adding a grid does work using this technique:

@include respond-to('small') {
    @include grid-span(9, 4);
}
Solution

  • Problem and solution

    1. Singularity is not compatible with Respond-To. Or, to be more precise, Respond-To does not provide functionality required by Singularity.

    2. The correct way of defining responsive gutters is described here and looks like this:

      @include add-gutter(.25 at 900px);.

    3. Responsive grids and gutters should be defined on top of your Sass, alongside mobile-first grids and gutters.

    Example:

    $bp-small: 768px;

@include add-grid(12);
@include add-gutter(1);
@include add-gutter(1/2 at $bp-small);

.foo {
  @include float-span(1);
  @include breakpoint($bp-small) {
    @include float-span(1);
  }
}

    Demo:

    http://sassmeister.com/gist/b49bd305f029afe9cd68

    Update 1

    davidpauljunior

    I thought Singlurity was compatible with respond-to, I'm using it to successfully add new grids - see my added note in the question. The docs say that for reponsive grids use Breakpoint, and Breakpoint includes Repond-to in it (github.com/Team-Sass/breakpoint/wiki/Respond-To).

    You were doing it wrong.

    Singularity maintains a list of grid definitions for various breakpoints (and another list for gutter definitions). When spanning, Singularity asks Breakpoint for the context (current breakpoint) and retrieves corresponding grid and gutter definitions from lists.

    When used with Respond-To, Singularity is unable to retrieve the context and considers that it spans item in the mobile-first context.

    Instead populating the grid/gutter definition lists with defintions for each breakpoint, you had only one entry in the list -- the mobile first one.

    By reapplying add-gutter() inside a media query, you thought that you were setting the gutter definition for that media query. But instead you were overwriting the mobile-first grid definition globally. And due to Respond-To not reporting context to Singularity, it was using the mobile first definition inside the media query.

    This is a valid approach per se. In fact, i've being actively using it with Singularity 1.0. But it has an obvious downside: due to the fact that grid/gutter definitions are overridden globally, you end up needing to reapply add-grid() and add-gutter() before every usage of spanning mixins, otherwise there's a change that Singularity will be using definitions that you don't expect. This is especially the case if you organize your Sass code in a large number of small files.

    I suggest that you investigate two extensions that i wrote:

    • Breakpoint Slicer -- a very quick and efficient syntax for Breakpoint. It's better than Respond-To, and has full support for Singularity.
    • Singularity Quick Spanner -- a tool with a number of shortcut mixins for Singularity. One of them is designed to ease the approach of reapplying grid/gutter definitions every time.

    Update 2

    davidpauljunior

    I still don't see why if grids can be redefined globally within Respond-to media queries, why gutters can't. Also, you said I only have 1 entry 'the mobile first one', but that entry was the screen size after mobile first (768px).

    You have to understand that @include add-gutter(1/2); overwrites the mobile-first gutter definition regardless of whether you execute it inside a media query or not.

    Above i have already explained (and provided a link to documentation) how media query-aware grids and gutters should be defined. Repeating:

    lolmaus

    The correct way of defining responsive gutters is described here and looks like this:

       `@include add-gutter(.25 at 900px);`.

    This is how your initial attempt actually works: http://sassmeister.com/gist/c530dfe7c249fad254e9 Please study this example and its output, i hope you will understand now.

    davidpauljunior

    The idea was that for no media query (mobile first) it would take the global gutter, for my first media query (768 and up) I would reset the global gutter and so on. I've set them all using variables now. Perhaps I'm just missing something about Respond-To.

    Again, i have already said that this is a valid approach. My last SassMeister link proves that it is already working for your initial attempt.

    And Respond-To is suitable for this situation: it doesn't report the media query context to Singularity, but you're not having Singularity take the media query context into account, you're having it use only the mobile-first definition all the time.

    Just don't forget to reapply grids and gutters every time you span a new element, just to make sure that you're doing it in the desired context.

    You can make the job of resetting the grid/gutter definitions easier with my reset-grid() helper.