EZ-CSS ищет пути решения тех задач, которые вы наверняка терпеть не можете в платформах разработки сетчатой структуры, ориентированных на сохранение функциональности и кросс-браузерной поддержки разметки в несколько колонок.
Что такое EZ-CSS?
EZ-CSS – это CSS-платформа, разработанная Сиерри Кобленцом (Thierry Koblentz). Она, в принципе, похожа на другие платформы, с которыми вы вероятно знакомы уже: 960.gs или Blueprint CSS, но и при этом она достаточно сильно отличается.
Основное отличие между EZ-CSS и другими платформами заключается в том, что вы не привержены созданию сетки, но у вас есть большой выбор среди ширины колонок. На самом деле, вы можете создать столько колонок, сколько захотите, любой ширины и высоты.
EZ-CSS также использует уникальный модуль разметки, который позволяет экстремально быстро создавать наброски. Мы вернемся к этому немного позже, но лучше бы вам опираться на копирование и вставку заранее подготовленных частей разметки, которые в дальнейшем вы сможете комбинировать и разветвлять, создавая сложную разметку.
Одни из основных преимуществ использования данной платформы – маленький размер и простота использования. Требуемый CSS-файл весит всего 1кб, а всю систему гораздо проще изучить, чем в остальных платформах, с которыми вы встречались ранее. Отсутствие ограничений и дополнительных хаков, по типу вставки DIV’ов для очистки плавающих элементов, позволяют упростить рабочий процесс и (теоретически) требуется гораздо меньше разметки.
EZ.CSS
Первое, что вам нужно скачать, это файл ez.css. Для того чтобы сделать это, пройдите в раздел Downloads на сайте EZ-CSS и скачайте ez-min.css. Там есть множество других файлов, но для начала нам нужен всего один.
Бросьте его в директорию с основным HTML-файлом и состыкуйте их следующим кодом:
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/ez-min.css">
Конечно же, вам нужно будет отредактировать путь для того, чтобы он совпадал с расположением файла на вашем ПК или сервере.
О модулях
Как было сказано выше, ядро функциональности EZ-CSS заключается в различных заготовленных модулях, которые вы можете с легкостью скопировать и вставить в код для определения разметки.
Есть 7 модулей разметки страницы веб-сайта на выбор: Plain Box, 2A, 2B, 3A, 3B, 4A и 4B. Как видно на изображении ниже, каждый модуль состоит из 1, 2, 3 или 4-х колонок.
Используя эти простые блоки, вы можете создавать множество невероятно сложных разметок. Уровень сложности повышается за счет разветвления. Допустим, что вы будете использовать модуль 2А для создания разметки в две колонки, а затем захотите разделить левую колонку на три секции. Вы просто вставляете код модуля 3А внутрь кода модуля 2А и все готово!
На странице разметок также есть несколько заранее подготовленных основных разметок, которые уже совмещают модули и сохраняют кучу вашего времени!
Например
Для того чтобы ощутить, как это все работает, давайте быстренько создадим грязный набросок, используя платформу EZ-CSS. Мы будем разрабатывать одну из предварительно подготовленных разметок, но полностью с нуля. Это нужно для того, чтобы вы ощутили процесс создания собственной разметки.
Если вы проследуете по ступеням, описанным выше, то у вас должна быть директория с файлами HTML и ez-min.css. Прибавьте к этому еще style.css и состыкуйте его с вашим HTML-файлом. Далее, скопируйте текст модуля «Plain Box» и вставьте его в тело кода CSS.
<!-- Plain box -->
<div class="ez-mw">
<div class="ez-box">.1.</div>
</div>
Важно: Так как это будет нашим основным контейнером, мы изменили класс «ez-wr» на «ez-mw». Этот пункт центрирует всю разметку, текст будет выровнен по левому краю, а также поможет избежать того, что ваша новая разметка будет очищать все предыдущие (по левой стороне) плавающие элементы.
Добавляем заголовок
Первое, что нам нужно добавить – это заголовок. Так как мы растянем его по всей странице, нам нужен еще один модуль «plain box» (на этот раз нужно оставить класс «ez-wr»). Для того чтобы добавить его, мы внесем его внутрь DIV’а «ez-mw», заменяя DIV «ez-box», использованный ранее. Это звучит немного сложнее, чем на самом деле. Посмотрите на код ниже:
<!-- Plain box -->
<div class="ez-mw" id="container">
<!-- Header -->
<div class="ez-wr headerFooter">
<div class="ez-box">HEADER</div>
</div>
</div>
Заметьте, что мы также внесли туда немного своих тэгов id/class, так что мы можем стилизовать эти элементы по собственному предпочтению. Нам не захотелось стилизовать существующие классы EZ-CSS, так как они будут использоваться в разных ситуациях.
Форматируем заголовок
Для того чтобы понять, к чему это все приведет, мы немного забежим вперед и добавим несколько стилей для заголовка и тела веб-сайта.
* {
padding: 0;
margin: 0;
}
body {
font-family: Helvetica, sans-serif;
}
#container {
margin-top: 50px;
width: 900px;
}
.headerFooter {
background-color: gray;
height: 50px;
margin-bottom: 20px;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
}
Здесь важно учесть несколько моментов. Для начала, стандартные шаблоны EZ-CSS «резиновые», и это отлично подходит для некоторых задач, но нам не нужен резиновый шаблон, поэтому мы просто добавляем значение ширины контейнера, чтобы зафиксировать его. Все, что вы видите здесь – это всего лишь скорый набросок для того, чтобы придать заголовку хотя бы какой-нибудь вид. Мы также используем эти стили для подвала, поэтому мы и создали класс вместо Id.
Результат не особо привлекателен, но ведь это только начало!
Создание 2-х колоночного шаблона
Для того, чтобы внести некоторое содержимое, мы возьмем модуль 2А и перенесем его внутрь основной «обертки» после заголовка. Добавим несколько картинок в левую колонку и немного текста в правую.
<!-- Plain box -->
<div class="ez-mw" id="container">
<!-- Header -->
<div class="ez-wr headerFooter">
<div class="ez-box">HEADER</div>
</div>
<!-- First Row: Module 2A -->
<div class="ez-wr row">
<div class="ez-fl ez-negmr ez-50">
<div class="ez-box">
<img src="fff-1.jpg" />
</div>
</div>
<div class="ez-last ez-oh">
<div class="ez-box">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
Заметьте, что мы добавили класс «row» к первому DIV’у в модуле 2А. Это позволит нам добавить некоторые дополнительные поля позже. Также учтите, что здесь мы проделали совсем немного работы. На самом деле, мы просто копируем и вставляем содержимое из EZ-CSS и наполняем его собственными изображениями и текстом.
Заканчиваем шаблон
Для того чтобы подкрепить дизайн, скопируйте модуль 2А, который мы только что создали и добавьте его в другой. Также создайте подвал, в котором используется тот же модуль, что в заголовке.
<!-- Plain box -->
<div class="ez-mw" id="container">
<!-- Header -->
<div class="ez-wr headerFooter">
<div class="ez-box">HEADER</div>
</div>
<!-- First Row: Module 2A -->
<div class="ez-wr row">
<div class="ez-fl ez-negmr ez-50">
<div class="ez-box">
<img src="fff-1.jpg" />
</div>
</div>
<div class="ez-last ez-oh">
<div class="ez-box">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<!-- Second Row: Module 2A -->
<div class="ez-wr row">
<div class="ez-fl ez-negmr ez-50">
<div class="ez-box">
<img src="fff-1.jpg" />
</div>
</div>
<div class="ez-last ez-oh">
<div class="ez-box">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="ez-wr headerFooter">
<div class="ez-box">FOOTER</div>
</div>
</div>
Как видно, нам не нужно чистить плавающие элементы, добавлять классы «alpha» или что-нибудь еще, что должны были бы сделать, если бы пользовались 960.gs. Все что мы сделали, это побросали пару модулей, которые похожи на те, с которыми мы только что работали.
Завершаем стилизацию
Теперь добавьте немного стилизации для того, чтобы улучшить внешний вид.
* {
padding: 0;
margin: 0;
}
body {
font-family: Helvetica, sans-serif;
}
#container {
margin-top: 50px;
width: 900px;
}
.headerFooter {
background-color: gray;
height: 50px;
margin-bottom: 20px;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
}
.row {
margin-bottom: 20px;
}
Посмотрите, насколько малый код CSS нам понадобился! Большая часть из того, что вы видите выше – это опциональная стилизация, а над всем остальным работает EZ-CSS. Конечный продукт можно увидеть ниже:
Преимущества и недостатки
Здесь ясно видно, что преимущество заключается в быстрой разработке и широких возможностях. Если вы знаете, что вы делаете, то вы сможете получить почти законченный шаблон в течение 10 минут. Здесь нет конкретной сетки, которой нужно придерживаться, поэтому вы можете использовать ту ширину, которую захотите.
Тем не менее, здесь есть некоторые недостатки. Для новичков классовые имена EZ-CSS могут показаться достаточно сложными. Конечно, хорошо, что они такие короткие, но было бы более понятно, если бы у нас перед глазами было нечто большее, чем «ez-oh». Если кто-то не знакомый с платформами разработки посмотрит на ваш код, они, скорее всего, будут озадачены.
Большее недовольство вызывает то, что шаблоны страдают из-за основного DIV’а – itis. Дабы быть честными, нужно сказать, что сайт EZ-CSS признает, что простое копирование и вставка ведет к созданию множество лишних DIV’ов «ez-box». Например, почти все DIV’ы «ez-box» в примере, приведенном выше, могут быть полностью исключены. Посмотрите на эту улучшенную версию HTML с решенной проблемой DIV’ов.
<!-- Plain box -->
<div class="ez-mw" id="container">
<!-- Header -->
<div class="ez-wr headerFooter">
<div class="ez-box">HEADER</div>
</div>
<!-- First Row: Module 2A -->
<div class="ez-wr row">
<div class="ez-fl ez-negmr ez-50">
<img src="fff-1.jpg" />
</div>
<div class="ez-last ez-oh">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<!-- Second Row: Module 2A -->
<div class="ez-wr row">
<div class="ez-fl ez-negmr ez-50">
<img src="fff-1.jpg" />
</div>
<div class="ez-last ez-oh">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<!-- Footer -->
<div class="ez-wr headerFooter">
<div class="ez-box">FOOTER</div>
</div>
</div>
Здесь по-прежнему много DIV’ов (9, если быть точными), но это гораздо лучше, чем было. Очевидно, контейнеры ez-box по большей части для стилизации. Мы пойдем другим путем реализации стилизации, поэтому нам эти контейнеры не нужны. Это прибавляет немного лишней работы, но не так много. Просто будьте внимательны к тому, какой DIV вы вырезаете, и обязательно проверяйте, как это влияет на шаблон.
В завершение
Пару дней назад некоторые из нас даже не слышали о EZ-CSS, и поэтому многие даже из нашей команды до сих пор изучают сервис. Нам кажется, что это нечто вроде нового этапа в мире платформ разработки CSS, которые не подвержены обязательной сетчатой структуре, и в этом мы только что сами убедились на живом примере.
Так как мы до сих пор изучаем EZ-CSS, нам интересно было бы услышать ваше мнение об этом ресурсе. Мы уверены, что многие читатели гораздо лучше разбираются в подобных системах, и нам важно знать их мнение! Было бы совсем идеально, если бы кто-то из вас нашел ответы на самые часто-задаваемые вопросы:
1. Решает ли EZ-CSS проблемы, которые возникают с 960 или другими сетчатыми платформами?
2. Есть ли какие-то преимущества или недостатки, которых нет в этой статье?
3. Какие ограничения можно повстречать в этой системе?
4. Является ли EZ-CSS чем-то таким, что можно использовать в реальном мире или же его можно использовать лишь только для прототипа?