lessframework column grid

Question

Я пытаюсь выяснить, как использовать lessframework для построения сетки с 2 - 3 столбцами, но как начать?

В коде CSS он говорит:

13-колонка макет 60 РХ колонн, 24 РХ желобов, 72 РХ наценки, 1212 точек всего (дополнительное пространство для скроллинга)

На http://lessframework.com/ он говорит 8 cols для более старых браузеров и 13 для настольных компьютеров ... поэтому я добавляю сетку столбцов внутри экрана только с поддержкой @media и (media-size): (min-width: 1212px) (или добавьте его в другой файл css).

Я попытался найти несколько примеров, но еще не нашел ничего ценного.

UPDATE:

После прочтения ответа от Дэвида Оливера я попытаюсь ответить на вопрос:

• 320: 1 цв
• 480: 1 цв
• 768: 2 цв
• 1280: 3 col

Я надеюсь, что это отвечает на вопрос.

Answer 1

Из моего взгляда на структуру я полагаю, что идея состоит в том, чтобы вставить свой собственный CSS-столбец на основе чисел, представленных в комментариях CSS, в соответствующие разделы, связанные с запросом на содержимое файла CSS. В отличие от некоторых других фреймворков столбцов CSS, вы не применяете предопределенные имена классов к div, а скорее вставляете свои собственные селектора в исходный файл CSS по мере необходимости.

Однако, как уже упоминалось, такой подход не работает для мобильных устройств, которые не способны обрабатывать мультимедийные запросы, поскольку по умолчанию предполагается ширина окна просмотра 768 пикселей или больше. Я считаю, что этот подход лучше: Rethinking the Mobile Web.Также см Notes on designing for mobile phones (even if they’re not made by Apple)

Так что вы могли бы сделать что-то вроде:

// Stylesheet to set base styles for all browsers - mobile-friendly: 
<link rel="stylesheet" type="text/css" href="css/base.css" /> 

// Stylesheet to set additional styles including background images not suitable for mobiles and the multi-column layout for browsers being used at viewports of 700px (allows for scrollbar at within 768) and wider: 
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only all and (min-device-width: 700px)" /> 

// Stylesheet to set multi-column layout for browsers being used at viewports of 1200px (allows for scrollbar at within 1280) and wider: 
<link rel="stylesheet" type="text/css" href="css/desktop-wide.css" media="only all and (min-device-width: 1200px)" /> 

В base.css вы бы не определить столбцы и оставить все, чтобы течь естественно.

В desktop.css, для трех областей контента, который вы могли бы иметь что-то вроде:

div#wrapper { width: 94%; margin: 0 auto; } 
div#nav { width: 30%; float: left; } 
div#content { width: 70%; float: left; } 
div#extra { clear: both; } 

В настольном-wide.css, вы могли бы иметь что-то вроде:

div#nav { width: 20%; } 
div#content { width: 60%; } 
div#extra { width: 20%; clear: none; float: left; } 

Этих процентов не обязательно реалистичны, так как у вас есть отступы или поля, но, надеюсь, они показывают эту идею.

Я планирую написать комплексный метод в my wiki в ближайшее время, на случай, если вы захотите позже проверить его.

Answer 2

Когда вы говорите «сетку с двумя столбцами», для каких устройств вы имеете в виду? Я рекомендую вам сначала понять, какой размер устройств должен иметь столбцы и сколько из них. Может быть, CSS будет иметь для вас больше смысла?

Кроме того, я рекомендую другой подход к той, которая использует рамки:

Сначала установите один столбец, основной таблицы стилей, которая не опирается на минимальную ширину медиа запросов. Это означает, что мобильные пользователи (в том числе те, чьи устройства не занимаются медиа-запросами) - это удобный для мобильных устройств опыт без громоздкой горизонтальной прокрутки. Это преимущество этого подхода по сравнению с тем, на которое вы ссылались.

Затем добавьте таблицу стилей со срединным запросом, в котором указана минимальная ширина видового экрана примерно 500 пикселей. Это необходимо добавить в расположение столбцов и другие стили (например, фоновые изображения), которые подходят только для настольных браузеров.

Это очень краткий обзор и другие вещи, такие как получение Internet Explorer для использования медиа-запросов (требуется Javascript?) И обеспечение того, чтобы те устройства, которые не поддерживают мультимедийные запросы, не загружают фоновые изображения с минимальной ширины видового экрана stylesheet потребуется дополнительная доработка. Я в процессе написания своего предпочтительного метода и могу опубликовать больше информации, когда это будет сделано, или, может быть, когда я смогу вернуться к своей настольной машине.