Размер внешнего контейнера с Bourbon Neat

Question

Я учусь работать с Bourbon Neat, и я всегда работал с сеткой Bootstrap. Я пытаюсь воссоздать this Bootstrap grid page, чтобы узнать основы Bourbon Neat.

настройки, которые я использую:

// Bourbon Neat Grid Settings 
$column: 70px; 
$gutter: 30px; 
$grid-columns: 12; 
$max-width: em(1170); 
$visual-grid: true; 

Я определил мои контрольные точки и установить их с помощью функции new breakpoint, в котором я могу также изменить количество колонок.

Но я хочу изменить размер контейнера. В Bootstrap, не более ширины контейнера изменяется следующим образом:

@media> 1200px: макс-ширина: 1170px;

@media> 992px: max-width 970px;

@media> 768px: max-width: 750px;

В Bourbon Neat, однако, максимальная ширина устанавливается один раз переменной. В настоящее время у меня установлено значение max-width: em(1170);. Как я могу позволить размер этого контейнера? Как я могу достичь той же страницы примеров с Bourbon Neat вместо Bootstrap 3? Я знаю, что в Susy вы можете set the container width

Answer 1

Что-то вроде следующего может работать:

$large-screen: new-breakpoint(max-width 1200px 12); 
$medium-screen: new-breakpoint(max-width 992px 12); 
$small-screen: new-breakpoint(max-width 768px 6); 

@mixin bootstrap-container { 
    @include outer-container; 
    @include media($large-screen) { max-width: 1170px; } 
    @include media($medium-screen) { max-width: 970px; } 
    @include media($small-screen) { max-width: 750px; } 
} 

Тогда просто использовать подмешать следующим образом:

#foo { 
    @include bootstrap-container; 
} 

Мне интересно услышать ваше мнение.

Answer 2

Вы можете сделать это с некоторыми переопределениями CSS/SCSS в вашей настройке.

Давайте предположим, что у вас есть это в вашем файле SCSS, как стандарт в Бурбон Аккуратные:

$max-width: 1000px; 

@import "bourbon/bourbon"; 
@import "neat/neat"; 

.outer-container{ 
    @include outer-container; 
} 

В настоящее время все, что вы завернуть с внешним контейнером будет иметь максимальную ширину 1000px (или 1170em в вашем примере).

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

.outer-container{ 
    max-width: 800px; 
    @media all and (min-width: 750px){ 
    max-width:1500px; 
    } 
} 

В этом примере максимальная ширина будет в конечном итоге 800px в ширину, если размер экрана не будет больше, то 749px в этом случае максимальная ширина будет 1500px.

Это упрощенная поездка, которая чувствует себя немного взломанной, но должна выполнить свою работу, и вы не беспокоитесь об этом после установки. Если у Bourbon Neat есть правильный способ сделать это, я этого не заметил.

Answer 3

Я думаю, что это ответ на ваш вопрос:

Вы можете изменить значение переменной $max-width в _grid-settings.scss, а затем импортировать этот таблицу стилей в таблице стилей базы Bitters, которая _bitters.scss.

Если вы изменили значение $max-width без импорта _grid-settings.scss, вы не увидите никаких изменений в ширине outer-container.

Answer 4

Если вам нужен visual-grid, который также отображается правильно (как и я), вы можете добавить свои медиа-запросы к visual-grid mixin в файл `clean/grid/_visual-grid.scss. Очевидно, что это не идеальное решение для редактирования основных аккуратных файлов, но я не мог придумать другого способа сделать это.

 @mixin grid-column-gradient($values...) { 
     background-image: -webkit-linear-gradient(left, $values); 
     background-image: -moz-linear-gradient(left, $values); 
     background-image: -ms-linear-gradient(left, $values); 
     background-image: -o-linear-gradient(left, $values); 
     background-image: unquote("linear-gradient(to left, #{$values})"); 
    } 

    @if $visual-grid == true or $visual-grid == yes { 
     body:before { 
     content: ''; 
     display: inline-block; 
     @include grid-column-gradient(gradient-stops($grid-columns)); 
     height: 100%; 
     left: 0; 
     margin: 0 auto; 
     max-width: $max-width; 
     opacity: $visual-grid-opacity; 
     position: fixed; 
     right: 0; 
     width: 100%; 
     pointer-events: none; 

     @if $visual-grid-index == back { 
      z-index: -1; 
     } 

     @else if $visual-grid-index == front { 
      z-index: 9999; 
     } 

     @each $breakpoint in $visual-grid-breakpoints { 
      @if $breakpoint { 
      @include media($breakpoint) { 
       @include grid-column-gradient(gradient-stops($grid-columns)); 
      } 
      } 
     } 

     // HACK to get visual grid to display our max-width at our media queries 
     @include media($large-screen) { max-width: 1170px; } 
     @include media($medium-screen) { max-width: 970px; } 
     @include media($small-screen) { max-width: 750px; } 
     } 

    } 

Любопытный услышать кто-то еще, решение которого

Answer 5

Так как я не могу комментировать, я хотел бы построить от Andrew Hacking's answer, который использует Mixin называется bootstrap-container. Комментарий Voodoocode говорит, что это не работает для визуальной сетки, поскольку оно не касается переменной $ max-width. Для этого вам понадобится фрагмент кода, чтобы установить максимальную ширину для тела: раньше. Он будет работать следующим образом:

@if ($visual-grid) { 
body:before { 
    @include bootstrap-container; 
} 
} 

После этого настройки ширины внешнего контейнера вступают в силу на сетке.

Answer 6

Ничего себе. Какая путающая тема. Но благодаря dasginganinja для его правильной интерпретации. Вопрос не в том, как изменить свойство max-width, а как изменить переменную Neat $max-width для правильного отображения визуальной сетки Neat. Чтобы повторить то, что говорит dasginganinja, вы не можете точно манипулировать переменной, но вы можете настроить таргетинг body:before и установить свойство max-width, которое соответствует вашей ширине outer-container(). MandsAtWork был на правильном пути, но вы можете сделать это без необходимости редактирования основных файлов. Например:

@import "bourbon"; 
@import "neat-helpers"; //IMPORTANT: ADD BEFORE GRID SETTINGS 

// Visual Grid 
$visual-grid: true; 
$visual-grid-color: #d4d4d4; 
$visual-grid-opacity: 0.3; 

// Initial Grid Settings 
$max-width: 100%; 
$grid-columns: 4; 

// Breakpoints 
$sm_val: 480px; 
$md_val: 640px; 
$lg_val: 800px; 
$xl_val: 1000px; 
$xxl_val: 1400px; 

$sm: new-breakpoint(min-width $sm_val 6); 
$md: new-breakpoint(min-width $md_val 7); 
$lg: new-breakpoint(min-width $lg_val 8); 
$xl: new-breakpoint(min-width $xl_val 9); 
$xxl: new-breakpoint(min-width $xxl_val 10); 

@import "neat"; //IMPORTANT: ADD AFTER GRID SETTINGS 

// Container 
@mixin container { 
    @include outer-container(100%); 

    @include media($sm) { 
     @include outer-container($sm_val); 
    } 

    @include media($md) { 
     @include outer-container($md_val); 
    } 

    @include media($lg) { 
     @include outer-container($lg_val); 
    } 

    @include media($xl) { 
     @include outer-container($xl_val); 
    } 

    @include media($xxl) { 
     @include outer-container($xxl_val); 
    } 
} 

@if ($visual-grid) { 
    body:before { 
     @include container; 
    } 
}