Как системы сетки CSS экономят время при реализации проектов, которые не основаны на сетке?

Question

Какие грид-системы CSS делают быстро, без чего мы не можем?

Я работаю над внештатными проектами из разных ресурсов, и файл Photoshop (PSD), который я получаю, не основан на сетке или не использует ту же ширину сетки и столбец, желоба. Я не в прямом общении с дизайнерами. Я получаю файлы дизайна только от Клиентов или других фрилансеров / субподрядчиков. Я хорош в создании HTML CSS для PSD без использования Grid, а также с совместимостью с IE.

В эти дни Twitter bootstrap пользуется популярностью в сообществе, которое основано на сетке шириной 940px, а также на кнопках и плагинах jquery.

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

Answer 1

Если проект, который вы реализуете, не основан на сетке макетов, то система сеток CSS вам совсем не поможет.

Я, вероятно, покажу здесь, что у меня недостаточно знаний в области дизайна,но я понимаю, что сетка макета задает минимальную ширину для столбцов макета, например, 60 пикселей, и ширину желоба (горизонтальное пространство между столбцами), например, 20 пикселей.Большие столбцы состоят из кратных минимальной ширины столбца и желоба - например, столбец с четырьмя пролетами имеет ширину, равную четырем отдельным столбцам макета, плюс три желоба.

Это способ создания макетов с разнымиколичество столбцов выглядит одинаково.

Системы сетки CSS реализуют это в CSS для вас, так что вам не нужно писать CSS.

• Например http://twitter.github.com/bootstrap/scaffolding.html#grid-system

Вы просто применяете классы к элементам HTML.В случае с сеточной системой CSS Twitter Bootstrap, чтобы иметь столбец с 4 и 8 столбцами рядом друг с другом, используйте следующий HTML-код:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

<div> s затем получитеправильные ширины и желоба, а также правильная комбинация кода, связанного с float, чтобы они были представлены в виде столбцов.Таким образом, вы получаете экономию времени благодаря отсутствию необходимости писать (и отлаживать в различных браузерах) какой-либо макет CSS для отдельных столбцов.

Но если реализуемый вами дизайн не используетсетка макета, тогда система сеток CSS вам совсем не поможет, потому что вы не реализуете сетку макета.