css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<div class="container">
  
  <h1>Одна модульная сетка, чтоб править всеми (SCSS-примеси)</h1>
  <p>6 возможных ширин. Mobile first. Любое количество колонок, любые отступы колонок, любая ширина ячеек. Настройки в переменных.</p>
  <p>Flexbox. Поддержка IE11+. Использовать с какими-либо оптимизаторыми CSS.</p>
  <p><a href="https://github.com/nicothin/NTH-start-project/blob/master/src/scss/mixins/grid-mixins.scss">Файл с эими примесями</a>. <a href="https://github.com/nicothin/NTH-start-project/">Репозиторий, из которого взят код</a>.</p>
  <p>Необходимая структура:</p>
  <ul>
    <li>Контейнер — общая обёртка, обеспечивающая боковые отступы (<code>padding</code>), может содержать любой контент</li>
    <li>Прямой родитель сетки — обёртка ячеек, обеспечивающая отрицательные боковые отступы (<code>margin</code>)</li>
    <li>Ячейки любой ширины (по умолчанию колонок 12, для изменения — переопредить переменную)</li>
  </ul>
  <p>Как пользоваться: пишем семантичные имена классов, применяем примеси. </p>
  
  <h2>Переменные</h2>
  <p>Смотри в области описания SCSS переменные и их значения по умолчанию.</p>
  
  <h2>Примеси</h2>
  <pre>
    <code>// Генератор правил для контейнера</code>
    <code>@mixin container (</code>
    <code>  $xs-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $sm-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $md-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $lg-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $xl-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $xxl-grid-gutter: $grid-gutter-width <span class="comment"> // Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>) {...}</code>
    <code> </code>
    <code>// Генератор правил для обёртки сетки</code>
    <code>@mixin row (</code>
    <code>  $xs-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $sm-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $md-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $lg-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $xl-grid-gutter:  $grid-gutter-width, <span class="comment">// Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>  $xxl-grid-gutter: $grid-gutter-width <span class="comment"> // Можно передать своё расстояние между ячейками для этой ширины</span></code>
    <code>) {...}</code>
    <code> </code>
    <code>// Генератор правил ячейки сетки для конкретной ширины</code>
    <code>@mixin col (</code>
    <code>  $screen:  xs, <span class="comment">                    // тип сетки [xs|sm|md|lg|xl|xxl]</span></code>
    <code>  $column:  $grid-columns, <span class="comment">         // ширина (кол-во колонок для этой ячейки)</span></code>
    <code>  $columns: $grid-columns, <span class="comment">         // общее количество ячеек на 1 ряд</span></code>
    <code>  $gutter:  $grid-gutter-width <span class="comment">     // промежуток между ячейками</span></code>
    <code>) {...}</code>
  </pre>
  
  <h2>Пример с кодом</h2>
  <p>Разметка:</p>
  <pre>
    <code>&lt;section class="<b>promo</b>"></code>
    <code>  &lt;div class="<b>promo__inner</b>"></code>
    <code>    &lt;h2><span class="comment">Заголовок промо</span>&lt;/h2></code>
    <code>    &lt;p><span class="comment">Произвольный контент до модульной сетки</span>&lt;/p></code>
    <code>    &lt;div class="<b>promo__grid</b>"></code>
    <code>      &lt;div class="<b>promo__img</b>"></code>
    <code class="comment">        Картинка. На малых ширинах блок — 12 из 12 колонок, на ширине 768+ — 5 из 12.</code>
    <code>      &lt;/div></code>
    <code>      &lt;div class="<b>promo__text</b>"></code>
    <code class="comment">        Текст. На малых ширинах блок — 12 из 12 колонок, на ширине 768+ — 7 из 12.</code>
    <code>      &lt;/div></code>
    <code>    &lt;/div></code>
    <code>  &lt;/div></code>
    <code>&lt;/section></code>
  </pre>
  <p>Стилизация:</p>
  <pre>
    <code>.promo {</code>
    <code>    </code>
    <code>  &__inner {</code>
    <code class="comment">    // это контейнер, padding по умолчанию (из переменной) </code>
    <code>    @include container(); </code>
    <code>  }</code>
    <code> </code>
    <code>  &__grid {</code>
    <code class="comment">    // это прямой родитель сетки, margin по умолчанию (из переменной)</code>
    <code>    @include row();</code>
    <code>  }</code>
    <code>  </code>
    <code>  &__img {</code>
    <code class="comment">    // узкий вьюпорт, 100% ширина и padding по умолчанию</code>
    <code>    @include col();</code>
    <code class="comment">    // MD-вьюпорт (786 по умолчанию) ширина 5 колонок и padding по умолчанию</code>
    <code>    @include col(md, 5);</code>
    <code>  }</code>
    <code>  </code>
    <code>  &__text {</code>
    <code class="comment">    // узкий вьюпорт, 100% ширина и padding по умолчанию</code>
    <code>    @include col();</code>
    <code class="comment">    // MD-вьюпорт (786 по умолчанию) ширина 7 колонок и padding по умолчанию</code>
    <code>    @include col(md, 7);</code>
    <code>  }</code>
    <code>}</code>
  </pre>
  <p>Работающий код:</p>
</div>

<section class="promo">
  <div class="promo__inner">
    <h2>Заголовок промо</h2>
    <p>Произвольный контент до модульной сетки</p>
    <div class="promo__grid">
      <div class="promo__img">
        Картинка. На малых ширинах блок —&nbsp;12 из&nbsp;12 колонок, на&nbsp;ширине 768+&nbsp;— 5&nbsp;из&nbsp;12.
      </div>
      <div class="promo__text">
        Текст. На малых ширинах блок —&nbsp;12 из&nbsp;12 колонок, на&nbsp;ширине 768+&nbsp;— 7&nbsp;из&nbsp;12.
      </div>
    </div>
  </div>
</section>

<div class="container">
  <h2>Прочие примеры модульных сеток</h2>
  <h3>Одинаковая на всех ширинах</h3>
  <div class="row-1">
    <div class="row-1__element"><div class="test">01</div></div>
    <div class="row-1__element"><div class="test">02</div></div>
    <div class="row-1__element"><div class="test">03</div></div>
  </div>
  <pre>
    <code>.row-1</code>
    <code>  @include row;</code>
    <code>   </code>
    <code>  &__element {</code>
    <code class="comment">    // на всех ширинах — 6 из 12</code>
    <code>    @include col(xs, 6);</code>
    <code>  }</code>
    <code>}</code>
  </pre>
  
  <h3>Ячейки на всех ширинах имеют свою ширину</h3>
  <div class="row-2">
    <div class="row-2__element"><div class="test">01</div></div>
    <div class="row-2__element"><div class="test">02</div></div>
    <div class="row-2__element"><div class="test">03</div></div>
    <div class="row-2__element"><div class="test">04</div></div>
    <div class="row-2__element"><div class="test">05</div></div>
    <div class="row-2__element"><div class="test">06</div></div>
    <div class="row-2__element"><div class="test">07</div></div>
  </div>
  <pre>
    <code>.row-2</code>
    <code>  @include row;</code>
    <code>   </code>
    <code>  &__element {</code>
    <code class="comment">    // малые ширины — 12 из 12</code>
    <code>    @include col();</code>
    <code class="comment">    // SM (480 по умолчанию) — 6 из 12</code>
    <code>    @include col(sm, 6);</code>
    <code class="comment">    // MD (768 по умолчанию) — 4 из 12</code>
    <code>    @include col(md, 4);</code>
    <code class="comment">    // LG (992 по умолчанию) — 3 из 12</code>
    <code>    @include col(lg, 3);</code>
    <code class="comment">    // XL (1200 по умолчанию) — 2 из 12</code>
    <code>    @include col(xl, 2);</code>
    <code class="comment">    // XXL (1800 по умолчанию) — 1 из 12</code>
    <code>    @include col(xxl, 1);</code>
    <code>  }</code>
    <code>}</code>
  </pre>
  
  <h3>Ячейки на разных ширинах имеют свою ширину, промежутки между ячейками разные на разних ширинах</h3>
  <div class="row-3">
    <div class="row-3__element"><div class="test">01</div></div>
    <div class="row-3__element"><div class="test">02</div></div>
    <div class="row-3__element"><div class="test">03</div></div>
    <div class="row-3__element"><div class="test">04</div></div>
  </div>
  <pre>
    <code>.row-3 {</code>
    <code class="comment">    // для родителя заданы отступы между колонками</code>
    <code>  @include row($grid-gutter-width, 10px, 12px, 16px, 20px, 26px);</code>
    <code>  </code>
    <code>  &__element {</code>
    <code class="comment">    // малые ширины — 12 из 12, промежутки по умолчанию</code>
    <code>    @include col();</code>
    <code class="comment">    // SM (480 по умолчанию) — 6 из 12, промежутки 10px</code>
    <code>    @include col(sm, 6, $grid-columns, 10px);</code>
    <code class="comment">    // MD (768 по умолчанию) — 4 из 12, промежутки 12px</code>
    <code>    @include col(md, 4, $grid-columns, 12px);</code>
    <code class="comment">    // LG (992 по умолчанию) — 3 из 12, промежутки 16px</code>
    <code>    @include col(lg, 3, $grid-columns, 16px);</code>
    <code class="comment">    // XL (1200 по умолчанию) — 2 из 12, промежутки 20px</code>
    <code>    @include col(xl, 2, $grid-columns, 20px);</code>
    <code class="comment">    // XXL (1800 по умолчанию) — 1 из 12, промежутки 26px</code>
    <code>    @include col(xxl, 1, $grid-columns, 26px);</code>
    <code>  }</code>
    <code>}</code>
  </pre>
