Фреймворк для веб-дизайнера
Сегодня «фреймворк» одно из знаменитейших слов в веб-программировании. Для JavaScript изобретены фреймворки яху User Interface library, jQuery и Prototype, для интернет прибавлений Rails и Django и ещё очень много остальных. этак будто ведь это фреймворк, и разрешено ли применять данную теорию в веб-дизайне?
Что это фреймворк?
Давайте определим фреймворк как комплект приборов, библиотек и договоров проектный для вынесения обыденных задач в отдельные модули, которые разрешено применять много раз. основная мишень фреймворка, дозволить художнику либо программеру сфокусироваться на задачках неповторимых для всякого плана, заместо неоднократного изобретения колеса.
Речь идет никак не непременно о чем-то широкодоступном и знаменитом, против фреймворк имеет возможность употребляться лишь вами либо вашей командой.
Фреймворк для дизайнеров
Очевидно, будто художники также имеют все шансы пользоваться концепцией фреймворка, в особенности суровые достоинства получат те, кто действует над несколькими схожими веб-сайтами и художники, работающие в команде. К образцу, я тружусь в печатном издании, и наиболее 20 наших страниц имеют совсем сходную текстуру, нужно заявить, будто все новостные веб-сайты совсем схожи, однако в том числе и художник, авралящий в одиночку над совсем различными планами, имеет возможность отметить в их схожие доли, которые стоит соединить в CSS фреймворк.
В Lawrence Journal-World в каком месте я тружусь мы не так давно спроектировали CSS фреймворк, кой существенно увеличил отдача работы художников. естественно, на исследование самого фреймворка ушло некоторое количество дней, однако благодаря данному ныне разрешено творить высококачественные странички с ошеломляющей скоростью, наиболее такого ныне все художники употребляют 1 и тот ведь фреймворк, и ежели необходимо редактировать работу начатую кем-то иным, никак не приходится растрачивать 20 мин., чтоб ориентироваться будто к чему в его коде.
Что разрешено подключить в фреймворк?
Проанализируйте собственную работу, наверное имеется вещи, которые приходится работать в любом плане поновой. Наша мишень в соединении данных деяний в единичный часть, следуя способу «не повторяй себя». Это упростит помощь и понизит окончательную стоимость продуктов.
Вот некоторое количество деяний, которые приходится работать в любом проекте:
Сброс стилей по умолчанию, к примеру, сброс margin и padding для всех элементов.
Настройка базисной сетки для слова, для данного необходимо определить margin для параграфов, заголовков и списков кратными line-height.
Создание базисных стилей для форм.
Создание нескольких, непрерывно применяемых, CSS классов, таковых как hide (display:none) либо mute (меньший величина шрифта, слабый цвет).
Конечно способностей на самом деле более, к примеру почти все художники нередко употребляют 1 и ту ведь сетку, отчего бы никак не подключить её в собственный фреймворк, яху издавна устроил это в их YUI grids component. При исследованию собственного фреймворка в Journal-World, мы поначалу изучили заключение яху и приняли решение, будто оно никак не совершенно нам идет, однако все действительно это совсем неплохой образчик функциональности и родник увлекательных мыслей. Мы спроектировали сетку довольно эластичную, чтоб любой интернет-сайт сделанный с её поддержкою различался от других.
На основной массе страниц употребляются выпадающие рацион, табы, клавиши и остальные составляющие которые просто стандартизировать. не считая такого, имеется известные методы отражения контента, к примеру наброски (thumbnails) для фото, которые разрешено нормализировать и в предстоящем станет довольно прибавить класс thumbnail-list, чтоб страничка с набросками работала.
Есть вероятность перенести хаки и помощь старенькых браузеров в единичный часть, будто я и пробовал изготовить, однако пришел к выводу, будто они очень специфичны для всякого интернет-сайта, желая имеет возможность существовать у вас получиться.
Каковы настоящие преимущества?
Самое огромное превосходство такового фреймворка в способности скорого старта. довольно сотворить (x)html акт, включить фреймворк и разрешено никак не волноваться о сбросе характеристик по умолчанию, типографике, формах, размещении частей, рацион, табах и т.д.
Можно сходу начинать к персональному оформлению интернет-сайта, при этом для данного будет необходимо прибавить минимальное колличество усилий, переназначив некие стили, либо добавив новейшие. к примеру, ежели в фреймворке базисный краска для горизонтальных табов, карий с темными границами, его разрешено просто переназначить на наиболее пригодный для определенного интернет-сайта с поддержкою нескольких строчек кода.
ul.tabs li {
border: none;
background-image: url('site-specific-tab.jpg');
}
Вся служба по оформлению гиперссылок в облике блоков и центрированию слова теснее изготовлена, и вы сможете сфокусироваться на неповторимых деталях интернет-сайта заместо переписывания кода, кой употребляли теснее тыщи раз.
Как обязан существовать устроен CSS фреймворк?
Возможно некоторое количество разновидностей сотворения CSS фреймворка, однако более известный и может быть более удачный это поделить CSS на некоторое количество файлов, любой из каких, включал бы стили со подобным предназначением, к примеру 1 из файлов был бы специализирован для опции типографики, а иной для сброса стилей по умолчанию. Одно из превосходств данной техники в способности применения лишь нужных в определенном плане долей фреймворка. Наш фреймворк подключает 5 файлов:
reset.css — сброс стилей по умолчанию.
type.css — наладка типографики.
grid.css — наладка разметки.
widgets.css — виджеты, эти как табы, выпадающие рацион и кнопки.
base.css — включает все другие файлы, потому в html файле довольно сориентировать base.css, чтоб применять все способности фреймворка.
Мы расположили фреймворк на одном из серверов, чтоб все веб-сайты имели возможность его применять. естественно, любой интернет-сайт употребляет и собственные таблицы стилей, дополняя либо сменяя стили, описанные в фреймворке.
Предостережение
Этот способ действует совсем отлично, однако подъем численности HTTP запросов вызывает полностью оправданное волнение, на больших веб-сайтах с огромным трафиком, 5 излишних запросов на любую страничку имеют все шансы повернуться адом для системных админов. Я вижу 2 вероятных решения данной проблемы:
Включить все в 1 файл, заместо деления на модули, однако тогда никак не станет способности применять лишь нужные доли фреймворка, и усложнится поддержка.
Использовать серверный скрипт, кой станет составлять некоторое количество файлов в 1. Я таковых решений ещё никак не лицезрел, однако это имеет возможность существовать совсем отлично. В нашем случае он имел возможность бы составлять фреймворк в 1 файл при запросе base.css и сберечь при данном вразумительность отдельных компонентов.
Хочу освежить память, будто мишень никак не в том, чтоб изготовить фреймворк так отвлеченным как это может быть и изумить ваших приятелей и сослуживцев, против, мишень в том, чтоб прирастить прыть и отдача исследования. ежели степень абстракции станет очень высочайшим, фреймворк имеет возможность начинать запутанным и перегруживать интернет-сайт очень огромным численностью HTTP запросов.
Запомните: неплохой фреймворк никак не обязан накручивать работу дизайнера.
Заключение
Веб художники, как и программеры, имеют расположение опять и опять твердить себя, скидывая стили по умолчанию, настраивая базисную сетку, творя табы опять и опять в любом плане. истратив незначительно медли на творение фреймворка подключающего в себя данные идиомы, разрешено существенно прирастить прыть исследования и адаптировать помощь. ежели незначительно поразмыслить, то разрешено воплотить данные способности в отсутствии вреда для производительности сайта.