Основа 6 XY Grid Создание семантически адаптивного синтаксиса - PullRequest
Новая
       33

Основа 6 XY Grid Создание семантически адаптивного синтаксиса

0 голосов
/ 17 октября 2018

Поэтому я решил не использовать классы по умолчанию для создания своих компонентов на веб-сайте.

Я использую синтаксис «Семантическое построение», но я думаю, что я должен что-то делать неправильно, поэтому нижеHTML-макет моего компонента и для сравнения я использую классы по умолчанию, чтобы убедиться, что он одинаково нормально выравнивается ...

Мне удалось получить его для репликации макета, включая интервал полей, но, похоже, мне нужноопределить точку останова, если я хочу, чтобы поле уменьшилось на экранах меньшего / большего размеров, что, я уверен, будет сделано без необходимости использования точек останова?

Я предполагал, что это уменьшится в размере, поскольку я действительно не хочу добавлять для этого целую загрузку точек останова?

Так что, если вы не включите точку останова, размер поля останется прежнимтогда как классы по умолчанию изменяются в зависимости от размера, который выталкивает все из строки

HTML-макет 

 <div class="contain">
    <div class="wrapper">
        <div class="site-header__logo">
            Test
        </div>
    </div>
    <div class="grid-x grid-margin-x">
      <div class="cell">
            Test
      </div>
    </div>
</div>

SCSS 

.contain {
   @include xy-grid-container;
}

.wrapper {
    @include xy-grid();
    @include xy-gutters($negative: true);
}

.site-header__logo {
    @include xy-cell(2);
    @include breakpoint(medium up) {
        @include xy-cell(2, $breakpoint: medium);
    }
}
...