1

I have recently started looking into Bourbon and Neat to use on my personal website and potentially for future projects.

I am attempting to recreate an alternating left to right, right to left layout. Similar to this: http://www.plunkettassociates.co.uk/services/

Where there is a 48% column with text followed by a 48% column with an image. This layout then alternates left and right down the page. Critically the DOM structure is the same. CSS is used to manipulate the placement of the 48% columns and margin guttering.

Can someone explain how to achieve this alternating layout using neat?

Markus Von Plunkett
  • 26
  • 4
  • I can't comment on how to do it using neat, but the referenced site uses even/odd classes to determine what should be on which side. A quick scan of the docs doesn't show anything specific, but I image it could be done relatively easily with a Sass mixin. – brennebeck Sep 04 '14 at 12:30
  • Before asking how you can do this with Bourbon/Neat, have you taken the time to consider what the compiled CSS would need to look like to create such a layout? (see: http://stackoverflow.com/questions/17298799/table-style-layout-with-alternating-reversed-rows-and-without-markup-for-rows) – cimmanon Sep 04 '14 at 15:00
  • Thanks for your comments. I have considered it yes. Reference your answer here: http://stackoverflow.com/a/17299816/4007578 do you know how this would be achieved using Bourbon/Neat? – Markus Von Plunkett Sep 04 '14 at 16:25

1 Answers1

0

If you want to use Bourbon/Neat to emulate this layout. You have to know some things:

  • There are a container for some row, in the url you share, the__ tag has this role.
  • Two columns that you can theme it responsive using neat. In the example the col-1-2 class tags.

Neat provides some two mixins for that purpose. outer-container and span-columns:

For example, you can emulate this by this code:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

The Sass code, using Neat. Assuming that you have 12 columns in your page:

.row {
   @include outer-container;
}

.column {
   @include span-columns(6);
}

Finally, the effect on the image is easy, only needs a margin with a negative value. In the example is a -80px of margin-top:

Regards.

Mario Araque
  • 4,562
  • 3
  • 15
  • 25
  • Thanks thats great. I am aware of how to use span-columns, having read through the documentation. Its really nice to work with :) My question is more how to use Neats mixins to achieve the alternating layout whilst maintaining the same DOM structure as referenced here: http://stackoverflow.com/questions/17298799/table-style-layout-with-alternating-reversed-rows-and-without-markup-for-rows – Markus Von Plunkett Sep 04 '14 at 16:32