На Главную

YUI Grids CSS

July 31st, 2008 by Yuriy Drozdov

Ребята из Yahoo медленно, но верно вносят свой вклад в развитие интернета. Наверное, не так и медленно, но что верно вносят, это без всяких сомнений. К своему стыду, я только недавно обратил внимание на YUI Grids CSS.

Если вы хотите верстать сайты, как это делают в Yahoo, то YUI Grids CSS именно для вас. Для этого у вас будет в распоряжении 6 готовых шаблонов и набор классов для построения структуры сайта, проверенные в наиболее используемых браузерах.

Как это выглядит в работе?

Для начала, нужно подключить css файл:

HTML:
  1. <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">

Потом формируем структуру сайта:

HTML:
  1. <div id=”doc3” class="yui-t1"><!—-overall document wrapper-->
  2.   <div id=”hd”><!--header / masthead--></div>
  3.   <div id=”bd”><!--body-->
  4.      <div id="yui-main">
  5.       <div class="yui-b"> Main column content </div>
  6.      </div>
  7.      <div class="yui-b">
  8.         Second column content
  9.      </div>
  10.   </div>
  11.   <div id=”ft”><!--footer--></div>
  12. </div>
  13. </body>

Таким образом получим 2-х колоночный макет, 100% ширины.

Главный div обертка может иметь id равным doc-doc4, это в свою очередь определяет ширину каркаса (doc 750px, doc2 950px, doc3 100%, doc4 974px).

Класс главного дива yui-t1 тоже может менять свое значение от yui-t1 до yui-t6, и определяет в свою очередь ширину и сторону второстепенной колонки. Для класса yui-t1 второстепенная колонка будет иметь ширину 160 и находится слева.

С помощью специальных классов .yui-gb – .yui-gf можно добиться, например, такой структуры 1/3 - 1/3 - 1/3 или 3/4 - 1/4.

Все классы и идентификаторы оснасщены описанием и хорошими примерами на YUI Grids CSS. Любителям шпоргалок можно даже скачать Cheat Sheet.

Напоследок, хочу предложить посмотреть длинное (42 минуты), но интересное видео о YUI CSS.


Nate Koechley: "The YUI CSS Foundation" @ Yahoo! Video

Автор: Yuriy Drozdov

Похожие статьи:

RSS комментариев | Trackback URI

8 Комментариев

Comment by hayk Subscribed to comments via email
2008-07-31 12:51:50

Парень из видео чем-то на Гепу похож :)
По теме: было бы неплохо если бы ты еще и те примеры что приводишь заодно и демонстрировал.

 
Comment by Yuriy Drozdov
2008-07-31 13:05:44

Спасибо, учту на будущее :)

 
2008-07-31 13:33:13

Так-то оно лучше будет, чем шпаргалки читать:
http://developer.yahoo.com/yui/grids/builder/

 
Comment by Dimox Subscribed to comments via email
2008-07-31 18:42:19

Почему же “к своему стыду”? Я вот тоже впервые об этом читаю. И, честно говоря, даже не понял, что это и зачем нужно :)

Comment by Yuriy Drozdov
2008-08-01 10:03:49

Видать я плохо объяснил, подумаю над тем, чтобы добавить примеров в статью и пояснений :)

 
 
Comment by spomoni
2008-08-01 11:21:58

Когда уже Yahoo начнет покорять Рунет…

 
Comment by milax Subscribed to comments via email
2008-08-03 14:32:30

Когда-то мельком имел дело с этой штукой, но почему-то решил что пользоваться своими заготовками и стилем верстки быстрее и проще. Может, я просто не до конца разобрался? :)

 
Comment by Андрей Subscribed to comments via email
2008-08-07 11:16:27

еще бы с переводом и вообще класс

 

Извините, комментарии закрыты.