使用Thoughtbot Bourbon/Neat重新排序列 [英] Re-ordering columns with Thoughtbot Bourbon/Neat

问题描述

我一直在寻找关于如何使用Thoughtbot的Neat网格框架在不同断点处重新排序/移动列位置的最佳解决方案?

I was looking for the best solution on how to re-order/shift the position of columns at different breakpoints using Thoughtbot's Neat grid framework?

我想以此来移动标题中的元素(以桌面分辨率):

I would like to shift elements in my header from this ( in desktop resolution):

为此(以移动分辨率):

to this ( in mobile resolution):

我的HTML看起来像这样:

My HTML looks like this:

<header>
    <section id='header_elements'>
      <p id="chocolat_logo"><strong><a href="#"><img alt="Chocolat Restaurant Logo" itemprop="logo" src="/assets/main_logo.png" /></a></strong></p>
      <nav>
        <ul>
          <li id='home_link'>
            Home
          </li>
          <li id='menus_link'>
            <a href="/menus/evening" itemprop="menu">Menus</a>
          </li>
          <li id='drinks_link'>
            <a href="/menus/wine-list" itemprop="menu">Drinks</a>
          </li>
          <li id='contact_link'>
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </nav>
      <ul id='top_contact_details'>
        <li class='social_link' id='twitter_link'>
          <a href='twitter'>
           Twitter
          </a>
        </li>
        <li class='social_link' id='facebook_link'>
          <a href='facebook'>
            Facebook
          </a>
        </li>
        <li id='top_phone''>
          <span>
            (061)
          </span>
          412 888
        </li>
      </ul>
    </section>
  </header>

并且SCSS看起来像这样(为了清楚起见，我删除了与实际布局无关的所有内容，如果相关的话，我将该标头的完整SCSS代码放在

and the SCSS looks something like this ( for the sake of clarity, I removed anything which wasn't related to the actual layout, should it be relevant, I put the full SCSS code for that header on this gist):

header{
  @include outer-container;

  #header_elements{
    width: 100%;
    height: 100%;

    // LOGO
    #chocolat_logo{
      float: left;
      @include span-columns(3);
      @include media($mobile) {
        float: left;
        @include span-columns(6);
      }
    }

    // Main Navigation
    nav{ 
      @include media(min-width 480px){
        @include span-columns(6);
      } 
      @include media($mobile) {
        @include fill-parent();
      }

    }

    //Contact Details
    #top_contact_details{
      @include span-columns(3);
      @include media($mobile) {
        @include span-columns(6);
      }
    }
  }
}

我基本上是想知道模仿Zurb的基金会在波旁/整齐的推/拉重新排序功能.

I am basically looking to know what the best/most elegant way would be to mimic Zurb's Foundation's push/pull re-order functions in Bourbon/Neat.

非常感谢您的任何建议/帮助！

Thanks a lot for any suggestion/help!

推荐答案

内容优先级排序

如果要切换特定视图中元素的显示顺序而不更改HTML中内容的顺序，Neat支持便捷直观的负行定位.您可以像这样轻松地在其父元素内移动每一列:

If you want to switch the order of display for elements in a particular view without changing the order of the content in your HTML, Neat supports convenient and intuitive negative row positioning. You can shift each column around inside its parent element as easily as this:

section {
  @include outer-container;
  aside {
    @include span-columns(3);
    @include shift(-12);
  }
  article {
    @include span-columns(9);
    @include shift(3);
  }
}

现在article元素将在左侧，而aside则将在右侧.而且，您可以像以前一样添加移动样式，以保持响应式显示的一致性:

Now the article element will be on the left, and the aside will be on the right. And you can add back the mobile styles the same way as we had them before to keep your responsive display consistent:

$mobile: new-breakpoint(max-width 500px 4);

section {
  @include outer-container;
  aside {
    @include span-columns(3);
    @include shift(-12);
    @include media($mobile) {
      @include span-columns(4);
    }
  }
  article {
    @include span-columns(9);
    @include shift(3);
    @include media($mobile) {
      @include span-columns(4);
    }
  }
}

在此处查看全文: http://www.sitepoint.com/sass- bourbon-neat-lightweight-semantic-grids/

这篇关于使用Thoughtbot Bourbon/Neat重新排序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！