Для чего я стою, я написал учебник для системы Frameless Grid здесь:
http://marknugent.tumblr.com/post/47212935858/a-guide-tutorial-to-the-frameless-grid-how-to
Надеюсь, что это полезно!
Редактировать: По предложениюниже, что мой ответ должен стоять сам по себе, а не просто содержать ссылку (достаточно справедливо!), я добавлю следующее:
Да, переменные @cols действительно являются ключами к сетке без рамки.Вы используете это, чтобы измерить ваши элементы так же, как и любую другую единицу измерения.
Например, скажем, вы хотите, чтобы #firstDiv занимал три столбца с #secondDiv, шириной в 2 столбца справа:
#firstDiv {
width: @3cols;
float: left;
}
#secondDiv {
width: @2cols;
margin-left: @gutter/@em;
float: left;
}
Обратите внимание, что вы должны учитывать водостоктакже.
По мере того, как вы переходите вниз по таблице стилей, начиная с мобильных стилей, вы используете @media запросов, которые запускаются там, где вы хотите, чтобы добавлять стили на прогрессивно большие экраны, переопределяя ранее объявленные значения при необходимости.,С каждым шагом вы будете добавлять столбцы к вашему макету.
Существует также техника, которую вы можете использовать на промежуточных шагах для масштабирования всего макета:
body {
font-size: (@font-size + 1)/16*1em;
}
Этот код увеличивает масштаб вашего макета впримерно на 6 процентов, при условии, что вы указали все свои размеры в сокращенной записи / @ em, например, если вы укажете ширину заполнения как 100 / @ em вместо 100 пикселей, он будет масштабироваться вместе с остальнымимакет с использованием вышеуказанной техники.
Аналогично, этот код уменьшит ваш макет на один уровень:
body {
font-size: (@font-size - 1)/16*1em;
}