</div>
            
          
!
            
              // Автор: Николай Громов
// Репозиторий, из которого взят код
// https://github.com/nicothin/NTH-start-project/
// Файл с эими примесями
// https://github.com/nicothin/NTH-start-project/blob/master/src/scss/mixins/grid-mixins.scss 

$screen-xs:                   0 !default;
$screen-sm:                   480px !default;
$screen-md:                   768px !default;
$screen-lg:                   992px !default;
$screen-xl:                   1200px !default;
$screen-xxl:                  1800px !default;

$container-sm:                100% !default;
$container-md:                100% !default;
$container-lg:                ($screen-lg - 30) !default;
$container-xl:                ($screen-xl - 30) !default;
$container-xxl:               ($screen-xxl - 30) !default;

$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;



//------------------------------------------------------------------------------
//  Генератор правил для контейнера, внутри которого расположен прямой родитель
//  модульной сетки.
//------------------------------------------------------------------------------

@mixin container (
  $xs-grid-gutter:  $grid-gutter-width,
  $sm-grid-gutter:  $grid-gutter-width,
  $md-grid-gutter:  $grid-gutter-width,
  $lg-grid-gutter:  $grid-gutter-width,
  $xl-grid-gutter:  $grid-gutter-width,
  $xxl-grid-gutter: $grid-gutter-width
) {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  @if ($xs-grid-gutter != 0) {
    padding-left: ($xs-grid-gutter / 2);
    padding-right: ($xs-grid-gutter / 2);
  }

  @media (min-width: $screen-sm) {
    width: $container-sm;

    @if ($sm-grid-gutter != $xs-grid-gutter) {
      padding-left: ($sm-grid-gutter / 2);
      padding-right: ($sm-grid-gutter / 2);
    }
  }

  @media (min-width: $screen-md) {
    width: $container-md;

    @if ($md-grid-gutter != $sm-grid-gutter) {
      padding-left: ($md-grid-gutter / 2);
      padding-right: ($md-grid-gutter / 2);
    }
  }

  @media (min-width: $screen-lg) {
    width: $container-lg;

    @if ($lg-grid-gutter != $md-grid-gutter) {
      padding-left: ($lg-grid-gutter / 2);
      padding-right: ($lg-grid-gutter / 2);
    }
  }

  @media (min-width: $screen-xl) {
    width: $container-xl;

    @if ($xl-grid-gutter != $lg-grid-gutter) {
      padding-left: ($xl-grid-gutter / 2);
      padding-right: ($xl-grid-gutter / 2);
    }
  }

  @media (min-width: $screen-xxl) {
    width: $container-xxl;

    @if ($xxl-grid-gutter != $xl-grid-gutter) {
      padding-left: ($xxl-grid-gutter / 2);
      padding-right: ($xxl-grid-gutter / 2);
    }
  }
}



