Меню

Inclusion
Одностраничный фреймворк

Лесс/сасс фреймворк, на этот раз для одностраничных макетов.
Часть первая: введение, демо

Вниз

Введение

Посты в одну страницу для вдохновения
Вдохновение: интересные одностраничные посты

Однажды я увидел какой-то пост на медиуме и заметил, что данный сайт имеет достаточно простой и изысканный дизайн. К тому же в демонстрациях некоторых проектов я использовал подобные раскладки и задумывался над тем, чтобы это все автоматизировать (шаблонизировать).
Потом я прочел цю статтю и я понял - вот оно, это именно то, что мне нужно! Мне нужен фреймворк с возможностью семантической разметки, использованием кастомных классов и конечно же написанием малого количества стилей (или вообще без них, хех). Кроме того, я имел несколько проектов, демки которых имели схожие макеты: описание, презентация эксперимента и некоторые технические детали.
Поэтому я решил начать изыскания по препроцессорному лесс/сасс фреймворку. Что ж, он несколько похож на один известный сервис ... в целом, но давайте все же посмотрим на этот "велосипед".
Так в чем же суть этого фреймворка? - Все просто, пишем произвольную разметку с кастомными именами классов, а в таблице стилей применяем к этим классам соответствующие миксины с желаемыми опциями, например:

	
<h1 class="article-title">This is article title</h1>
<p class="article-text">And here comes some interesting text</p>			
							
Пример разметки

 /* import framework */
@import "inclusion.scss";

/* define our styles */
.article-title{
	@include typo(center, dark, serif);
}			
.article-text{
	@include typo(justify, dark, sans);
}
							
Пример стилей

Ну в общем вот так это и работает. Однако этот "велосипед" гораздо мощнее, он позволяет создавать великолепные страницы с приятной типографикой и другими элементами, такими как изображения, блоки кода, цитаты, таблицы, списки, спойлеры и тд.

Доступные включения

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

Также есть некоторые вспомогательные включения, они помогают создать структуру страницы подобную как в этой демке. Ими стилизуются элементы, вроде меню, секций, джамбо-экранов (верхняя и нижняя секции с фоновыми кртинки), разделы секций, иконочные кнопки, подвал. Эти базовые включения определяют структуру страницы. Несмотря на это, они не являются часто употребляемыми и поэтому продемонстрировать их непросто, однако результатом их действия является часть целой страницы, например та же навигация или джамботрон.

Я размышлял над названием для этого эксперимента и воспользовался генератором имен репозиториев от Гитхаба, результат порадовал - одним из вариантов было "Inclus", что означает включен (включающий). Смотря на то, что фреймворк построен на миксинах и экстендах less / scss, мы имеем однозначного победителя: Inclusion. Включение, лаконично и в яблочко)

Живая демка

Вот здесь можно увидеть живые примеры элементов страницы, созданных и стилизованных при помощи Inclusion. Ниже представлено где-то восемь групп уже стилизованных элементов (почему "где-то", потому что в процессе написания демки ведется разработка элементов, поэтому их + - 8 групп): заголовки и текст, изображения, цитаты, списки, блоки кода, блок-контейнеры (с опцией спойлера) , таблицы, кнопки. Базовые включения, такие как секции, разделы или навигация здесь не показаны, об этом говорилось ранее.

Просто наведите на элемент страницы и получите подсказку с его описанием. И еще одно, в некоторых случаях вместо навязчивого лорем Ипсум я буду использовать абстрактные линии. Это также шрифт и называется он Redacted

Заголовки и текст

Этот параграф является примером общего текстового блока с шрифтом без засечек и выравниванием по-ширине. Давайте добавим немного лорем Ипсум и взглянем на параграфы в действии!

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat

Центрированный подзаголовок со шрифтом без засечек

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Центрированный подзаголовок со шрифтом с засечками

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Центрированный подзаголовок с зауженным шрифтом

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Заголовок со шрифтом без засечек по левому краю

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Заголовок со шрифтом с засечками по левому краю

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Заголовок с зауженным шрифтом по левому краю

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Заголовок со шрифтом без засечек по правому краю

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Заголовок со шрифтом с засечками по правому краю

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Заголовок с зауженным шрифтом по правому краю

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Заметьте, что также мы можем использовать плавающие обтекаемые заголовки и текстовые блоки внутри блоков-контейнеров, подробнее об этом в разделе Блоки

