
Grid 360 framework урок 1. Введение в работу фреймворка.
Начинаю изучать данный css framework. Из общего моего просмотра работы и первого общения с данным фреймворком:
Минусы Grid 360 framework:
- скажу что по началу не очень понравилось то, что он добавляет в коде некоторые участки в плане чистоты верстки это не хорошо.
Плюсы фреймворка:
- очень ускоряет работу
- в архиве есть исходники для различных графических редакторов
- на официальном сайте фреймворка есть генератор кода
Итак давайте приступим к изучению фреймворка.
Для начала скачаем архив самого фреймворка. Если ссылка не работает то можно скачать с сайта разработчиков.
После стачивания вы получите архив c файлами. Нас интересуют следующие каталоги:
- code (папка)
- templates (папка)
Начнем с папки templates находятся заготовки для графических редакторов. Например для PhotoShop, Gimp, Visio, CprelDrow, FireWork, Flash, Illustrator, Indesign, Inkscape, quarkxpress и других. Я перечислил только известные мне графические редакторы. Страница предложенного шаблона разбитая на столбцы, такие же как нам предлагает фреймфорк в результате чего дизайнер сможет сделать точный дизайн и сделать из него веб-страницу в последствии намного проще.
После разработки дизайна? шаблон передается на порезку верстальщику. Для порезки изображений я бы советовал FireWork или Adobe PhotoShop. Этот урок не относиться к нарезке дизайна, но если будет интересно, пишите и я добавлю еще один урок.
Когда все картинки нарезаны и создан файл index.html, подключаем к нему стили фреймворка из папки code.
Пример подключения фреймворка:
1 |
960 Grid System
950
30
910
1 |
Я не просто так добавил эту статью в раздел адаптивной верстки, этот фреймворк я использовал именно в этих целях и очень им доволен. Надеюсь, найду время и напишу продолжение для адаптивного дизайна. Если забуду, напоминайте своими комментариями.
Если кто еще знает минусы и плюсы данного фреймворка пишите в комментариях обязательно учту.