Что Это?

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

skeleton 1Отзывчивая Сетка для Мобильников

Skeleton имеет стандартную сетку на 960рх, в качестве базовой, но элегантно масштабируется, при уменьшении размера окна браузера, при просмотре на планшеах, сотовых телефонах (пейзаж / портрет) . Все это можно оценить изменяя размер окна Вашего браузера.

skeleton 2Быстрый Запуск

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

skeleton 3Стиль Агностик

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

 

 

Сетка Skeleton состоит из 16 колонок, каждая колонка предполагает ширину в 40рх и боковый margin в 10рх.

Синтаксис разметки следующий:

<!-- The container is a centered 960px -->
<div class="container">

<!-- Give column value in word form (one, two..., twelve) -->
<div class="sixteen columns">
<h1>Колонка на всю ширину</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>

 Из названий классов колонок видно, какое количество колонок занимает каждый блок. Например <div class="five columns"> занимает 5 колонок.

Отмечу, классы alpha и omega убирают левый и правый отступы соответственно.

Для десктопов:

skeleton-grid-620x343

Для мобильных устройств:

skeleton-grid-resize-620x545

Скачать psd-маску сетки для создания дизайна skeleton

Скачать skeleton

Официальный сайт

 

Добавить комментарий


Защитный код
Обновить