1

Etapa 1

Разобраться со свойством @media в CSS3

2

Etapa 2

Сделать адаптивную верстку главной страницы на Twitter Bootstrap.

3

Etapa 3

Разобраться с Masonry

4

Etapa 4

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

5

Etapa 5

Натянуть всё на работающий сайт.

1

Etapa 1

Разобраться со свойством @media в CSS3

2

Etapa 2

Сделать адаптивную верстку главной страницы на Twitter Bootstrap.

3

Etapa 3

Разобраться с Masonry

4

Etapa 4

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

5

Etapa 5

Натянуть всё на работающий сайт.

23 marzo 2015
completed_date

Autor del objetivo

General

Редизайн сайта с использованием Bootstrap + Masonry

oOrel.ru - это городской Twitter-агрегатор новостей моего города. Молодой и динамично развивающийся =)

Старый дизайн и вёрстка были сделаны очень быстро и на коленке, пора исправлять.

Главное требование - вёрстка должна быть адаптивной для любых разрешений и устройств.

Для этого я буду использовать Twitter Bootstrap и jQuery-библиотечку Masonry, которая размещает блоки на странице в виде плитки.

Поехали.

 Criterio del fin

Новый дизайн радует глаз =)

  1. Разобраться со свойством @media в CSS3

    До этого никогда не делал адаптивную верстку, пора начинать =)

  2. Сделать адаптивную верстку главной страницы на Twitter Bootstrap.

    Есть отличная и бесплатная тема для него: BootFlat, нужно подумать как её можно использовать.

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

  3. Разобраться с Masonry

    Раньше не работал с этой библиотекой, надо посмотреть примеры, что к чему. Возможно стоит использовать, что-то другое.

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

    Думаю использовать бутстраповские модальные окна.

  5. Натянуть всё на работающий сайт.

  • 2492
  • 23 marzo 2015, 15:04
Registración

Las posibilidades
están ilimitadas.
Es la hora
de descubrir las suyas

Уже зарегистрированы?
Registración rápida a través de redes sociales
Entrada al sitio

Entre.
Está abierto.

not_registered
 
Conéctese a cualquiera de sus cuentas, sus datos se tomarán de la cuenta.
¿Ha olvidado la contraseña?