Изображения

Что же, здесь мы можем видеть центрированные, плавающие или экстра позиционированные изображения. Также кликнув по каждому из них можно просмотреть полноэкранную картинку. Для этого я использовал плагин Intense Images. Это действительно крутая штука!

Cruise ship in Trondheimsfjorden, 1923
Cruise ship in Trondheimsfjorden, 1923

Vivamus elementum semper nisi.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat

Capilano Canyon, North Vancouver
Capilano Canyon, North Vancouver

Quisque rutrum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

Lindesnes Fyr
Lindesnes Fyr

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Donec ac lacus vel lorem aliquet malesuada in sit amet sapien. Aliquam erat volutpat. Nullam gravida faucibus tellus semper molestie.

Transmission lines in May 1972
Transmission lines in May 1972

Quisque id auctor felis.

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada. Donec tempus vulputate felis, id dictum odio euismod sit amet.

Curabitur adipiscing leo eu ipsum rhoncus, quis imperdiet elit pretium. Praesent viverra nunc et justo commodo tincidunt. Mauris leo augue, fringilla vitae tempor in, facilisis in sapien. Integer dui sapien, placerat at orci sit amet, laoreet vestibulum nunc. Vestibulum nec placerat felis. Etiam blandit massa ac ligula aliquet pretium. Suspendisse potenti. Aliquam erat volutpat. Quisque id auctor felis. Proin sollicitudin euismod aliquam.

Surveying at Innveien, Veiholmen, 1923.
Surveying at Innveien, Veiholmen, 1923.

Vivamus elementum semper nisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Perspective of Jackson, Miss. 1925.
Perspective of Jackson, Miss. 1925.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Цитаты

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Here we can see paragraphs, headings (normal and condensed), images with captions (full-width centered, floated left and right), blockquotes(centered, left and right aligned), lists(left and right floated) and common blocks(centered or left-right floated) for some content like code or plain text.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Vivamus elementum semper nisi.

Sed mattis ultricies odio eget luctus. Duis quam neque, auctor at ante ut, pretium dictum justo. Phasellus ligula lorem, pharetra ut dapibus id, posuere eget massa. Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio. Vivamus sed risus quis nisl aliquam egestas quis in est. Phasellus id nisl vitae ante iaculis convallis venenatis non diam.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Vivamus elementum semper nisi.

Nullam adipiscing enim mattis purus pretium, in vestibulum enim lacinia. Fusce tellus nunc, facilisis vitae facilisis commodo, laoreet ut dui. Sed a arcu imperdiet, mollis velit et, auctor nisi. Donec porttitor dapibus interdum. Morbi imperdiet varius lobortis. Ut accumsan lacus ac laoreet vestibulum. Aliquam facilisis at ipsum vel lobortis. Nunc sed cursus elit. Nullam sodales, magna nec rutrum convallis, purus urna posuere nisl, eu dapibus nunc purus ac mi. Donec vel leo commodo, faucibus augue ac, gravida massa. Ut sagittis urna nec commodo vehicula. Duis nec consequat lectus, sit amet faucibus est. Nam a sagittis odio, eu mollis diam.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem Ipsum is simply dummy text

Sed mattis ultricies odio eget luctus. Duis quam neque, auctor at ante ut, pretium dictum justo. Phasellus ligula lorem, pharetra ut dapibus id, posuere eget massa. Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio. Vivamus sed risus quis nisl aliquam egestas quis in est.

Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Mauris vitae porta diam.

Lorem Ipsum is simply dummy text

