Изменение порядка столбцов с помощью Thoughtbot Bourbon/Neat

Я искал лучшее решение о том, как изменить порядок/сместить положение столбцов в разных точках останова, используя структуру сетки Thoughtbot Neat?

Я хотел бы сместить элементы в моем заголовке из этого (в разрешении рабочего стола): введите описание изображения здесь

к этому (в мобильном разрешении):

введите здесь описание изображения

Мой HTML выглядит так:

<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 для этого заголовка на суть):

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 Функции переупорядочивания Foundation/Push в Bourbon/Neat.

Большое спасибо за любое предложение/помощь!


sass bourbon neat
person Concordia Discors    schedule 21.07.2014    source источник
comment
Привет @KatieK, извините за отсутствие ясности ... Я только что отредактировал свой исходный вопрос, включив в него упрощенные версии моего кода HTML / CSS, а также несколько снимков экрана, чтобы как-то прояснить мою точку зрения. Ваше здоровье!   -  person Concordia Discors    schedule 24.07.2014

Ответы (3)


arrow_upward
6
arrow_downward

Приоритет содержания

Если вы хотите изменить порядок отображения элементов в определенном представлении, не меняя порядок содержимого в вашем HTML, Neat поддерживает удобное и интуитивное отрицательное позиционирование строк. Вы можете легко перемещать каждый столбец внутри его родительского элемента следующим образом:

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

Теперь элемент article будет слева, а aside справа. И вы можете вернуть стили для мобильных устройств так же, как они были у нас раньше, чтобы сохранить единообразие адаптивного отображения:

$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/

person drjorgepolanco    schedule 10.03.2015

arrow_upward
0
arrow_downward

Если вам трудно проверить позиции сдвига, вы всегда можете перейти к проверке элемента и сдвинуть проценты полей, чтобы получить идеальные результаты.

person designerNProgrammer    schedule 05.04.2015
comment
Как это отвечает на вопрос? - person cimmanon; 05.04.2015

arrow_upward
0
arrow_downward

Пример drjorgepolanco не работает. Я не нашел рабочего решения для перемещения столбцов в Neat. В Bootstrap Framework это легко сделать с помощью классов .pull-* и .push-*.

Мое решение для Neat:

section {
  @include outer-container;
  position:relative
aside {
  @include span-columns(3);
  @include shift(9);
}
article {
  @include span-columns(9);
  position:absolute;
  }

Я понимаю, что это хак, но у меня работает }

person Олег Плюта    schedule 05.04.2016