//------------------------------------------------------------------------------
//  Генератор правил для прямого родителя модульной сетки
//------------------------------------------------------------------------------
//  Принимает:         По умолчанию:        Пояснение:
//  $xs-grid-gutter:   $grid-gutter-width   промежуток между ячейками XS-сетки
//  $sm-grid-gutter:   $grid-gutter-width   промежуток между ячейками SM-сетки
//  $md-grid-gutter:   $grid-gutter-width   промежуток между ячейками MD-сетки
//  $lg-grid-gutter:   $grid-gutter-width   промежуток между ячейками LG-сетки
//  $xl-grid-gutter:   $grid-gutter-width   промежуток между ячейками XL-сетки
//  $xxl-grid-gutter:  $grid-gutter-width   промежуток между ячейками XXL-сетки
//------------------------------------------------------------------------------
// Пример вызова:
// .some-class {
//   @include row( $grid-gutter-width, 0, $grid-gutter-width );
// }
//------------------------------------------------------------------------------

@mixin row (
  $xs-grid-gutter:  $grid-gutter-width,
  $sm-grid-gutter:  $grid-gutter-width,
  $md-grid-gutter:  $grid-gutter-width,
  $lg-grid-gutter:  $grid-gutter-width,
  $xl-grid-gutter:  $grid-gutter-width,
  $xxl-grid-gutter: $grid-gutter-width
) {
  display: flex;
  flex-wrap: wrap;

  & > * {
    flex-basis: 100%;
  }

  @if ($xs-grid-gutter != 0) {
    margin-left: ($xs-grid-gutter / -2);
    margin-right: ($xs-grid-gutter / -2);
  }

  @if ($sm-grid-gutter != $xs-grid-gutter) {

    @media (min-width: $screen-sm) {
      margin-left: ($sm-grid-gutter / -2);
      margin-right: ($sm-grid-gutter / -2);
    }
  }

  @if ($md-grid-gutter != $sm-grid-gutter) {

    @media (min-width: $screen-md) {
      margin-left: ($md-grid-gutter / -2);
      margin-right: ($md-grid-gutter / -2);
    }
  }

  @if ($lg-grid-gutter != $md-grid-gutter) {

    @media (min-width: $screen-lg) {
      margin-left: ($lg-grid-gutter / -2);
      margin-right: ($lg-grid-gutter / -2);
    }
  }

  @if ($xl-grid-gutter != $lg-grid-gutter) {

    @media (min-width: $screen-xl) {
      margin-left: ($xl-grid-gutter / -2);
      margin-right: ($xl-grid-gutter / -2);
    }
  }

  @if ($xxl-grid-gutter != $xl-grid-gutter) {

    @media (min-width: $screen-xxl) {
      margin-left: ($xxl-grid-gutter / -2);
      margin-right: ($xxl-grid-gutter / -2);
    }
  }
}



