Перекрывающиеся сетки с Singularitygs

Question

Мне было интересно, есть ли способ сделать перекрывающиеся сетки с Singularity.gs, например, в приложении Grid Set?

Я хотел бы наложить две двухколонные сетки на основе золотого отношения.

например.

$grids: 1.618 1 

и

$grids: 1 1.618 

Answer 1

Мы имеем функцию соединения сетки в singularity-extras plugin. Это работает только с перекрывающимися равномерными столбцами, но не с неравномерными столбцами.

Сказанное так, $grids: 1 .382 1; должно получить вас, что вы ищете. Золотая секция довольно забавная, чтобы разделить вещи, потому что каждая часть все еще находится в одном масштабе, что делает этот расчет немного легче.

Если вы хотите написать функцию, чтобы сделать это, пожалуйста, сделайте это. Это так же просто, как writing a function that spits out a list of numbers.

Answer 2

Или вы можете просто переопределить $grids.

Для такого базового использования это выглядит как хакерское, но когда вам нужно комбинировать очень разные сетки на одной странице (например, золотое соотношение с большими желобами + сетка миниатюр с маленькими желобами), я считаю этот подход неоценимым:

<section id=left> 
    <div class=column>Foo</div> 
    <div class=column>Bar</div> 
</section> 

<section id=right> 
    <div class=column>Foo</div> 
    <div class=column>Bar</div> 
</section> 

@import compass 
@import singularitygs 

.column 
    background-color: pink 
    margin-bottom: 1em 

section 
    +pie-clearfix 



.column 

    #left & 
    $grids: 1.612 1 

    &:nth-child(1) 
     +grid-span(1, 1) 
    &:nth-child(2) 
     +grid-span(1, 2) 

    #right & 
    $grids: 1 1.612 

    &:nth-child(1) 
     +grid-span(1, 1) 
    &:nth-child(2) 
     +grid-span(1, 2) 

Демо: http://sassbin.lolma.us/gist/5663129/