Search code examples
csssasssusy

Susy 2: background color on a nearby gutter

OK, first of all I tried to show the issue with Sassmeister, but it's so f... slow to compile that I just gave up. I use Susy, SCSS and Haml.

issue

So here is the image that I think is relevant. I want to make the black bar at the top (background-color) to touch the black sidebar at the side. In other words - to add background color to gutter.

Here's my code:

HTML:

<div class="page">
  <div class="nav">
    <div class="brand">
      <a class="name" href="/">Tomasz Gałkowski</a>
    </div>
    <div class="work">
      <a class="projects" href="#">projects</a>
      <a class="timeline" href="#">timeline</a>
    </div>
    <div class="blog">
      <a class="articles" href="#">articles</a>
      <a class="about" href="#">about me</a>
      <a class="contact" href="#">contact</a>
    </div>
  </div>
  <div class="content">
    <div class="header">
      <h1>Tomasz Gałkowski</h1>
      <h2>web developer</h2>
    </div>
    <div class="main">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="footer">
      <small>Tomasz Gałkowski, 2016</small>
      <p>gitlab, facebook, twitter</p>
    </div>
  </div>
</div>

And (relevant) SCSS:

$susy: (
  columns: 12,
  gutters: 1/2,
  debug: (image: show)
);

.page {
  @include container;
  @include clearfix; // from compass
}

.nav {
  @include span (3 of 12);
  background: $background-dark;
  height: 100vh;
}

.content {
  @include span(last 9 of 12);
  background: $white;

  .header {
    background: $background-dark;
  }
}

I was trying some stuff with bleed() or gutters() but it just didn't work the way I wanted it to work. I'm just starting to learn Susy and though I crawled through the whole documentation I wasn't really able to grasp this concept. :)

Solution

  • Susy doesn't really consider colors you'd want for gutters, as they are paddings or margins between grid elements.

    The gutter between the nav and .content elements is just a margin between elements.

    grid

    As the picture above illustrates, between the dark-yellow and the pink-ish elements, there is just a margin.

    You can achieve having $background-dark as a background in the shape you described if you add the background to the container wrapper, being .page (that's the element you see between your columns) - the green element on the illustration. By then putting white background on the blue elements you want (.main and .footer), you'll pretty much be there.

    Depending on what you're after with the space beneath .footer you may need to extend it's height somewhat, since .page will be visible.

    If you're really set on not putting a background on .page, you could use the pseudo element &:before of .content to overlay the gutter between your columns. If feels like patch-work and I wouldn't recommend it.