Адаптивная верстка: CSS&JS фреймворк Skeleton


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


Что такое Skeleton?


Skeleton это фреймворк, основанный на CSS и JavaScript. Он позволяет верстать сайты таким образом, чтобы они одинаково удобно и красиво выглядели как на мониторе 17 дюймов, так и на дисплее смартфонов и планшетах.

В Skeleton есть несколько базовых принципов:

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

Сетка данного фреймворка основана на всем нам знакомой 960-пиксельной сетке, однако она легко адаптируется под размер браузера и дисплея.

Простота использования

Skeleton семантически правильный. Все элементы названы понятным языком и вам не составит труда разобраться в фреймворке. Кроме того, в Skeleton сразу включены элементы первой необходимости, такие как кнопки, формы, табы и т. п.

Обособленность от дизайна

Skeleton это не UI фреймворк. Он не заставляет Вас приспосабливаться под свой дизайн, его наоборот легко приспособить к любому дизайну и пользовательскому интерфейсу.

Сетка фреймворка

Skeleton основан на 960-пиксельной сетке, но синтаксис прост и блоки легко подстраиваются под размер браузера. Сетка имеет 12-ти блоковую систему.

Таким образом нужно понимать, что сама система предполагает, что в одной линии у вас должно быть не менее 12-ти маленьких блоков, либо состоять из блоков различной ширины, но конечная «сумма» должна быть не менее 12-ти.

Ниже приведен синтаксис разметки:
<!-- The container is a centered 960px -->
<div class="container">
  
  <!-- Give column value in word form (one, two..., twelve) -->
  <div class="twelve columns">
    <h1>Full Width Column</h1>
  </div>
  
  <!-- Sweet nested columns cleared with a clearfix class -->
  <div class="six columns clearfix">
    <!-- In nested columns give the first column a class of alpha
    and the second a class of omega -->
    <div class="three columns alpha">...</div>
    <div class="three columns omega">...</div>
  </div>

  <!-- Sweet nested columns cleared by wrapping a .row -->
  <div class="five columns">
    <div class="row">
      <div class="three columns alpha">...</div>
      <div class="two columns omega">...</div>
    </div>
  </div>

  <!-- Sweet nested columns cleared by <br class="clear"> -->
  <div class="five columns">
    <div class="three columns alpha">...</div>
    <div class="two columns omega">...</div>
    <br class="clear" />
  </div>

  <!-- Can push over by columns -->
  <div class="five columns offset-by-one"></div>

</div>



Типографика

Типографика в Skeleton основана на строгой иерархии. Основной шрифт — Helvetica Neue, но его, конечно-же, легко изменить. Параграфы «p» заданы 14-ти пиксельным шрифтом и межстрочным расстоянием в 21 пиксель.

Также в Skeleton встроен «инструмент» цитаты. Он задается тегом «blockquote».

Кнопки

Кнопки также имеют свой стиль и анимацию. Более того, помимо тега «button» можно определить кнопки при помощи стилей.


<!-- Just add .button to an anchor -->
<a href="#" class="button">Click Me</a>

<!-- Also works on plain button elements -->
<button>Click Me</button>

<!-- To take up full-width of a container? -->
<a href="#" class="full-width button">Click Me</a>



Вкладки (табы)

В Skeleton по умолчанию включены также вкладки. Они реализованы при помощи jQuery. Их можно легко задать при помощи обычного списка «ul», обозначив его классом «tabs», а их содержимое классом «tabs-content».

<!-- Standard <ul> with class of "tabs" -->
<ul class="tabs">
  <!-- Give href an ID value of corresponding "tabs-content" <li>'s -->
  <li><a class="active" href="#simple">Simple</a></li>
  <li><a href="#lightweight">Lightweight</a></li>
  <li><a href="#mobileFriendly">Mobile</a></li>
</ul>

<!-- Standard <ul> with class of "tabs-content" -->
<ul class="tabs-content">
  <!-- Give ID that matches HREF of above anchors -->
  <li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS.</li>
  <li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
  <li id="mobileFriendly">The tabs work like a charm even on mobile devices.</li>
</ul>


Формы

Формы в Skeleton особо ничем не выделаются, они просто выровнены по сетке.


Жесткие рамки

Skeleton ориентирован на универсальные дизайны, однако, творческая мысль может пойти дальше, и, возможно, Вам захочется менять фон, или другие элементы в зависимости от положения планшета, телефона или их разрешения. И тут Вам на помощь придут мини-хаки:
  • Меньше чем 960 пикселей: Меньше чем стандартная сетка.
  • Если планшет повернут в портретное положение: Между 768px и 959px.
  • Показ элементов предназначенных для мобильных версий: Если разрешение ниже 767px.
  • Только для планшетов в горизонтальном положении: От 480px до 767px.
  • Только для мобильных устройств в вертикальном положении: Менее 479px.

/* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}



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

Скелетон поддерживает следующие браузеры:
  • Google Chrome (Mac/PC)
  • Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
  • Safari
  • IE9, IE8, IE7
  • iPhone (Retina)
  • Droid (Charge/Original)
  • iPad


Скачать и ознакомиться в оригинале можно на официальном сайте.
Поделиться публикацией

Комментарии 36

    +23
    Предпочитаю bootstrap.
      +1
      +1, но кстати когда искал что еще есть помимо bootstrap такое же простое и удобное, альтернативы не нашел. Вот теперь можно на что то посмотреть.
        +1
        bootstrap как по мне предназначен только для одной цели. Если у вас мало времени и нету денег на дизайнера, а сами вы таковым не являетесь, лучше взять оный набор стилей и сделать быстро, красиво и шаблонно. Я считаю что использовать бутстрап или любой другой фреймворк такого типа имеет смысл лишь в бэкэнд системах. Ну или там оформить страничку на гитхабе.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Есть несколько сайтов построенных на бутстрапе. И это совсем не умаляет их достоинств.
            Содержание важнее формы.
            0
            http://foundation.zurb.com/ к примеру
              0
              Есть еще совсем простенький Simpliste.
            0
            Спасибо возьмем на вооружение.
              +4
              А вот и первые баги нововведения [dog]media преобразуется в ссылку на пользователя :)
                +1
                В типичном веб-приложении (не сайте) обычно есть таблицы. И весь responsive design упирается в них. У bootstrap нет нормального решения. Здесь, видимо, тоже. Поэтому, все будет прекрасно смотреться на всех устройствах только до появления первой таблицы.
                  +1
                  Вообще если сайт очень серьезный, и для него ценная каждая страница, то организуется хороший контент менеджмент, который отвечает за правильное размещение контента и таблицы можно скажем обойти. И обычно сайты которым нужен такой дизайн — это какие-то сервисы, таблицы там редкость.
                  Так что решение поповоду талиц лежит в каждом отдельном случае на верстальщике.
                    0
                    Если сайт очень серьезный, то разработчики позаботятся так же и возможности использования таблиц и вряд ли будут использоваться что-то вроде скелетона. Полный отказ от таблиц — это уже фанатизм. Если они есть, значит они нужны. Семантика должна соблюдаться (табличные данные должны быть в таблице). Ну и плюс то, что вы сказали про хороший контент менеджмент поддержу.
                      0
                      А кто говорил о полном отказе от таблиц? Просто скажем на мобильно, таблица с 15 колонками ну нафик не нужна, человек там потеряется. Если в контенте есть боьшие талицы, то я бы давал ссылку на отдельную страницу с ними для мобильных, где открывалась бы только таблица и юзер бы нативными средствами браузера мог бы дергать страницу в лево в право, это намного менее глючно чем какой-нибудь скроллин в диве.
                    +1
                    в таком случае можно спокойно использовать враппер с overflow и при маленьких размерах экрана будет появляться прокрутка что бы можно было просмотреть всю таблицу

                      +1
                      Боюсь на мобильном прокручивать вот так страницу не столь удобно. Вообще я голосую за то чтобы делать 2 разных сайта — мобильную и обычную версию, да более трудоемко, но зато все индивидуально и позволяет съэкономить трафик юзеров.
                        0
                        В идеале — да, поддерживаю. Так как это реализовано на wikipedia.org или discogs.com, например.
                      0
                      Посоветуйте плиз какой-нибудь фреймворк для самописной веб-панели. В панели всё на таблицах :( Вообще всё :( Панелька нарисована на PHP.
                      +12
                      Хотелось бы видеть в статье упоминание об отличиях/преимуществах в сравнении с аналогами, bootstrap того же.

                      Пост — полезный.
                        +1
                        max-width: 767px мой 7 дюймовый планшет с 1024x600 смотрит на вас с ненавистью. А ведь таких не мало.
                          +1
                          А есть ещё смартфоны с 1280x720 :)
                            0
                            Ну собственно а зачем Вам с таким разрешением видеть планшетную версию. У Вас по ширине влезает вполне себе обычная десктопная версия.
                              –1
                              А мне разве не мобильную выкинет? У меня кстати с софтом под андроидом проблемы в плане определения планшетности. Например ВКонтакте не врубает свой интерфейс или новый Firefox. Они просто думают, что у меня большой телефон…
                                0
                                Не выкинет. Тут идет именно расчет разрешения, так что все будет отображаться как на десктопе.
                            +1
                            здесь
                            <div class="sixteen columns">
                                <h1>Full Width Column</h1>
                            </div>
                            


                            должно было быть twelve columns, так?
                              0
                              Все верно. Поправил. Спасибо!
                                0
                                В PSD файле на сайте тоже 16 колонок.
                                Что странно. Так сколько их всё-таки?
                                  0
                                  Итак, вернул sixteen. Теперь объясняем почему:
                                  На сайте самого фреймворка — 4 колонки занимает вертикальное левое меню — соответственно в указанном примере показано 12 колонок.
                                  Таким образом сетка имеет 16-колонок Собственно *my bad*. Исправляю.
                                    0
                                    Аррр… Экспериментальным путем выяснилось что колонок все-таки 12. Класс sixteen просто не работает. Работает только twelve. На предыдущий коммент внимания не обращаем.
                              0
                              А что то новое в нем есть?
                                0
                                Вот бы Гугл выпустил свой, Гуглобутстрап… некоторые интерфейсы у них — просто счастье какое-то
                                  +7
                                  Только некоторые. Да и то спорно.
                                  +4
                                  Мне даже больше, чем bootstrap нравится.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      –1
                                      Когда вижу подобные фреймворки (речь только о layout части) постоянно возникает вопрос: чем такая вёрстка лучше старой доброй табличной, кроме семантичности?

                                      А по сути: а на 1920 адаптировать можно? И откуда вообще пошла мода ограничивать ширину сайта половиной ширины довольно распространенного разрешения, да ещё называть это адаптирующейся вёрсткой?
                                        0
                                        Это всё, конечно, хорошо, но а с Оперой что. Неужели она не поддерживает этот фреймворк вообще?
                                          +1
                                          В опере скорее всего всё (или почти всё) будет нормально, просто наверное разработчики не воспринимают её как распространённый браузер.

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                        Самое читаемое