Редизайн сайта с использованием Bootstrap + Masonry
oOrel.ru - это городской Twitter-агрегатор новостей моего города. Молодой и динамично развивающийся =)
Старый дизайн и вёрстка были сделаны очень быстро и на коленке, пора исправлять.
Главное требование - вёрстка должна быть адаптивной для любых разрешений и устройств.
Для этого я буду использовать Twitter Bootstrap и jQuery-библиотечку Masonry, которая размещает блоки на странице в виде плитки.
Поехали.
Критерий завершения
Новый дизайн радует глаз =)
-
Разобраться со свойством @media в CSS3
До этого никогда не делал адаптивную верстку, пора начинать =)
-
Сделать адаптивную верстку главной страницы на Twitter Bootstrap.
Есть отличная и бесплатная тема для него: BootFlat, нужно подумать как её можно использовать.
Маленький изображения, имеет смысл кодировать в Base64 и встраивать прямо в CSS.
-
Разобраться с Masonry
Раньше не работал с этой библиотекой, надо посмотреть примеры, что к чему. Возможно стоит использовать, что-то другое.
-
Сделать, всплывающие по клику, окна с увеличенным изображением и комментариями.
Думаю использовать бутстраповские модальные окна.
-
Натянуть всё на работающий сайт.
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
