2

Given the following HTML structure:

<div id="a">
  A
  <div id="b">
    B
  </div>
</div>

...and the following Singularity SCSS:

$grids: 6;
$gutters: .1;
$gutter-styles: 'split';

div#a {
  @include grid-span(5,2)
}

div#b {
  // @todo: position and width.
}

...I want to create a layout like this, where B is pulled left, out of its container A, by 1 column, and spans the 2 leftmost columns:

  -----------
  |  A      |
-----       |
| B |       |
-----       |
  |         |
  -----------

Of course I can do the math myself, but I feel like this should be possible using Singularity mixins and functions (after all, that's why I'm using a grid framework :-)) However, I can't get the dimensions and positioning of B correct.

Which Singularity mixins and/or functions do I use to set the width (column span) and position (negative margin-left) of div#b?

marcvangend
  • 5,592
  • 4
  • 22
  • 32

2 Answers2

1

Something like this seems like what you are looking for: http://sassmeister.com/gist/6663743

scottkellum
  • 590
  • 2
  • 5
  • Thanks, that's a nifty trick, to use a number below 1 for the location argument. I didn't know you can do that. Unfortunately, this doesn't completely solve the problem. The width of A does not include the gutters, so it's less than simply `5/6 * 100%`. The width and margin-left of B are expressed as a percentage of its parent. As a result, the width of B is less than it should be, and its position is not far enough to the left. Your method does align perfectly when you use `$gutters: 0;`, but that's not an option for the design I'm going to implement. – marcvangend Sep 22 '13 at 22:44
  • Ah, ok. Looks like we will have to do a little engineering to get this better supported by Singularity core. The simple ability to query the gutter percentage would be helpful in this instance. – scottkellum Sep 23 '13 at 21:57
1

The answer highly depends on what flow you want inside the #A block.

Keeping the flow

The simpliest thing to do is to pull the #B block outside with a negative margin.

To do that, you should not use the grid-span() mixin. Instead, use the width and margin CSS properties. Values for those properties can be calculated with the column-span() and gutter-span() helper functions.

Those helper functions accept the $grid argument which stands for grid context. You should provide the grid context of the #A block, which is one column less than the main grid.

$grids: 6
$gutters: .1
$gutter-styles: 'split'

$a-columns-width: 5

#a
  +grid-span($a-columns-width,2)
  overflow: visible

#b
  width: column-span(2, 1, $grid: $a-columns-width)
  margin-left: - column-span(1, 1, $grid: $a-columns-width) - gutter-span($grid: $a-columns-width)

Please have a look at the demo: http://sassbin.com/gist/6676220/

Removing #B out of the flow

But the #B block is not taken out of the flow. It still occupies the whole width of the #A block, so you can't put anything to the right of #B.

If you need to put some text and stuff to the right of #B, you should consider using another approach. Absolute positioning is what comes to my mind.

The solution will be more complicated. If you want me to come up with one, please explain your task in more detail. Provide a graphical template, maybe.

You will also have to use some trick to prevent #A's content from being covered by #B.

Flat HTML structure makes things simple

Also, why do you need the nested structure (#B inside #A) in the first place? If you make the structure flat, it becomes plain simple to position the blocks:

#a
  +grid-span(5,2)

#b
  +grid-span(2,1)
  margin-top: 4em

Demo: http://sassbin.com/gist/6676193/

#A's content appearing under #B is still an issue though.

PS If you're not satisfied with the answer, please explain the task in more detail and provide a graphical illustration of the desired page with all #A's contents.

Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133
  • Thank you so much for your detailed answer. To answer your question: I need the nested structure because editors will be able to add a blockquote (B) in the body text (A). The first solution, keeping #b in the flow, is (nearly) exactly what I need. However I want the content of #a to flow around #b. Based on your first demo I was able to create an [improved version](http://sassbin.com/gist/6676960/) which gets rid of the wasted space. All it needed was an additional `float:left` and `margin-right: gutter-span($grid: $a-columns-width)` on #b... and all is perfect! – marcvangend Sep 23 '13 at 21:22