Skeleton – адаптивная верстка с комфортом

04.02.2013

skeleton

Адаптивная верстка сайта — один из главных трендов веб-разработки на сегодняшний день, многие разработчики(включая меня) уже считают адаптивность стандартом, а не приятным бонусом. Сегодняшняя статья будет посвящена одному из самых простых для понимания инструментов — фреймворку Skeleton.

Эту статью написал мой хороший знакомый — фронт-энд разработчик Юрий Похилько, он же Neolot. У него большой опыт и в вопросах верстки я ему всецело доверяю


За последние пару лет количество мобильных телефонов и планшетов с возможностью выхода в Интернет выросло в тысячи раз и продолжает неуклонно увеличиваться с ростом популярности продукции Apple и устройств на базе ОС Android. Все эти устройства очень разнородны и имеют разные размеры экрана, поэтому сейчас остро стоит вопрос: как сделать, чтобы сайт был дружественным к мобильным устройствам и позволял удобно просматривать информацию?

Конечно, такой вопрос стоял и раньше, и решали его с помощью дополнительной версии сайта с упрощенным дизайном. Однако с развитием web-технологий это перестало быть актуальным – теперь достаточно иметь один дизайн, но дизайн этот должен быть адаптивным.

Что такое адаптивный дизайн?

Адаптивный (responsive) дизайн – это дизайн, который одинаково хорошо выглядит на разных разрешениях экрана без вмешательства пользователя. Это удобно как владельцу сайта (один дизайн проще и дешевле поддерживать, чем несколько), так и посетителю, ведь сайт будет отлично выглядеть на смартфоне, ноутбуке и телевизоре.

Отлично, давайте будем делать адаптивный дизайн для всех сайтов! Можно и нужно, однако это довольно трудоемкая задача, ведь нужно учесть все условия, в которых будут открываться страницы сайты. Именно поэтому в помощь разработчикам стали появляться современные CSS-фреймворки с поддержкой адаптивной верстки.

skeleton framework

Встречайте Skeleton!

Одним из таких CSS-фреймворков является Skeleton. Свое название (с англ. «скелет») он получил за простоту и минимализм. В нем нет ни массы скриптов, ни сотен килобайт стилей. Все, что необходимо – это два стилевых файла и один файл стилей для вашего сайта, которые, при желании, можно объединить в один.

Что умеет Skeleton?

Skeleton работает на базе стандартной сетки 960px, поэтому подойдет только для сайтов с фиксированным дизайном. В сетке 16 колонок, это дает большую гибкость в размещении блоков. Есть готовые стили для заголовков, абзацев, списков, форм и кнопок. Дизайнеры могут скачать специальный psd-файл с оформлением Skeleton.

Поддерживается абсолютное большинство браузеров и мобильных устройств:

  • Chrome (Mac/PC)
  • Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
  • Safari
  • IE7, IE8, IE9, IE10
  • iPhone (Retina)
  • Droid (Charge/Original)
  • iPad
  • Android


Существуют расширения Skeleton для WordPress, Drupal и Ruby. Поскольку Skeleton очень маленький фреймворк, то для его освоения вам понадобится не более часа.
Вы можете попробовать его в своем новом проекте и сами в этом убедиться. Я сделал на нем около пяти проектов за полгода и всегда получал восторженные отзывы от клиентов и их посетителей. Поэтому я рекомендую его своим коллегам.

Юрий Похилько aka Neolot специально для gering111.com

, , ,

Комментариев: 13

  1. Фёдор

    Я использую Skel JS. Бесит меня принудительная привязка в 960px… Даже на 1920х1080 пикселей такие сайты уже смотрятся странно…. В скеле таких недочётов нет, строка на 12 колонок, заполняй как хочешь

    Ответить
  2. Losman Boston

    Короче. Это набор css правил. Все. Ему кроме этого ничего не надо. Раз так, то можно подключать практически ко всему подряд где исползуется css.

    Ответить
  3. klay

    Последний коммит на гитхабе — более года назад. Проект замёрз?

    Ответить
    • GerinG

      Можно и так сказать, давно обновлений не было. Однако, во фреймворке нет особых проблем, поэтому не критично.

      Ответить
  4. Sergey

    А еще бы обзорную статью по инструменту? Чтоб самому не разбираться

    Ответить
    • GerinG

      Дык там все очень и очень просто, писать статью-мануал просто не о чем. Если чего непонятно — спрашивайте в комментах, попробую помочь

      Ответить
  5. Деловой

    на мой взгляд очень удобный инструмент, но есть вопрос: а для вордпресса скелетон идет как модуль или как???

    Ответить
    • Иван Евдокимов

      Владелец блога сейчас в отъезде, но скоро вернется и ответит на Ваш вопрос.

      Ответить
    • GerinG

      Нет, это инструмент для облегчения верстки макетов, для WP в том числе.

      Ответить
  6. Сергей

    Интересная статья получилась, а главное с полезной информацией!:)

    Ответить