CODEWITHSUNDEEP
htmlcsssasscompass-sasssusy-compass
patrick
patrick

Reputation: 584

Compass Vertical Rhythm - HR tags breaks vertical grid

I'm trying to understand vertical rhythm and read the whole day about, tried several things but my layout keeps breaking because I fail to apply compass padding trailer correctly as you can see in the screen shot:

!screenshot

Here's my code:

HTML:

<article>…</article>
<hr/>
<article>…</article>

CSS:

hr {
  background: rgba(yellow, 0.3);
  @include trailing-border;
  //border: 0;
  //height: 0;
  //border-top: 1px solid rgba(0, 0, 0, 0.1);
  //border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

For the sake of keeping it simple I commented my HR styling out.

Here's another example where the gap is more visible:

!screenshot2 

hr {
  background: rgba(yellow, 0.3);
  @include trailer(1.5);
  @include trailing-border;
  @include leader(1.5);
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

I don't know what I'm doing wrong here. Please help me out to understand this property.

Links:

Upvotes: 1

Views: 2417

Answers (2)

William G. Rivera
William G. Rivera

Reputation: 1

I had similar problems.

In my case, I have a base font size of 12px and a baseline of 18px.

As Eric said, "by adding two 1px borders, you know that you are breaking the rhythm by 2px".

This is where the leading-border and trailing-border mixins can help you.

  1. leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)

  2. trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)

Unfortunately, by default, these mixins will combine the borders with paddings but no margins (what I needed for my hr tag with top and bottom border of 1px each).

What I did was to override the default mixins to add the margin property (not sure if it is a good idea or not to do this):

@function rhythm($lines: 1, $font-size: $base-font-size, $offset: 0) {
    @if not $relative-font-sizing and $font-size != $base-font-size {
        @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
    }

    $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;

    // Round the pixels down to nearest integer.
    @if unit($rhythm) == px {
        $rhythm: floor($rhythm);
    }

    @return $rhythm;
}

/*override original apply-side-rhythm-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {

    @if not $relative-font-sizing and $font-size != $base-font-size {
        @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"; }

    border-#{$side}: {
        style: $border-style;
        width: $font-unit * $width / $font-size; };

    #{$property}-#{$side}: rhythm($lines, $font-size, $offset: $width);
}

/*override original leading-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {
    @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style, $property);
}

/*override original trailing-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {
    @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style, $property);
}

Now my hr tag:

hr {
    @include leading-border($property:margin);
    @include trailing-border($property:margin);
    border-bottom-color: #353535;
    border-top-color: #0d0d0d;
}

Will compile to:

hr {
    border-bottom: 0.083em solid #353535;
    border-top: 0.083em solid #0D0D0D;
    margin-bottom: 1.417em;
    margin-top: 1.417em;
}

And my vertical rhythm is not breaking any more.

Give it a try and let me know if it works.

Upvotes: 0

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

You have several problems here.

1) Browsers apply default top/bottom margins that you need to either override or reset. A full <hr/> reset looks something like this:

hr {
  border: 0;
  height: 0;
  margin: 0;
}

2) With that reset in place, the trailing-border mixin will work (I've left your yellow in place so you can see the padding it adds as well as the border):

hr {
  @include trailing-border; // adds padding-bottom and border-bottom properties
  background: rgba(yellow, .3); // shows in the padding
}

You can also add your leader and trailer there. That will work to create a single line that fits the rhythm and has space around it, but I don't think this is what you are trying to do.

3) It looks like you want a two-tone border by setting both top and bottom borders at different colors. That can work, but you don't want to use trailing-border. In fact, there is no mixin from vertical-rhythms that will help you with this - you'll have to do it by hand. By adding two 1px borders, you know that you are breaking the rhythm by 2px. So simply get those px back, and you are good to go:

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: -2px 0 0 0;
}

You can subtract those 2px from either the top or bottom, and you can add either leader or trailer to the other side (but not both). You'll have to get your extra space from margin on the articles instead.

Upvotes: 4

Related Questions