Проектирование фреймворка CSS может помочь нам быстро и эффективно создавать высококачественные страницы, а также способствовать стандартизации кода. Конечно, каждый фреймворк основан на усилиях бесчисленных предшественников. Вот рекомендуемый фреймворк CSS — Blueprint CSS Framework.
CSS Frameworks + CSS Reset: дизайн с нуля
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
1. Введение
Blueprint — это так называемая CSS-инфраструктура. Для сравнения, комментарии в коде проекта относительно подробные.
Следуйте методу создания CSS-фреймворка, описанному в книге Джеффа Крофта «Frameworks for Designers» (или в китайской версии книги «Понимание веб-фреймворков и способы создания CSS-фреймворка»):
Существует несколько возможных способов создания структуры, но наиболее распространенным и, возможно, самым полезным является абстрагирование вашего общего CSS в отдельные таблицы стилей, каждая из которых охватывает определенную часть целого. Например, у вас может быть таблица стилей, которая устанавливает. типографику и еще одну, которая обрабатывает массовый сброс. Прелесть этого подхода заключается в возможности выборочно включать только те стили, которые вам нужны. В вашей структуре может оказаться шесть или семь разных таблиц стилей, но если в конкретном проекте их нет. Если вам не нужен один или два из них, их не обязательно включать. Фреймворк, который мы создали в нашем офисе, имеет пять таблиц стилей:.
reset.css — обрабатывает массовый сброс.
type.css — обрабатывает типографику.
Grid.css — обрабатывает сетку макета.
widgets.css — обрабатывает такие виджеты, как вкладки, раскрывающиеся меню и кнопки «читать дальше».
base.css — включает в себя все остальные таблицы стилей, поэтому нам нужно только вызывать base.css из наших (X)HTML-документов, чтобы использовать всю структуру.
Схема строится аналогично :
Разделяй и властвуй :
С точки зрения функциональной организации, Buleprint распределяет такие функции, как макет, типографика, виджеты, сброс и печать, в разные файлы CSS. Это позволяет пользователям импортировать только те функции, которые они хотят использовать, а не импортировать все файлы, и повышает производительность загрузки страниц. В настоящее время раздел компонентов обеспечивает только обработку кнопок и еще не соответствует подходу McKinsey MECE («взаимонезависимый и полностью исчерпывающий»).
Единый интерфейс :
Хотя функции распределены по нескольким файлам CSS, при импорте необходимо включать только один и тот же файл screen.css. Конкретные детали импорта обрабатываются в screen.css, что унифицирует внешний интерфейс.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="экран, проекция" />
Описание CSS-файла, включенного в проект:
экран.css
Это основной файл платформы. Он импортирует другие файлы CSS из каталога «lib» и должен быть включен на каждую страницу.
Подобно функции base.css Джеффа Крофта, вам нужно только включить этот файл, и его можно будет импортировать.
print.css
Этот файл устанавливает некоторые правила печати по умолчанию, поэтому печатные версии включаются на каждую страницу.
Используется для управления печатью и может быть классифицирован как виджет.
lib/grid.css
Этот файл устанавливает сетку (это правда). В нем есть множество классов, которые вы применяете к элементам div для настройки любой сетки на основе столбцов.
Используется для обработки макета страницы (столбцов).
lib/typography.css
Этот файл устанавливает типографику по умолчанию. Он также содержит несколько методов для некоторых действительно интересных вещей, которые можно сделать с вашим текстом.
Используется для управления макетом элементов страницы.
lib/reset.css
Этот файл сбрасывает значения CSS, которые браузеры обычно устанавливают для вас.
Используется для сброса страницы и указания значений по умолчанию для элементов страницы, для которых не указаны атрибуты CSS.
lib/buttons.css
Предоставляет несколько отличных кнопок только для CSS.
Используется для обработки кнопок, которые можно классифицировать как виджеты.
lib/compressed.css
Сжатая версия основных файлов. Используйте ее на каждом действующем сайте.
Инструкции см. в screen.css.
Предоставьте сжатые файлы CSS (включаяgrid.css, typography.css,reset.css,buttons.css).
2. Исследование использования каждого модуля.
2.1. Исследование Grid.css.
Обработка совместимости кроссбраузерного центрирования
Вообще говоря, чтобы справиться с различиями между Firefox и IE при центрировании, используются следующие методы:
body {text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}
Получено с: http://www.maxdesign.com.au/presentation/center/.
Как обращаться с чертежом:
body { text-align: center; /* IE6 Fix */margin:36px 0;}/* Контейнер должен сгруппировать все ваши столбцы */ .container { text-align: left; : 0 auto; /* Расположение по центрам */ width: 1150px; /* Общая ширина */ } Как реализовать схему для столбцов (столбцов):
blueprint определяет .column, .span-x и .last, которые объединены для реализации функции столбца.
Среди них: .column определяет атрибут float столбца; .span-x определяет ширину столбца; .last устанавливает значение поля по правому краю равным 0 пикселей;
| .column { float: left; Margin-Right: 10px; Padding: 0;}/* Используйте эти классы, чтобы установить ширину столбца */ .span-1 { width: 30px }.span-2 { width. : 70 пикселей; }.span-3 { ширина: 110 пикселей; }.span-4 { ширина: 150 пикселей }....span-8 { ширина: 310 пикселей; }.span-9 { ширина: 350 пикселей; 10 { ширина: 390 пикселей; }....span-23 { ширина: 910 пикселей; }.span-24 { ширина: 950 пикселей; поле: 0; }.span-25 { ширина: 200 пикселей; }.span-26 { ширина; : 1150px;margin: 0; }/* Этот класс нужен последнему элементу в многоколоночном блоке */ .last {margin-right: 0; } Реализация трёх столбцов: <div class ="container" > <div. class="column span-24" > Заголовок </div> <div class="column span-4" > Левая боковая панель </div> <div class="column span-16" > Основное содержание </div> <div class="column span-4 последний" > Правая боковая панель </div> </div> Реализация четырех столбцов: <div class="container" > <div class="column span-26" > Заголовок </div> < div class="column span-4" > Левая боковая панель </div> <div class="column span-3" > Основное содержимое 0 </div> <div class="column span-25" > Основное содержимое 1 </ div> <div class="column span-4 last" > Правая боковая панель </div> </div> Обратите внимание, что ширина в .container (который определяет ширину всей страницы) изменена на 1150 пикселей. Реализация пустого элемента. столбцы: для нескольких столбцов (например, 5 столбцов) есть пустые столбцы (например, левый и правый столбцы пусты), вы можете использовать .append-x и .prepend-x для их заполнения. Среди них .append-x добавляет пустой столбец после столбца (отступ справа), а .prepend-x добавляет пустой столбец перед столбцом (отступ слева). Общее определение контейнера /* Контейнер должен группировать все ваши столбцы */ .container { text-align: left; ширина */ } |
2.2 Исследование сброса.css.
Исходный код reset.css должен быть написан Эриком Мейером. У Эрика Мейера есть два журнала сброса, которые используются для решения проблемы разных значений по умолчанию в разных браузерах. Документация Эрика Мейера превосходна:
Сброс рассуждений: http://meyerweb.com/eric/ Thoughts/2007/04/18/reset-reasoning/
Сброс перезагрузки: http://meyerweb.com/eric/ Thoughts/2007/05/01/reset-reloaded/
Зачем сбрасывать
Основная причина в том, что все браузеры имеют настройки представления по умолчанию, но ни один браузер не имеет одинаковых настроек по умолчанию (хорошо, не существует двух семейств браузеров — большинство браузеров на основе Gecko имеют одинаковые настройки по умолчанию).
Например, некоторые браузеры отступают от неупорядоченных и упорядоченных списков с левыми полями, тогда как другие используют левые поля. В прошлые годы мы решали эти несоответствия в каждом конкретном случае.
Зачем использовать стиль сброса вместо универсального селектора
Так называемый универсальный селектор использует * для обозначения всех элементов документа, например
* {margin: 0;} Некоторые ресурсы по теме стиля сброса:
Библиотека сброса YUI: http://developer.yahoo.com/yui/reset/
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
Следующие статьи на самом деле представляют собой статьи, обсуждающие структуру CSS или советы, но все они упоминают тему сброса.
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
http://businesslogs.com/design_and_usability/my_5_css_tips.php
http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/
2.3. Исследование typography.css.
typography.css используется для определения формата макета по умолчанию (базовой линии) элементов страницы:
Установка типа в Интернете на базовую сетку:
http://alistapart.com/articles/settingtypeontheweb
2.4. Исследование button.css.
В статье «Вновь открываем элемент кнопки» обсуждаются различные преимущества использования элемента «кнопка» для замены элемента ввода. Элемент «кнопка» предоставляет более широкие функции.
http://particletree.com/features/rediscovering-the-button-element
2.4. Исследование Print.css.
У Эрика Мейера есть статья о реализации функции печати в CSS, которую можно использовать в качестве справочника для понимания print.css.
CSS-дизайн: собираемся в печать
Распечатать разные
2.5, сжатый.css
compressed.css — это пакет, который сжимает несколько файлов чертежей. Он также сжимает файл CSS, удаляя ненужные пробелы, символы новой строки, комментарии и другой текст.
Этот метод используется при развертывании в производственных системах, чтобы избежать импорта нескольких файлов CSS на страницу, а также помогает повысить производительность страницы.
Согласно инструкциям в lib/screen.css, следует использовать службу сжатия CSS, предоставляемую Teenage:
http://teenage.cz/acidofil/tools/cssformat.php
Кроме того, к аналогичным сервисам, обеспечивающим оптимизацию и сжатие css и javascript, относятся:
http://csstidy.sourceforge.net/ (с открытым исходным кодом)
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cleancss.com/ (на основе csstidy)
3. Примеры использования
4. Справочные документы
http://code.google.com/p/blueprintcss/wiki/Tutorial
5. Связанные проекты
генератор чертежей: http://kematzy.com/blueprint-generator/
Триполи: http://monc.se/tripoli/
Рекомендуемая статья: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/