960 Grid System

Опубликовано Май 13, 2012 в HTML/CSS, Создание сайтов | Нет комментариев

960 Grid System

«960 Grid System» — CSS каркас, который значительно,  упрощает верстку web-страницы, решая проблемы совместимости браузеров, а также ошибок связанных с html версткой.

Многие зарубежные-профессиональные студии, и индивидуальные разработчики, разрабатывая шаблоны для сайтов используют CSS Framework «960 Grid System» причиной тому быстрая, кроссбраузерная верстка и удобство использования, это определяет его как качественный инструмент для создания макетов web-страниц. Взяв на себя все тяжелю работу верстальщика — CSS Framework позволяет получить результат в короткие сроки.

В данной статье будут описаны основы разработки макетов страниц  используя «960 Grid System» , что позволит начинающим разработчикам, неплохо, ориентироваться в «960 Grid System».

Общие сведения.

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

Используя Framework мы получим хорошо структурированный, оптимизированный для удобного просмотра проект, но есть ограничение — это  невозможность сделать резиновый каркас. Тем самым начиная проект используя Framework нужно проанализировать каким будет сайт, каким будет контент и как будет отображаться этот контент, так как ограничения в 960px, а именно такое максимальное значение мы можем использовать в 960 gs, может не соответствовать тому что запланировал разработчик, дизайнер или заказчик.

Взвесив все за и против — поняв, что вас устраивает данный Framework для реализации своего проекта нужно скачать, с официального сайта, последнюю версию «960 Grid System». Пройдя по ссылке 960 Grid System нужно нажать на большую серебристую кнопку, с надписью «Big ol` DOWNLOAD button», в центре экрана — браузер предложит сохранить архив, который нужно сохранить.

В скачанном архиве два файла и шесть папок — для работы нам понадобятся три папки: app_plugins, code, templates.

В папке app_plugins — плагины для fireworks и photoshop установив которые в соответствующие программы дизайнеры смогут разрабатывать дизайн в соответствии  с правилами расположения колонок описанные в файлах css.

В папке templates – шаблоны для большинства графических редакторов, которые подобно плагинам для fireworks и photoshop отображают колонки, определенные в “960 Grid System”.

В папке code – расположен Framework и демонстрационные  страницы, просмотрев, которые мы увидим возможные варианты расположение блоков в соответствии с выбранным количеством колонок. В базовой реализации “960 Grid System” предлагает три варианта количества колонок: 12, 16, 24.

 

Рассмотрим подробнее файлы из папки «code» с файлами из этой папки будет проводиться основная работа верстальщика страниц. В данной папке находятся css файлы файлы:

  1. Основной файл, в котором реализован как 12, так и 16 колоночный макет, а также копия, но с ориентацией колонок по правой стороне (такие файлы оснащены префиксом «rtl»)
    • 960.css
    • 960_rtl.css
  2. Файлы с конкретной реализацией колонок или 12 или 16 или 24, а также их копии, но с ориентацией колонок по правой стороне (такие файлы оснащены префиксом «rtl»)
    • 960_12_col.css
    • 960_12_col_rtl.css
    • 960_16_col.css
    • 960_16_col_rtl.css
    • 960_24_col.css
    • 960_24_col_rtl.css
  3. Файл, обнуляющий настройки браузеров. Он нужен, так как  настройки, по умолчанию, в браузерах отличаются
    • reset.css
    • reset_rtl.css
  4. Файл, задающий параметры текста, как и reset нужен для одинакового отображения, в данном случае, текста во всех браузерах
    • text.css
    • text_rtl.css

Нужно упомянуть о каталоге «min», также, также расположенном в директории «code» в нем расположены копии всех файлов, но в сжатом виде эти файлы нужно использовать в завершенном шаблоне. Это реализуется простой заменой  соответствующих файлов. Плюсы данного подхода в финальном проекте файлы стилей будут грузиться быстрее, что снизит нагрузку на сервер и скорость загрузки страницы, а при разработке мы можем смотреть легко читаемый и хорошо документированный код.

Продолжение следует, но ваши комментарии, напрямую, влияют на то как скоро статья будет дописана

 

Оставить комментарий

Ваш e-mail не будет опубликован.