Sribna

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

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

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

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

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

Таким образом получим 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.

Автор: Yuriy Drozdov

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

• JavaScript Unit Testing

Эта запись опубликована Thursday, July 31st, 2008 в 11:32 am Рубрики: CSS. Подпишитесь на RSS 2.0 ленту комментариев. Комментирование запрещено, но Вы можете поставить трекбек со своего сайта.