Sed mattis ultricies odio eget luctus. Duis quam neque, auctor at ante ut, pretium dictum justo. Phasellus ligula lorem, pharetra ut dapibus id, posuere eget massa. Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Упорядоченные и неупорядоченные списки

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  3. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Vivamus elementum semper nisi.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.

Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum.

  • Lorem ipsum dolor sit amet consectetuer.
  • Proin eu egestas metus, quis semper mauris.
  • Cras arcu ligula, hendrerit ac tempus ac.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Pellentesque euismod lorem id sagittis fermentum. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  3. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Vivamus elementum semper nisi.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum.

  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.
  • Vestibulum ante ipsum primis in faucibus.
  • Proin eu egestas metus, quis semper mauris.
  • Cras arcu ligula, hendrerit ac tempus ac.

Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio. Pellentesque euismod lorem id sagittis fermentum. Donec id dictum tortor, ac tincidunt mi. Ut elementum hendrerit lectus, a viverra quam adipiscing eleifend. Pellentesque a libero ipsum.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Cum sociis natoque penatibus et magnis.
  3. Nulla consequat massa quis enim.

Vivamus elementum semper nisi.

Praesent commodo quam vel sem facilisis, non semper nisi malesuada. Ut vel blandit nunc. Nulla felis nunc, consectetur pharetra scelerisque nec, fermentum a odio. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Donec id dictum tortor, ac tincidunt mi. Ut elementum hendrerit lectus, a viverra quam adipiscing eleifend. Pellentesque a libero ipsum.

  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.
  • Vestibulum ante ipsum primis in faucibus.
  • Proin eu egestas metus, quis semper mauris.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Cum sociis natoque penatibus et magnis.
  3. Nulla consequat massa quis enim.

Vivamus elementum semper nisi.

Praesent commodo quam vel sem facilisis, non semper nisi malesuada. Ut vel blandit nunc. Nulla felis nunc, consectetur pharetra scelerisque nec, fermentum a odio. Quisque aliquet odio quis eros fringilla iaculis. Pellentesque euismod lorem id sagittis fermentum. Donec id dictum tortor, ac tincidunt mi. Ut elementum hendrerit lectus, a viverra quam adipiscing eleifend. Pellentesque a libero ipsum.

  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.
  • Vestibulum ante ipsum primis in faucibus.
  • Proin eu egestas metus, quis semper mauris.

Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Suspendisse potenti. In sed magna ornare, aliquet ligula vitae, scelerisque ligula. Sed in mauris ultricies, euismod nisi a, pharetra est. Mauris vitae porta diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada posuere posuere. Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Proin eu egestas metus, quis semper mauris. Cras arcu ligula, hendrerit ac tempus ac, porta nec odio.

Блоки кода

	
<section class="main">
	<div class="screen screen-first"></div>
	<div class="screen screen-second"></div>
	<div class="screen screen-third"></div>
	<div class="screen screen-fourth"></div>
	<div class="screen screen-fifth"></div>
	<div class="screen screen-sixth"></div>
	<div class="screen screen-seventh"></div>
	<div class="screen screen-eighth"></div>
</section>
							
Фрагмент разметки горизонтального лэйаута

Proin sollicitudin euismod.

Praesent ante est, sollicitudin eu velit at, eleifend interdum ipsum. Duis et blandit metus. Fusce sed pellentesque turpis, eu faucibus mi. Nullam tempor nibh sit amet semper posuere. Cras in dignissim mi. Suspendisse id massa ac nisl posuere congue et in velit.

Donec vitae semper ante, et placerat est. Vivamus adipiscing pulvinar purus. Suspendisse imperdiet nibh ac purus placerat sodales. Praesent vel molestie libero. Quisque gravida et leo ut placerat. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.

	
<section class="timeline">
	<div class="timeline_milestone"></div>	
	<article class="timeline_post">
		<h1 class="tl-post_date"></h1>		
		<div class="tl-post_card">
			<header class="tl-post_header"></header>
			<div class="tl-post_content">
				<div class="content_wrap"></div>
			</div>
			<div class="tl-post_footer"></div>
		</div>
	</article>
</section>	
							
Фрагмент разметки вертикального таймлайна

Proin sollicitudin euismod.

Praesent ante est, sollicitudin eu velit at, eleifend interdum ipsum. Duis et blandit metus. Fusce sed pellentesque turpis, eu faucibus mi. Nullam tempor nibh sit amet semper posuere. Cras in dignissim mi. Suspendisse id massa ac nisl posuere congue et in velit.

