Как эффективно использовать сетку без рамки?

Я начинаю строить сайт хорошо для мобильных устройств. Поэтому я также начинаю изучать медиа-запросы и различные сетки. Я взглянул на всех "основных игроков", таких как Inuit.css, семантическая сетка и т.д. И нашел, что, вероятно, лучший для меня - бескаркасная сетка

Автор говорит, что это духовный преемник Less Framework ':

Ok. Я изучил намного меньше/css-код и html-код главной страницы framelessgrid.com(которая должна реализовывать безрамную сетку), но я не могу понять, как я могу ее реализовать.

Прежде всего, что он точно подразумевает под "безрамным"? Просто, что это не каркас? И кроме того, что свободные ширины столбцов и "перевернутые" медиа-запросы будут "мобильными первыми", как он отличается от lessframework?
Как я должен использовать переменные без значения (в частности, ряд @cols)?
Что означает "Адаптировать столбец по столбцу, а не пиксель за пикселем". имею в виду? Как следует применять эту концепцию на практике?

Ответ 1

Наконец-то я использую бескаркасную сетку, поэтому я хочу ответить на свои вопросы:

Не знаю: P Я имею в виду, это имя, не знаю. Это не имеет значения, хотя.. (Я также предложил авторам безграничной сетки ответить здесь, но он этого не сделал.)
@cols vars. Я думаю, что в основном это бескаркасная сетка. Ну, это не так, поскольку бескаркасная сетка - это "только" идея. Но на практике, ну, это основная разница css против "стандартного" подхода. Вы просто определяете ширину элементов в столбцах вместо пикселей. Все это. Это, конечно, можно сделать только с помощью Less или Sass. Поскольку я не знал меньше и scss, я не мог полностью раскрыть основную идею. Вы в конечном итоге скажете, что элемент имеет ширину 8 колонок, еще 5 колонок и т.д. Гораздо проще, чем вычислять пиксели.
См. ответ 2: P

Надеюсь, это поможет кому-то другому.

Ответ 2

Для чего я написал учебник для системы без рамки:

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;
}

Ответ 3

Если вы идете на css со стороны программирования, я очень рекомендую меньше. Это действительно положит css в ваш ум программирования в хорошем смысле.

Одной из проблем, которые у меня были, была концепция обработки вашего css при каждой загрузке страницы (что, вероятно, не хуже, чем обработка фреймворка javascript) или настройка менее компилятора для работы на вашем сервере.

Есть лучший способ. Просто установите winless, если вы находитесь в окнах или Less app для OS X. Это простые наблюдатели файлов, которые будут компилировать ваш законченный css каждый раз, когда вы вносите изменения в ваши .less файлы. Если вы настроили свой проект следующим образом:

/стили /CSS /Меньше

Они оба помещают ваши скомпилированные файлы css в каталог css. Затем вы можете связать свой html с файлами css и не беспокоиться о компиляции на лету. Они оба отлично справляются с вашей платформой управления версиями.

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

Я предпочитаю frameless установить немного больше, чем Less Framework, но это вопрос выбора.

Кроме того, если вам нужно немного больше, чем предоставить вам бескаркасные документы, убедитесь, что вы просматриваете css, который используется для фактического сайта,

Удачи!

Ответ 4

Уже несколько месяцев шли на концепцию без рамки, а неделю назад надавили на лампочку. Не уверен, насколько была бескаркасная концепция или насколько она работает с меньшими затратами. Но я знаю, что концепция до сих пор довольно солидная.

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

Но я начал менять ширину желоба и ширины столбцов с другими вариантами и делить их, чтобы найти хорошие отношения. Таким образом, в конце появляется мастер-вар, который может изменить всю тему с одним изменением номера. Позитивиты бесконечны.

Ответ 5

В дополнение к Stratboy ответы выше, я хотел бы поделиться своим вопросом и другими ответами о том, чем меньше CSS Joni используется для Framelessgrid. Мне было трудно понять меньше CSS, и сообщество SO действительно помогло.

Как читать этот LESS css?