—»     —»   Создаем сложную разметку за считанные минуты с помощью EZ-CSS
  Раздел: Фреймворки и Платформы, CSS/Style Sheets   Нет комментариев  

Создаем сложную разметку за считанные минуты с помощью EZ-CSS



Если вы являетесь одним из многих разработчиков, то вы наверняка уже связали себя узами с различными платформами для разработки сетчатой структуры CSS.

EZ-CSS ищет пути решения тех задач, которые вы наверняка терпеть не можете в платформах разработки сетчатой структуры, ориентированных на сохранение функциональности и кросс-браузерной поддержки разметки в несколько колонок.

Что такое EZ-CSS?

EZ-CSS – это CSS-платформа, разработанная Сиерри Кобленцом (Thierry Koblentz). Она, в принципе, похожа на другие платформы, с которыми вы вероятно знакомы уже: 960.gs или Blueprint CSS, но и при этом она достаточно сильно отличается.

Создаем сложную разметку за считанные минуты с помощью EZ-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-х колонок.

Создаем сложную разметку за считанные минуты с помощью EZ-CSS

Используя эти простые блоки, вы можете создавать множество невероятно сложных разметок. Уровень сложности повышается за счет разветвления. Допустим, что вы будете использовать модуль 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.

Результат не особо привлекателен, но ведь это только начало!

Создаем сложную разметку за считанные минуты с помощью EZ-CSS

Создание 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. Конечный продукт можно увидеть ниже:

Создаем сложную разметку за считанные минуты с помощью 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 чем-то таким, что можно использовать в реальном мире или же его можно использовать лишь только для прототипа?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 7797   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930