Donec vitae semper ante, et placerat est. Vivamus adipiscing pulvinar purus. Suspendisse imperdiet nibh ac purus placerat sodales. Praesent vel molestie libero. Quisque gravida et leo ut placerat. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.


/* ==============================
   $Fonts
   ==============================*/   
@import url(http://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300&subset=latin,cyrillic);
@import "../../../global/frameworks/inclusion/fonts/OpenSans/opensans.css"; 
@import "../../../global/frameworks/inclusion/fonts/OpenSans-Cond/opensans-cond.css";

/* 'Open Sans', Tahoma, Verdana, Arial, sans-serif - for headings and text*/ 
/*  Georgia, Times, "Times New Roman", serif  - for blockquotes and lists */
/*  Consolas, Monaco, 'Andale Mono', monospace - for code fragments */

@import "../../../global/frameworks/inclusion/fonts/inclusion/inclusion-embedded.css"; /* Some framework icons */				
							
Импорт шрифтов из этого проекта

Morbi adipiscing vehicula ante in condimentum. Sed id laoreet neque. Sed turpis neque, pharetra sed tortor id, tincidunt laoreet ipsum. Mauris vitae tincidunt dui. Integer at sollicitudin ligula. Donec venenatis mi ut varius porttitor. Mauris et cursus libero, ut consequat nisl.

	
<!--Opengraph-->
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Inclusion | Single page framework">
		<meta property="og:description" content="Inclusion is a single page less\sass framework created for my experiments and tutorials">
		<meta property="og:image" content="http://orlovmax.com/src/lab/inclusion/img/pic.jpg">
		<meta property="og:url" content="http://orlovmax.com/lab/tools/inclusion">						
							
Код Оупенграф метаинформации для этой демки

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue sem. Sed eros tortor, rhoncus eget tortor at, adipiscing faucibus libero. Nullam eget neque sit amet eros sagittis venenatis. Nulla cursus metus in mattis consectetur. Cras nibh est, vestibulum vel imperdiet in, porttitor vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed pharetra tellus. Morbi et tellus iaculis, viverra nibh non, placerat diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce semper elementum mattis. Suspendisse vitae porta turpis.

	
<!--TwitterCard-->
		<meta name="twitter:card" content="summary">
		<meta name="twitter:title" content="Inclusion | Single page framework">
		<meta name="twitter:description" content="Inclusion is a single page less\sass framework created for my experiments and tutorials">
		<meta name="twitter:image:src" content="http://orlovmax.com/src/lab/inclusion/img/pic.jpg">
		<meta name="twitter:creator" content="@orlovmax_im">
		<meta name="twitter:site" content="@orlovmax_im">
		<meta name="twitter:url" content="http://orlovmax.com/lab/tools/inclusion">					
							
Код Твиттер-кард для этой демки

Morbi dictum lorem gravida massa scelerisque suscipit. Vestibulum euismod semper ante ac tempor. Phasellus aliquam dolor a massa vehicula dignissim. Nunc libero eros, viverra ut nisl pulvinar, convallis ultrices arcu. Donec non est tortor. Suspendisse mauris purus, mattis sit amet quam in, varius dapibus orci. Proin bibendum pretium dolor, sed consectetur tellus adipiscing non. Aliquam vitae purus ac turpis cursus luctus at ut sem.

Integer sed risus dictum, pretium lorem ac, ultricies urna. Nulla ac sem malesuada, eleifend nibh non, suscipit elit. Quisque vitae orci gravida lacus posuere tempor. Phasellus est nisl, faucibus vel sapien vitae, auctor ultrices velit. Sed mollis urna mauris, vel sagittis velit dapibus in. Sed lorem nunc, pulvinar varius nunc at, dictum tincidunt felis. Vivamus egestas rutrum odio et viverra. Suspendisse mauris purus, mattis sit amet quam in, varius dapibus orci.

								
<script src="/src/global/js/prism.min.js" data-default-language="markup"></script> /* syntax highlight script */

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/src/global/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/src/global/frameworks/inclusion/js/inclusion.min.js"></script>
							
Код импорта скриптов для этой демки

Morbi adipiscing vehicula ante in condimentum. Sed id laoreet neque. Sed turpis neque, pharetra sed tortor id, tincidunt laoreet ipsum. Mauris vitae tincidunt dui. Integer at sollicitudin ligula. Donec venenatis mi ut varius porttitor. Mauris et cursus libero, ut consequat nisl.

Таблицы

Nam neque ipsum, varius ut lacus a, vehicula ultricies est. Phasellus fringilla porta leo, nec pretium ante lobortis nec. Nam aliquet, nisi vel sagittis facilisis, sem ipsum sollicitudin odio, ac sodales urna lorem non purus. Donec sodales ac turpis nec gravida. Aliquam laoreet in felis quis suscipit. Fusce ultrices felis ac nulla adipiscing tincidunt. Pellentesque a tristique metus, eu gravida nibh.

Обтекаемая справа таблица
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Proin sollicitudin euismod.

Donec vitae semper ante, et placerat est. Vivamus adipiscing pulvinar purus. Suspendisse imperdiet nibh ac purus placerat sodales. Praesent vel molestie libero. Quisque gravida et leo ut placerat. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.

Обтекаемая слева таблица
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue sem. Sed eros tortor, rhoncus eget tortor at, adipiscing faucibus libero. Nullam eget neque sit amet eros sagittis venenatis. Nulla cursus metus in mattis consectetur. Cras nibh est, vestibulum vel imperdiet in, porttitor vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed pharetra tellus. Morbi et tellus iaculis, viverra nibh non, placerat diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce semper elementum mattis. Suspendisse vitae porta turpis.

Центрированная таблица на всю ширину
Entry Header 1Entry Header 2Entry Header 3Entry Header 4Entry Header 5
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4Entry First Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4Entry Last Line 5

Praesent ante est, sollicitudin eu velit at, eleifend interdum ipsum. Duis et blandit metus. Fusce sed pellentesque turpis, eu faucibus mi. Nullam tempor nibh sit amet semper posuere. Cras in dignissim mi. Suspendisse id massa ac nisl posuere congue et in velit.

Обтекаемая справа таблица с экстра позиционированием
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Proin sollicitudin euismod.

Donec vitae semper ante, et placerat est. Vivamus adipiscing pulvinar purus. Suspendisse imperdiet nibh ac purus placerat sodales. Praesent vel molestie libero. Quisque gravida et leo ut placerat. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.

Обтекаемая слева таблица с экстра позиционированием
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Quisque id auctor felis.

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada. Donec tempus vulputate felis, id dictum odio euismod sit amet.

Curabitur adipiscing leo eu ipsum rhoncus, quis imperdiet elit pretium. Praesent viverra nunc et justo commodo tincidunt. Mauris leo augue, fringilla vitae tempor in, facilisis in sapien. Integer dui sapien, placerat at orci sit amet, laoreet vestibulum nunc. Vestibulum nec placerat felis. Etiam blandit massa ac ligula aliquet pretium. Suspendisse potenti. Aliquam erat volutpat. Quisque id auctor felis. Proin sollicitudin euismod aliquam.

Центрированная таблица с экстра позиционированием
Entry Header 1Entry Header 2Entry Header 3Entry Header 4Entry Header 5
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4Entry First Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4Entry Last Line 5

Praesent ante est, sollicitudin eu velit at, eleifend interdum ipsum. Duis et blandit metus. Fusce sed pellentesque turpis, eu faucibus mi. Nullam tempor nibh sit amet semper posuere. Cras in dignissim mi. Suspendisse id massa ac nisl posuere congue et in velit.

Блоки

Это включение было создано в качестве контейнера для других элементов страницы, таких как виджеты, сложные блоки, медиа контент, фреймы, обтекаемые заголовки или превьюшки изображений. Также этот элемент имеет опцию спойлера, что позволяет прятать контент под спойлер с заголовком и иконкой +/-
Звучит это довольно интересно и на самом деле эта штука очень полезна в некоторых случаях, давайте взглянем как она в деле:

Гист с БЭМ-стилизованными селекторами

Curabitur adipiscing leo eu ipsum rhoncus, quis imperdiet elit pretium. Praesent viverra nunc et justo commodo tincidunt. Mauris leo augue, fringilla vitae tempor in, facilisis in sapien. Integer dui sapien, placerat at orci sit amet, laoreet vestibulum nunc. Vestibulum nec placerat felis. Etiam blandit massa ac ligula aliquet pretium. Suspendisse potenti. Aliquam erat volutpat. Quisque id auctor felis. Proin sollicitudin euismod aliquam. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue.

Morbi dictum lorem gravida massa scelerisque suscipit. Vestibulum euismod semper ante ac tempor. Phasellus aliquam dolor a massa vehicula dignissim. Nunc libero eros, viverra ut nisl pulvinar, convallis ultrices arcu. Donec non est tortor. Suspendisse mauris purus, mattis sit amet quam in, varius dapibus orci. Proin bibendum pretium dolor, sed consectetur tellus adipiscing non. Aliquam vitae purus ac turpis cursus luctus at ut sem.

Скрытая под спойлер таблица
Центрированная таблица на всю ширину
Entry Header 1Entry Header 2Entry Header 3Entry Header 4Entry Header 5
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4Entry First Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4Entry Last Line 5

Curabitur adipiscing leo eu ipsum rhoncus, quis imperdiet elit pretium. Praesent viverra nunc et justo commodo tincidunt. Mauris leo augue, fringilla vitae tempor in, facilisis in sapien. Integer dui sapien, placerat at orci sit amet, laoreet vestibulum nunc. Vestibulum nec placerat felis. Etiam blandit massa ac ligula aliquet pretium. Suspendisse potenti. Aliquam erat volutpat. Quisque id auctor felis. Proin sollicitudin euismod aliquam.

A lot of sand.
A lot of sand.
Groningen
Groningen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Скрытая под спойлер цитата

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada. Donec tempus vulputate felis, id dictum odio euismod sit amet.

Обтекаемый справа заголовок со шрифтом без засечек

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

Скрытый неупорядоченный список
  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Список из заголовком внутри обтекаемого слева блока

  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.
  • Vestibulum ante ipsum primis in faucibus.
  • Proin eu egestas metus, quis semper mauris.

Nam neque ipsum, varius ut lacus a, vehicula ultricies est. Phasellus fringilla porta leo, nec pretium ante lobortis nec. Nam aliquet, nisi vel sagittis facilisis, sem ipsum sollicitudin odio, ac sodales urna lorem non purus. Donec sodales ac turpis nec gravida. Aliquam laoreet in felis quis suscipit. Fusce ultrices felis ac nulla adipiscing tincidunt. Pellentesque a tristique metus, eu gravida nibh.

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue.

Скрытый параграф

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Vestibulum accumsan augue eu velit tempus consectetur. Praesent suscipit, velit a egestas euismod, massa nisi volutpat dolor, at feugiat nisi ligula id ligula. Nulla suscipit aliquet neque, tempus ultrices justo vehicula eget. Pellentesque congue sodales facilisis. Aliquam auctor convallis convallis. Donec bibendum orci eu magna ornare, vitae imperdiet purus commodo. Nunc in vestibulum mauris, vitae scelerisque ligula. Integer consequat nunc vel lacus dictum, porta consequat nunc feugiat.

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue.

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada. Donec tempus vulputate felis, id dictum odio euismod sit amet.

Кнопки

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est.

Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada.

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada. Donec tempus vulputate felis, id dictum odio euismod sit amet.

Сетка

Пример резиновой адаптивной сетки

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12

Резиновая сетка со смещением колонок

1
1
1
1
1
1
1
1
2
2
2
3
3
4
4
6
12

Адаптивная резиновая сетка с гнездами и фиксированными отступами

Конец первой части...

Демка вышла и правда большая , не так ли? Я думаю просмотреть код , а также поговорить о технических деталях и использовании следует во второй части, поэтому встретимся на темной стороне фреймворка:)

Но если у вас есть желание , то можете просмотреть проект на гитхабе, скачать исходный код или форкнуть!