CSS-фреймворки

CSS-фреймворк – фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.).

Преимущества
упрощается и ускоряется процесс создания макета сайта;
кроссбраузерность;
возможность использования генераторов кода и визуальных редакторов.
Недостатки
может содержать много лишнего кода, который не будет использоваться в проекте;
дизайн будет зависеть от css-библиотеки.

Обзор фреймворков
1. Gumby framework
http://www.gumbyframework.com/
2. Bootstrap
http://getbootstrap.com/
http://mybootstrap.ru/
3. Uikit
http://getuikit.com/
4. Zurb Foundation
http://foundation.zurb.com/
5. Semantic UI
http://semantic-ui.com/
6. Blueprint CSS
7. 960 Grid System

ДЗ
скачать фреймворк Bootstrap, посмотреть видеоуроки

LESS – это динамический язык стилей.
Bootstrap был изначально разработан с использованием LESS.

Семантическая верстка
Семантической называют верстку, использующую для структурирования html-документов теги, которые разделяют код на логические блоки, определяющие их роль и содержание в структуре web-страницы.

Блочные элементы
Элемент
Определяет верхнюю часть страницы или элемента, шапку страницы сайта.
заголовок (девиз, слоган компании);
логотип сайта (компании);
контактную информацию (телефоны, часы работы).
Теги
нельзя помещать внутрь тегов
,
и сам

Элемент
Используется для определения нижнего колонтитула страницы (подвал) или элемента (подвал).
правовая информация (копирайты);
имя автора;
название сайта и/или компании;
телефон и/или адрес компании и т.п.
Не может содержать в себе

Элемент
Тег
определяет раздел страницы, в котором размещается логически связанная информация, имеющая свой заголовок.
Каждый раздел может иметь свои собственные теги
и
, включающие в себя свои собственные заголовки.

Элемент
Обозначает основное меню сайта (панель навигации).
В меню nav располагают ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д.

Элемент
Используется для разделения раздела страницы на логические блоки, блок должен быть связан с общим разделом, но иметь свой собственный смысл и быть отдельной логической единицей страницы.

Элемент
Обрамляет боковую панель (сайдбар), на странице сайта.

<br> section, header, nav, article, aside, footer { display: block; }<br>