смещенные столбцы в сетке скелета

Question

Я использую макет dopetrope из шаблона HTML5up. В которой используется сетка, такая как Bootstrap.

Например, этот код начальной загрузки:

`"class="col-md-6 col-xs-12"` 

было бы эквивалентно:

`class="6u 12u(mobile)"` 

в HTML5up. «U» - это единица сетки.

Я попытался добавить столбец после Сюй. С бутстрапом мы используем атрибут смещения:

`class="col-md-offset-2"`. 

EDIT: Я только что узнал, что он основан на skel.io. Я смотрю вперед в этом направлении.

Answer 1

Я нашел решение в skel doc.

https://github.com/ajlkn/skel/blob/master/docs/skel-layout.md#offsetting

Раствор -2U для офсетных колонн.

Answer 2

, чтобы дать смещение элемента на skel.js, просто напишите номер отрицательного столбца как: class = "- 2u" = col-offset-2. определить экран смещения записи класса = "-nubmer (экран)" == >> класс = "-3U (маленький)"

skel.breakpoints({ 
 
\t xlarge: "(max-width: 1680px)", 
 
\t large: "(max-width: 1280px)", 
 
\t medium: "(max-width: 980px)", 
 
\t small: "(max-width: 736px)", 
 
\t xsmall: "(max-width: 480px)" 
 
}); 
 

 
skel.layout({ 
 
\t reset: "normalize", 
 
\t containers: true, 
 
\t grid: true, 
 
\t breakpoints: { 
 
\t \t medium: { 
 
\t \t \t containers: "90%" 
 
\t \t }, 
 
\t \t small: { 
 
\t \t \t containers: "95%", 
 
\t \t \t grid: { gutters: 20 } 
 
\t \t }, 
 
\t \t xsmall: { 
 
\t \t \t grid: { gutters: 10 } 
 
\t \t } 
 
\t } 
 
});

.row div{ 
 
    background-color:#3498db; 
 
    color:#fff; 
 
    text-align:center; 
 
    padding:5px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel-layout.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="5u"> 
 
     Five 
 
    </div> 
 
    <div class="5u -2u(medium)"> 
 
     Five 
 
    </div> 
 
    </div> 
 
    <div style=" 
 
    color:#666; 
 
    text-align:center; 
 
    padding:5px"> - Click Run Code Snippte then make full Page and Resize the window to show the offset </div> 
 

 
</div>