//------------------------------------------------------------------------------
//  Генератор ширины ячейки
//------------------------------------------------------------------------------
//  Принимает:    По умолчанию:         Пояснение:
//  $column:      1                     ширина (кол-во колонок в этой ячейке)
//  $columns:     $grid-columns;        количество ячеек в ряду
//
//  Возвращает width.
//------------------------------------------------------------------------------

@mixin get-width ($column: 1, $columns: $grid-columns) {
  $width: (100% / $columns) * $column;
  flex: 0 0 $width;
  max-width: $width;
}



//------------------------------------------------------------------------------
//  Генератор правил для одной ячейки
//------------------------------------------------------------------------------
//  Принимает:    По умолчанию:         Пояснение:
//  $column:      1                     ширина (кол-во колонок для этой ячейки)
//  $columns:     $grid-columns;        общее количество ячеек на 1 ряд
//  $gutter:      $grid-gutter-width    промежуток между ячейками
//------------------------------------------------------------------------------

@mixin make-col (
  $column:  1,
  $columns: $grid-columns,
  $gutter:  $grid-gutter-width
) {
  @include get-width($column, $columns);

  // ВНИМАНИЕ!
  // если $gutter == false, в CSS не попадут правила padding-left и padding-right
  @if ($gutter != false) {
    padding-left: ($gutter / 2);
    padding-right: ($gutter / 2);
  }
}



//------------------------------------------------------------------------------
//  Генератор правил для одной ячейки с возможностью указать @media
//------------------------------------------------------------------------------
//  Принимает:    По умолчанию:         Пояснение:
//  $screen:      xs                    тип сетки [xs|sm|md|lg|xl|xxl]
//  $column:      $grid-columns         ширина (кол-во колонок для этой ячейки)
//  $columns:     $grid-columns;        общее количество ячеек на 1 ряд
//  $gutter:      $grid-gutter-width    промежуток между ячейками
//------------------------------------------------------------------------------

