css-framework

CSS-хаки и фильтры

Aleksej Romanovskij — Fri, 22 Feb 2008 08:54:29 -0400

Подключение CSS-файлов для IE Для фильтрации CSS-стилей по версия IE используются так называемые Conditional Comments.

CSS-Framework — руководство пользователя

Aleksej Romanovskij — Sat, 16 Feb 2008 16:23:54 -0400

* Вспомогательные классы * Меню * Горизонтальные меню * Вертикальные меню * Элементы контента * Выравнивание текста и плавающие элементы * Таблицы * Колонки с текстом * Картинки * Формы, поля ввода...

CSS-Framework — руководство пользователя

Aleksej Romanovskij — Sat, 16 Feb 2008 16:19:19 -0400

Вспомогательные классы

Aleksej Romanovskij — Sat, 16 Feb 2008 14:33:08 -0400

«Ластик» * { margin: 0; padding: 0; } Данное правило обнуляет все отступы у всех элементов, которым по умолчанию назначены ненулевые значения. Например спискам, параграфам, заголовкам, заданы различные отступы во всех браузерах. Оно даёт гарантию того, что вы будете иметь полный конт…

Вертикальное меню

Aleksej Romanovskij — Sat, 16 Feb 2008 09:51:27 -0400

Вертикальное меню Класс .menu-v — создаёт простое вертикальное меню. /* Vertical Menu ------------------------------ */ .menu-v { border-top: 1px solid #ccc; } .menu-v li { padding: 2px 0; list-style: none; border-bottom: 1px solid #ccc; } .menu-v li ul { padding-left: 1em; margin-top: 2px; } .menu-v li li { border: none; border-top: 1px solid #ccc; }

Формы

Aleksej Romanovskij — Sat, 16 Feb 2008 09:22:18 -0400

Формы Для форм написано минимум стилей: /* Content Form ------------------------------ */ .content form { } .content fieldset { margin-bottom: 1em; border: none; } .content legend { margin-top: -1px; padding-bottom: 1em; font-size: 1.1em; font-weight: bold; } .content .f-row { overflow: hidden; margin-bottom: .5em; } .content label { float: left; text-align: right; width: 25.99%; padding: 0 2%; } .content .f-inputs { padding-left: 30%; } .f-actions { padd…

Таблицы

Aleksej Romanovskij — Sat, 16 Feb 2008 09:20:12 -0400

Включенный в фреймворк код, стилизует таблицы: /* Tables ------------------------------ */ table { border-collapse: collapse; width: 100%; } table th, table td { border: 1px solid #ccc; padding: 2px 3px; vertical-align: top; } table th { background: #f4f4f4; } table td { }

Элементы контента

Aleksej Romanovskij — Sat, 16 Feb 2008 09:19:32 -0400

Данные правила действуют внутри блоков с классом content. К примеру:

Заголовки, параграфы, списки и всё остальное выводятся здесь :)

Ещё один дополнительный контентный блок...

Колонки

Aleksej Romanovskij — Sat, 16 Feb 2008 09:18:40 -0400

Колонки с текстом, картинками... 2 колонки, 3 колонки, 10 колонок, это всё реально. /* Columns ------------------------------ */ .columns { width: 100%; overflow: hidden; } .w-5, .w-10, .w-15, .w-20, .w-25, .w-30, .w-35, .w-40, .w-45, .w-50, .w-55, .w-60, .w-65, .w-70, .w-75, .w-80, .w-85, .w-90, .w-95, .w-100, .w-33, .w-66, .w-38, .w-62 { float: left; overflow: hidden; } .col-content { padding: 0 6px; } .col-first { padding-left: 0!…