Сегодня слово «framework» стало обыденным в web dev'е. Как только jQuery и Prototype, Rails и Django получили широкое распространение, кажется, что теперь каждый использует какой-нибудь framework для создания своего сайта.
Но что же такое framework? Они полезны программистам, или даже веб дизайнеры могут воспользоваться их преимуществами?..
Итак, давайте договоримся — хотя бы на протяжении этой статьи — считать, что “framework” — это набор инструментов, библиотек, хорошего кода, который поможет превратить рутинные задачи в модули, которые можно использовать неоднократно. Задача framework'а — позволить дизайнеру или разработчику сфокусироваться на задачах, являющимися уникальными в рамках данного проекта. Иначе говоря, не изобретать колесо раз за разом. Вобщем, это подход, выбранный вышеуказанными web и JavaScript framework'ами.
Возможно, и вы сможете извлечь выгоду от аналогичной абстракции CSS кода в течение дизайна вашего сайта. Те, кто по достоинству смогут оценить данных подход — это дизайнеры, работающие над несколькими подобными друг другу сайтами. К тому же, дизайнеры, работающие в команде, могут работать, используя один и тот же framework. Например, я работаю в газете, и все наши 20 с небольшим сайта имеют много общего. Из-за того, что это, в основном, новостные сайты, они по определению больше схоже, чем различны. Но даже дизайнер-одиночка, который работает над совершенно разными проектами, может найти элементы, которые можно внести в его основной framework.
В Lawrence Journal-World, где я работаю, мы недавно создали CSS framework и обнаружили, что он значительно увеличил нашу производительность. Конечно, для его создания потребовалось потратить несколько дней, но как только он был готов, скорость, с которой мы могли создавать качественные страницы, резко возросла. Более того, с тех пор, как мы начали использовать наш framework, каждый дизайнер мог что-то исправить в чужой работе, и им уже не требовалось 20 минут, что понять, почему что-то написано именно так. Они просто погружались в работу.
Как только вы начнете создавать свой CSS framework, вы должны найти те вещи, что вы используете раз за разом в каждом проекте. Вся суть в том, чтобы собрать все это в одно место, следуя методу «Не повторяй себя». Это делает поддержку значительно легче, а также вы сможете немного сэкономить на трафике.
Несколько вещей, которые я принимаю во внимание в каждом своем проекте, это:
Есть также несколько других интересных возможностей. Многие дизайнеры зачастую используют одинаковую разметку и стили для создания страницы. Почему бы не перенести это в CSS-файл и составить его так, чтобы его было удобно использовать на нескольких сайтах одновременно. Yahoo сделала нечто подобное в Yahoo User Interface grids component. Когда мы создавали наш framework для Journal-World, мы сначала смотрели на реализацию этого компонента у YUI. Позже мы решили, что это не то, что нам нужно, но это послужило хорошим примером для нас и вдохновило на создание нашей собственной реализации. Мы остановились на 16-и блочном дизайне, который является настолько гибким, что мы смоги его использовать на каждых наших сайтах, даже учитывая то, что каждый наш сайт внешне немного отличается от другого.
К тому же, многие сайты используют одни и те же виджеты, такие как drop-down меню, закладки в навигации, кнопки, и т.д. Эти вещи хорошо подходят для абстракции. Помимо этого, вы можете выработать некоторые свои идиомы, как скажем, список фотографий, показывающийся в виде thumbnail’ов. Вы можете стандартизировать CSS класс “thumbnail-list”, и в следующий раз вам всего лишь потребуется вставить этот класс, чтобы получить работающий вариант.
Имея такой framework, вы сможете быстро окунуться в создание новой страницы. Вы создаете новый (X)HMTL документ, подключаете framework, и вам уже не потребуется времени, чтобы избавиться от ненужных отступов, у вас уже будет нужная вам типографика, чистые формы, работающие виджеты и много другое!
Вероятно, что вам захочется как-то изменить внешний вид конретного сайта. Чтобы это осуществить, все что вам нужно, это добавить или изменить уже существующий стиль. К примеру, если ваш framework устанвливает стандартную панель с навигацией для каждого «ul» с классом “tabs”, который имеет серый фон и черные границы. Чтобы это изменить, вам всего лишь потребуется добавить (или изменить существующий) стиль. Например:
Существует несколько возможных путей для создания framework’a, но самый общий и, несомненно, самый удобный, это абстракция вашего главного CSS-файла в несколько отдельных файлов, каждый из которых будет играть свою роль. К примеру, вы можете создать страницу стилей, которая бы управлялась с типографикой, а другая со сбросом стандартных стилей. Красота данного подхода заключается в возможности подключения именно тех стилей, что вам нужны. Вы можете остановиться на 6-7 разных страниц стилей в вашем framework’е, но конкретный проект может не нуждаться в одной или двух из них, а значит, что их совсем не обязательно подключать. Тот framework, что мы создали у себя, состоит из 5 стилей:
Затем мы сохранили весь framework в отдельном месте и уже вызываем его с сайтов именно оттуда. Конечно, у нас есть несколько специфичных страниц стилей для каждого сайта, где мы переписываем или добавляем нужные стили.
На практике, мы, веб дизайнеры, так же как и наши коллеги из мира программирования, имеем привычку часто повторятся. Мы каждый раз отключаем стандартные стили, пишем занового стили для tab’ов, и это повторяется от проекта к проекту. Потратьте немного времени на написание своего framework’а, абстрагируйте там то, что вы можете использовать несколько раз. Это поможет вам быстро начать создавать новую страницу, или поддерживать уже существующую. Позаботьтесь об этом, ведь это не требует особых знаний и не повредит вашим проектам, а главное, сэкономит время на создания дизайна следующего.
Опубликовано с разрешения A List Apart и Jeff Croft'a
Но что же такое framework? Они полезны программистам, или даже веб дизайнеры могут воспользоваться их преимуществами?..
Что такое “framework”?
Итак, давайте договоримся — хотя бы на протяжении этой статьи — считать, что “framework” — это набор инструментов, библиотек, хорошего кода, который поможет превратить рутинные задачи в модули, которые можно использовать неоднократно. Задача framework'а — позволить дизайнеру или разработчику сфокусироваться на задачах, являющимися уникальными в рамках данного проекта. Иначе говоря, не изобретать колесо раз за разом. Вобщем, это подход, выбранный вышеуказанными web и JavaScript framework'ами.
Framework для дизайнеров
Возможно, и вы сможете извлечь выгоду от аналогичной абстракции CSS кода в течение дизайна вашего сайта. Те, кто по достоинству смогут оценить данных подход — это дизайнеры, работающие над несколькими подобными друг другу сайтами. К тому же, дизайнеры, работающие в команде, могут работать, используя один и тот же framework. Например, я работаю в газете, и все наши 20 с небольшим сайта имеют много общего. Из-за того, что это, в основном, новостные сайты, они по определению больше схоже, чем различны. Но даже дизайнер-одиночка, который работает над совершенно разными проектами, может найти элементы, которые можно внести в его основной framework.
В Lawrence Journal-World, где я работаю, мы недавно создали CSS framework и обнаружили, что он значительно увеличил нашу производительность. Конечно, для его создания потребовалось потратить несколько дней, но как только он был готов, скорость, с которой мы могли создавать качественные страницы, резко возросла. Более того, с тех пор, как мы начали использовать наш framework, каждый дизайнер мог что-то исправить в чужой работе, и им уже не требовалось 20 минут, что понять, почему что-то написано именно так. Они просто погружались в работу.
Что именно можно абстрагировать?
Как только вы начнете создавать свой CSS framework, вы должны найти те вещи, что вы используете раз за разом в каждом проекте. Вся суть в том, чтобы собрать все это в одно место, следуя методу «Не повторяй себя». Это делает поддержку значительно легче, а также вы сможете немного сэкономить на трафике.
Несколько вещей, которые я принимаю во внимание в каждом своем проекте, это:
- Массовый сброс стандартных браузерных стилей. К примеру, установка margin и padding в 0 у всех элементов, отключение border’ов у frameset’ов и изображений, и т.д.
- Создание примерного типа оформления: margin’ы у блочных элементов, таких, как параграфы, заголовки, списки, и т.д.
- Создание простых стилей для форм.
- Создание нескольких CSS-классов, которые я постоянно использую, к примеру, .hide (где я устанавливаю display:none) и .mute (где я устанавливаю меньший размер шрифта и, иногда, более светлый цвет).
Есть также несколько других интересных возможностей. Многие дизайнеры зачастую используют одинаковую разметку и стили для создания страницы. Почему бы не перенести это в CSS-файл и составить его так, чтобы его было удобно использовать на нескольких сайтах одновременно. Yahoo сделала нечто подобное в Yahoo User Interface grids component. Когда мы создавали наш framework для Journal-World, мы сначала смотрели на реализацию этого компонента у YUI. Позже мы решили, что это не то, что нам нужно, но это послужило хорошим примером для нас и вдохновило на создание нашей собственной реализации. Мы остановились на 16-и блочном дизайне, который является настолько гибким, что мы смоги его использовать на каждых наших сайтах, даже учитывая то, что каждый наш сайт внешне немного отличается от другого.
К тому же, многие сайты используют одни и те же виджеты, такие как drop-down меню, закладки в навигации, кнопки, и т.д. Эти вещи хорошо подходят для абстракции. Помимо этого, вы можете выработать некоторые свои идиомы, как скажем, список фотографий, показывающийся в виде thumbnail’ов. Вы можете стандартизировать CSS класс “thumbnail-list”, и в следующий раз вам всего лишь потребуется вставить этот класс, чтобы получить работающий вариант.
Это действительно принесет мне пользу?
Имея такой framework, вы сможете быстро окунуться в создание новой страницы. Вы создаете новый (X)HMTL документ, подключаете framework, и вам уже не потребуется времени, чтобы избавиться от ненужных отступов, у вас уже будет нужная вам типографика, чистые формы, работающие виджеты и много другое!
Вероятно, что вам захочется как-то изменить внешний вид конретного сайта. Чтобы это осуществить, все что вам нужно, это добавить или изменить уже существующий стиль. К примеру, если ваш framework устанвливает стандартную панель с навигацией для каждого «ul» с классом “tabs”, который имеет серый фон и черные границы. Чтобы это изменить, вам всего лишь потребуется добавить (или изменить существующий) стиль. Например:
ul.tabs li {
border: none;
background-image: url('/images/tabs/site-specific-tab-look.jpg');
}
Как должен быть спроектирован CSS framework?
Существует несколько возможных путей для создания framework’a, но самый общий и, несомненно, самый удобный, это абстракция вашего главного CSS-файла в несколько отдельных файлов, каждый из которых будет играть свою роль. К примеру, вы можете создать страницу стилей, которая бы управлялась с типографикой, а другая со сбросом стандартных стилей. Красота данного подхода заключается в возможности подключения именно тех стилей, что вам нужны. Вы можете остановиться на 6-7 разных страниц стилей в вашем framework’е, но конкретный проект может не нуждаться в одной или двух из них, а значит, что их совсем не обязательно подключать. Тот framework, что мы создали у себя, состоит из 5 стилей:
- reset.css—отвечает за сброс стандартных стилей.
- type.css—отвечает за типографику.
- grid.css—отвечает за компоновку.
- widgets.css—отвечает за виждеты: tab’ы, drop-down меню и кнопки «читать далее».
- base.css—подключает все остальные страницы стилей, так что мы можем обращаться только к base.css из нашего (X)HTML документа, чтобы использовать весь framework.
Затем мы сохранили весь framework в отдельном месте и уже вызываем его с сайтов именно оттуда. Конечно, у нас есть несколько специфичных страниц стилей для каждого сайта, где мы переписываем или добавляем нужные стили.
Заключение
На практике, мы, веб дизайнеры, так же как и наши коллеги из мира программирования, имеем привычку часто повторятся. Мы каждый раз отключаем стандартные стили, пишем занового стили для tab’ов, и это повторяется от проекта к проекту. Потратьте немного времени на написание своего framework’а, абстрагируйте там то, что вы можете использовать несколько раз. Это поможет вам быстро начать создавать новую страницу, или поддерживать уже существующую. Позаботьтесь об этом, ведь это не требует особых знаний и не повредит вашим проектам, а главное, сэкономит время на создания дизайна следующего.
Опубликовано с разрешения A List Apart и Jeff Croft'a
