471 И так, что такое Amazium? Вы наверное уже слышали про такой термин, как «Responsive Web Design» или дизайн сайта, который автоматически подстраивается под разрешение экрана любого устройства.
Так вот, этот фреймворк, как раз был создан, для того, чтобы облегчить вам задачу верстки сайтов с таким дизайном. Еще одним его плюсом является то, что он использует фреймворк grid 960 для построения модульных сеток под основное разрешение 1024×768.
960 Grid
Как вы видите, ничего сложного в построении такой сетки нет.
Посмотрите на примеры каркасов HTML.
Пример 1
|
1 2 3 4 5 |
<div class="row"> <div class="column grid_12"> ---Your text here--- </div> </div> |
Пример 2
|
1 2 3 4 5 6 7 8 |
<div class="row"> <div class="column grid_4"> ---Your text here--- </div> <div class="column grid_8"> ---Your text here--- </div> </div> |
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="row"> <div class="column grid_12"> ---Your text here--- <div class="row"> <div class="column grid_6"> ---1 of 2 coloums--- </div> <div class="column grid_6"> ---2 of 2 coloums--- </div> </div> </div> </div> |
Типографика
Как видно из превьюшки, в Amazium поставлены все основные стили типографики. По умолчанию стоит шрифт Century Gothic, но вы можете поставить и свой, изменив файл base.css. Там же можно менять и остальные параметры шрифта.
Формы и таблицы
Также видно, что для форм и таблиц были прописаны основные стили. Все также меняется в base.css.
Media Queries
Amazium использует 4 основных медиа-запроса.
- Все браузеры с разрешением по ширине более 960px
- iPad или другой тачпад с разрешением (728px)
- iPhone или любой смартфон в вертикальной ориентации (300px)
- iPhone или любой смартфон в горизонтальной ориентации (420px)
Пример
|
1 2 3 |
@media only screen and (min-width: 480px) and (max-width: 767px) { ---CSS here--- } |
Изображения
Изображения также могут менять свой размер в зависимости от разрешения экрана устройства, достаточно поставить каждому изображению атрибут class="max-image".
Пример
|
1 |
<img src="images/blank.jpg" border="0" alt="blank image" class="max-image"> |
Страница ошибки 404
Также была добавлена простая симпатичная страница 404 ошибки. Для того, чтобы эта страница появлялась при возникновении 404 ошибки на вашем сайте, достаточно разместить файл этой страницы (404.html) в корень вашего сайта и прописать следующую строку в файл .htacces:
|
1 |
ErrorDocument 404 /404.html |
Видео
Видео таже может подстраиваться под разрешение экрана, достаточно прописать для контейнера класс video-container:
Пример
|
1 2 3 |
<div class="video-container"> <iframe src="http://www.youtube.com/embed/d3J12dNz4xo" frameborder="0" allowfullscreen></iframe> </div> |
или старый метод
Пример 2
|
1 2 3 4 5 6 7 8 9 |
<div class="video-container"> <object width="640" height="390"> <param name="movie" value="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="640" height="390" allowscriptaccess="always" allowfullscreen="true"></embed> </object> </div> |
Кажется все.
