Адаптивная верстка страниц Bootstrap

Коллеги, доброго дня!

Сверстать страницы с помощью фреймворка Bootstrap. Часть верстки имеется (футер и хедер) нужна верстка Body

Макеты резиновый, должен меняться в зависимости от размера экрана.

Часть пунктов в меню будет открываться только после регистрации на сайте.

Что нужно:

1. Кроссбраузерность

Сайт должен нормально работать в IE, FF, Opera, Safari, Chrome последней версии

2. Всегда описывать цвет фона для body даже если он белый.

3. Если используете CSS хаки, комментируйте, что это и для какого

браузера, а лучше используйте css_browser_selector.js. Заботьтесь о

верстальщиках, которым придется работать с этим макетом после вас.

4. Названия классов и id должны по смыслу соответствовать применению

например, header, menu, footer, news

6. Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.

7. Все что можно сделать без Javascript, делать без него.

8. Если Javascript кода много – нужно его выносить в отдельный файл.

Обработчики событий тоже лучше отделить и объявлять в отдельном файле.

9. Предварительно оговорить, какие JavaScript библиотеки вы планируете использовать при верстке макета.

10. Макет резиновый ширина заданной верстки 1170 px минимальный размер 320 px.

11. Макет обязательно должен помещаться в экран без горизонтальных скроллбаров

12. В папке с изображениями не должно быть картинок, не использующихся в

верстке. Если что-то исключили из верстки или переделали – не забывайте

удалять уже ненужные картинки.

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

строку (например, для кнопок или заголовков, если в дизайне не

предусмотрено, что они могут занимать больше одной строки), обязательно

задавайте CSS свойство white-space:nowrap.

14. CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например:

/* ___________1. Сброс CSS____________________*/

/* ___________2. Типовые элементы____________*/

/* _______________2.1. Залоговки______________*/

/* _______________2.2. Ссылки________________*/

/* _______________2.3. Элементы форм_________*/

/*___________3. HEADER (Шапка сайта) __________*/

/*___________4. FOOTER (Подвал )_______________*/

/*___________5. SIDEBAR (Справа)_______________*/

15. Работа будет производится этапами. Страниц будет много

В обязательном порядке прикрепить файл с описанием изменений в макете примерно такого содержания:

Добавил новые картинки в папку img,

Картинки btnHome.jpg и btnFeedback.jpg уже не нужны, можно удалять

Изменил html-код в секции файла anketa.html

Добавил в конец файла main.css новые стили (начиная с .form_row и ниже).

16. CSS и JS файлы должны быть в той же кодировке, что и макет.

17. Если в макете присутствует JS, изменяющий DOM – внимательно следить, чтобы все корректно работало в Опере

18. Не забывайте прописывать cursor:pointer для кнопок, сделанных не с

помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик

событий с помощью JS или это будет ссылкой, лучше в любом случае

использовать тег .

19. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали

false, или же используйте href='javascript:void(0)' вместо популярного

href='#', чтобы страница не скроллилась вверх.

20. Формы: метки полей должны находиться в тегах label, имеющих правильно заполненный

атрибут for. Предусматривайте при верстке форм элементы для вывода

ошибок валидации и стили для неправильно заполненных полей.

21. В макете использованы шрифты семейства PT Sans Serif и PT Sans Pro их нужно грамотно подключить

22. В макетах, где высота страницы зависит от контента предусмотреть, чтобы

футер был прибит к низу браузера при отсутствии/малом количестве

контента.

23. 100%-ная html-валидация

800 р верстка простой страницы без форм. 1300 р верстка страницы с формами