Enhancement to scut-side-lined

[jmaker]

I posted this in the comments over on the css-tricks article but thought I'd put it here as well. I liked that side line feature but thought it would be neat to have a fade option as well. It just uses a simple linear gradient for the effect. I know I used flexbox to get the lines centered up nice and easy, so I hope that's not too advanced for this utility.

Note: I edited the default $color argument to black, otherwise you'd have to explicitly declare a color every time (which you would probably do anyway). Or just leave $color as inherit but you'd have to declare a color every time you wanted the fade. Not sure which way is better.

You can see what I'm talking about here.

http://codepen.io/anon/pen/GuHJL

@mixin scut-side-lined (
  $height: 1px,
  $space: 0.5em,
  $color: black,
  $style: solid,
  $v-adjust: false,
  $double: false,
  $fade: false
) {

  display: block;
  overflow: hidden;
  text-align: center;
  @if $fade != false {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:before,
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 50%;

    border-top-style: $style;
    border-top-width: $height;

    @if $color != inherit {
      border-top-color: $color;
    }

    @if $v-adjust != false {
      bottom: $v-adjust;
    }

    @if $double != false {
      height: $double;
      border-bottom-style: $style;
      border-bottom-width: $height;
      @if $color != inherit {
        border-bottom-color: $color;
      }
    }
  }

  &:before {
    right: $space;
    margin-left: -50%;
  }
  &:after {
    left: $space;
    margin-right: -50%;
  }

  @if $fade != false {
    &:before, &:after {
      border: none;
      width: calc(100% / 3);
      height: $height;
    }
    &:before {
      right: 0;
      margin-right: $space;
      background-image: linear-gradient(to left, $color, transparent 65%);
    }
    &:after {
      left: 0;
      margin-left: $space;
      background-image: linear-gradient(to right, $color, transparent 65%);
    }
  }

}

[davidtheclark]

Thanks for submitting the idea here on Github.

Though I admire what you worked out, I don't want to merge it as it is. I do think we could try to extract some of the ideas to make something that fits in a little better.

I'm not comfortable using flexbox in Scut. Browser support is too exclusive and complicated. And I'm wary of gradient, too. I don't think we need flexbox for this layout, so that should be removable. As for the gradient -- that's kind of the whole point. So the question is: how can we allow the user to easily swap in a gradient without making that gradient a part of the utility? I think an answer might be to rework the side-lined mixin so that it can produce solid blocks (without borders) as well as bordered-blocks (status quo). If we're giving the user solid-block psuedo-elements, she can add a gradient background according to her preferred method -- or use a solid color -- or use an image. (Such a solution might also address some people's desire for something like https://github.com/davidtheclark/scut/pull/101.)

What do you think?

[jmaker]

My thoughts are that you've thought this through much more than I did, so I will defer to your judgement. I knew the idea was a little far fetched, but I'm glad you responded with great feedback.

[davidtheclark]

Here's what I think after a few more thoughts: #101 (full-width stretch) and side-lined are too different to be incorporated into the same mixin and keep it intelligible. And gradient-styles are too use-specific to be incorporated into Scut. scut-bookends addresses the use-case of applying a set of the same styles and mirrored spacing to psuedo-elements on either side of an element, so it could be used for the kind of bookend-gradients I've seen in some designs. Here's an example: http://codepen.io/davidtheclark/pen/FteLz.