@mixin col (
  $screen:  xs,
  $column:  $grid-columns,
  $columns: $grid-columns,
  $gutter:  $grid-gutter-width
) {

  @if ($screen == xs) {
    @include make-col($column, $columns, $gutter);
  }

  @if ($screen == sm) {

    @media (min-width: $screen-sm) {
      @include make-col($column, $columns, $gutter);
    }
  }

  @if ($screen == md) {

    @media (min-width: $screen-md) {
      @include make-col($column, $columns, $gutter);
    }
  }

  @if ($screen == lg) {

    @media (min-width: $screen-lg) {
      @include make-col($column, $columns, $gutter);
    }
  }

  @if ($screen == xl) {

    @media (min-width: $screen-xl) {
      @include make-col($column, $columns, $gutter);
    }
  }

  @if ($screen == xxl) {

    @media (min-width: $screen-xxl) {
      @include make-col($column, $columns, $gutter);
    }
  }
}



//------------------------------------------------------------------------------
//  Генератор правил для отступа одной ячейки с возможностью указать @media
//------------------------------------------------------------------------------
//  Принимает:    По умолчанию:         Пояснение:
//  $screen:      xs                    тип сетки [xs|sm|md|lg|xl|xxl]
//  $column:      1                     ширина отступа (кол-во колонок)
//  $columns:     $grid-columns;        общее количество ячеек на 1 ряд
//------------------------------------------------------------------------------

@mixin col-offset (
  $screen: xs,
  $column: 1,
  $columns: $grid-columns
) {

  @if ($screen == xs) {
    margin-left: ($column * 100% / $columns);
  }

  @if ($screen == sm) {

    @media (min-width: $screen-sm) {
      margin-left: ($column * 100% / $columns);
    }
  }

  @if ($screen == md) {

    @media (min-width: $screen-md) {
      margin-left: ($column * 100% / $columns);
    }
  }

  @if ($screen == lg) {

    @media (min-width: $screen-lg) {
      margin-left: ($column * 100% / $columns);
    }
  }

  @if ($screen == xl) {

    @media (min-width: $screen-xl) {
      margin-left: ($column * 100% / $columns);
    }
  }

  @if ($screen == xxl) {

    @media (min-width: $screen-xxl) {
      margin-left: ($column * 100% / $columns);
    }
  }
}



// Стилизация демки на основе примесей

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;;
}

pre {
  margin-bottom: 1em;
  white-space: normal;
  max-width: 100%;
  overflow-y: auto;
  
  code {
    display: block;
    background: none;
    line-height: 1.2;
    font-size: 120%;
    white-space: pre;
    tab-size: 4;
  }
}

code {
  font-size: 120%;
}

.comment {
  opacity: 0.4;
}

[class*="__element"] {
  background-color: #ddd;
  border: 1px solid #aaa;
  padding-top: 5px;
  padding-bottom: 5px;
}

.container {
  @include container;
}

.row-1 {
  @include row;
  
  &__element {
    @include col(
      $screen:  xs, 
      $column:  6, 
      $columns: $grid-columns, 
      $gutter:  $grid-gutter-width
    );
    // или
    // @include col(xs, 6);
    // или
    // @include col($column: 6);
  }
}

.row-2 {
  @include row;
  
  &__element {
    @include col();
    @include col(sm, 6);
    @include col(md, 4);
    @include col(lg, 3);
    @include col(xl, 2);
    @include col(xxl, 1);
  }
}

.row-3 {
  @include row($grid-gutter-width, 10px, 12px, 16px, 20px, 26px);
  
  &__element {
    @include col();
    @include col(sm, 6, $grid-columns, 10px);
    @include col(md, 4, $grid-columns, 12px);
    @include col(lg, 3, $grid-columns, 16px);
    @include col(xl, 2, $grid-columns, 20px);
    @include col(xxl, 1, $grid-columns, 26px);
  }
}

.promo {
  padding-top: 1em;
  padding-bottom: 1.5em;
  background-color: #F1F4FF;
  color: #7D93DB;
  
  &__inner {
    @include container();
  }
    
  &__grid {
    @include row();
  }
  
  &__img {
    @include col();
    @include col(md, 5);
    background-color: rgba(255,255,255,0.5);
  }
  
  &__text {
    @include col();
    @include col(md, 7);
  }
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console