CODEWITHSUNDEEP
htmllayoutsassbourbonneat
Samuel
Samuel

Reputation: 6146

Reversing row direction for every 2nd child using Bourbon neat

I'm attempting to reverse the row layout for every 2nd child using Bourbon Neat reset-layout-direction mixin. However, this does not seem to be working using the nth-child pseudo selector. What am I doing wrong? Here is the codepen

HTML

<div class="boxes">
  <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>
</div>

SCSS

.project{
  @include row();
  //@include row($direction: RTL); //Works here and rightly reverses all rows. 

  .project__image, .project__text {
    background: tint(red,50%);
    margin-bottom: 20px;
    height: 130px;
    @include span-columns(3 of 6);
    @include omega(2n);
  }

  &:nth-child(2n + 2){
        color: red;
    //@include row($direction: RTL); Doesn't work here
        }
}

Edit: I've come up with this solution but its just silly. I shouldnt need to repeat styles in this way - Codepen

Upvotes: 0

Views: 1143

Answers (1)

alexbea
alexbea

Reputation: 1370

I see two options. First, we can use :nth-child to target the even rows, but make it work by also using it to target the odd rows. Still some duplicate looking code to make Neat work, but at least moving the shared code into a new rule to reduce duplication.

HTML

<div class="boxes">
  <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>
  <!-- And so on... -->
</div>

CSS

// Visual styles here.
.project {
  @include row($direction: LTR);

  .project__image,
  .project__text {
    background: tint(red,50%);
    margin-bottom: 20px;
    height: 130px;
  }
}

// These are your odd rows. Even minus one.
.project:nth-child(2n-1) {
  //@include row($direction: RTL); //Works here and rightly reverses all rows. 
  .project__image,
  .project__text {
    @include span-columns(3 of 6);
    @include omega(2n);
  }
}

These are your even rows.
.project:nth-child(2n) {
  @include row($direction: RTL);

  .project__image,
  .project__text {
    @include span-columns(3 of 6);
    @include omega(2n);
  }
}

You could also use Flexbox. Same HTML markup as above. We're using Neat for the proper column widths, then removing the margin from all children. Then Flexbox is used to separate the columns, leaving a gutter. On even rows, we use flex-direction: row-reverse; to reverse the two sides.

CSS

.project {
  display: flex;
  justify-content: space-between;

  .project__image,
  .project__text {
    @include span-columns(3 of 6);
    @include omega(2n);
    margin-right: 0;
    background: tint(red,50%);
    margin-bottom: 20px;
    height: 130px;
  }
}

.project:nth-child(2n) {
  flex-direction: row-reverse;
}

Definitely less code. CodePen: https://codepen.io/alexbea/pen/jyjqwV

Upvotes: 0

Related Questions