Lorem ipsum

Цей мега-пост - тестова і демонстраційна сторінка елементів блогу з прикладами коду для них

Вперед!

Елементи сторінки

В основі оформлення цього блогу лежить фреймворк Inclusion, відповідно всі його засоби доступні нам для оформлення контенту. У нас немає можливості стилізувати контент постів використовуючи препроцесорний код, але шляхом нехитрих маніпуляцій наш Сасс фреймворк перетворився на черговий велосипед простий ЦСС фреймворк. Стилізуємо контент без написання єдиного рядка ЦСС, круто, що й сказати!. Ну а далі цитата з оригіналу :

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

Опис Inclusion

Скажу про структуру даного поста — він величезний, але від цього не менш важливий: маємо розділи, в кожному розбирається стилізація певних елементів. Це все представлено у вигляді фрагментів коду і демок. Нижче ви можете бачити список якірних посилань на відповідні розділи для більш простої навігації :

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

Цей параграф є прикладом загального текстового блоку з шрифтом без зарубок і вирівнюванням по ширині. Давайте додамо трохи лорем іпсум і поглянемо на параграфи в дії!

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

    
    <h4 class="typo typo_sans typo_center">Центрований підзаголовок зі шрифтом без зарубок</h4>
    <h4 class="typo typo_serif typo_center">Центрований підзаголовок зі шрифтом із зарубками</h4>
    <h4 class="typo typo_condensed typo_center">Центрований підзаголовок із завуженим шрифтом</h4>        
        
Цетрированные заголовки

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



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



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



    
    <h4 class="typo typo_sans typo_left">Заголовок зі шрифтом без зарубок по лівому краю</h4>
    <h4 class="typo typo_serif typo_left">Заголовок зі шрифтом із зарубками по лівому краю</h4>
    <h4 class="typo typo_condensed typo_left">Заголовок з завуженим шрифтом по лівому краю</h4>        
        
Заголовки выровненные по левому краю

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



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



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



    
    <h4 class="typo typo_sans typo_right">Заголовок зі шрифтом без зарубок по правому краю</h4>
    <h4 class="typo typo_serif typo_right">Заголовок зі шрифтом із зарубками по правому краю</h4>
    <h4 class="typo typo_condensed typo_right">Заголовок з завуженим шрифтом по правому краю</h4>        
        
Заголовки выровненные по правому краю

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



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



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



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

Зображення

Що ж, тут ми можемо бачити центровані, плаваючі чи екстра-позиціоновані зображення. Також клікнувши по кожному з них можна переглянути повноекранну картинку. Для цього я використав плагін Intense Images. Це дійсно крута штука!

    
    <figure class="image image_left">
        <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/1.jpg" data-title="Cruise ship" alt="Cruise ship in Trondheimsfjorden, 1923" />
        <figcaption>Cruise ship in Trondheimsfjorden, 1923</figcaption>
    </figure>        
        
Плаваюче зображення, обтічне праворуч
Cruise ship in Trondheimsfjorden, 1923
Cruise ship in Trondheimsfjorden, 1923

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

    
    <figure class="image image_right">
        <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/2.jpg" data-title="Canyon bridge" alt="Capilano Canyon, North Vancouver" />
        <figcaption>Capilano Canyon, North Vancouver</figcaption>
    </figure>        
        
Плаваюче зображення, обтічне зліва
Capilano Canyon, North Vancouver
Capilano Canyon, North Vancouver

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.


    <figure class="image image_center">
        <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/3.jpg" data-title="Beacon" alt="Lindesnes Fyr" />
        <figcaption>Lindesnes Fyr</figcaption>
    </figure>                
        
Центроване зображення на всю ширину сторінки
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.

 
    <figure class="image image_left image_left-extra">
        <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/4.jpg" data-title="Orange sky" alt="Transmission lines in May 1972" />
        <figcaption>Transmission lines in May 1972</figcaption>
    </figure>               
        
Плаваюче зображення, обтічне праворуч з екстра позиціонуванням
Transmission lines in May 1972
Transmission lines in May 1972

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.


    <figure class="image image_right image_right-extra">
        <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/5.jpg" data-title="Surveying" alt="Surveying at Innveien, Veiholmen, 1923." />
        <figcaption>Surveying at Innveien, Veiholmen, 1923.</figcaption>
    </figure>                
        
Плаваюче зображення, обтічне зліва з екстра позиціонуванням
Surveying at Innveien, Veiholmen, 1923.
Surveying at Innveien, Veiholmen, 1923.

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.

 
    <figure class="image image_center image_center-extra">
        <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/8.jpg" data-title="Old view" alt="Perspective of Jackson, Miss. 1925." />
        <figcaption>Perspective of Jackson, Miss. 1925.</figcaption>
    </figure>               
        
Центроване зображення з екстра позиціонуванням
Perspective of Jackson, Miss. 1925.
Perspective of Jackson, Miss. 1925.

Цитати

    
    <blockquote class="bq bq_align-center">
        <p>Lorem ipsum dolor sit amet</p>
        <cite><a rel="nofollow" href="http://www.lipsum.com/">Lorem Ipsum is simply dummy text</a></cite>
    </blockquote>                
        
Центрована цитата на всю ширину з посиланням

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



    <blockquote class="bq bq_align-left">
        <p> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</p>
        <cite><a rel="nofollow" href="http://www.lipsum.com/">Lorem Ipsum is simply dummy text</a></cite>
    </blockquote>                
        
Цитата на всю ширину, вирівняна по лівому краю з посиланням

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


 
    <blockquote class="bq bq_align-left bq_pos-left">
        <p> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</p>
    </blockquote>               
        
Обтічна праворуч цитата, вирівняна по лівому краю без посилання

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

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.


    <blockquote class="bq bq_align-right bq_pos-right">
        <p> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</p>
    </blockquote>                
        
Обтічна зліва цитата, вирівняна по правому краю без посилання

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

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.


    <blockquote class="bq bq_align-right">
        <p> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</p>
        <cite><a rel="nofollow" href="http://www.lipsum.com/">Lorem Ipsum is simply dummy text</a></cite>
    </blockquote>                
        
Цитата на всю ширину, вирівняна по правому краю з посиланням

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



    <blockquote class="bq bq_align-center bq_pos-center bq_pos-center-extra">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </blockquote>                
        
Центрована цитата на всю ширину з екстра позиціонуванням і без посилання

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.




    <blockquote class="bq bq_align-left bq_pos-left-extra">
        <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    </blockquote>                
        
Цитата на всю ширину, вирівняна по лівому краю з екстра позиціонуванням і без посилання

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.




    <blockquote class="bq bq_align-left bq_pos-left bq_pos-left-extra">
        <p> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <cite><a rel="nofollow" href="http://www.lipsum.com/">Lorem Ipsum is simply dummy text</a></cite>
    </blockquote>                
        
Цитата обтічна праворуч, вирівняна по лівому краю з екстра позиціонуванням і посиланням

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.


    <blockquote class="bq bq_align-right bq_pos-right bq_pos-right-extra">
        <p>Nullam adipiscing lacinia odio, sed bibendum leo scelerisque id. Mauris vitae porta diam.</p>
        <cite><a rel="nofollow" href="http://www.lipsum.com/">Lorem Ipsum is simply dummy text</a></cite>
    </blockquote>                
        
Цитата обтічна ліворуч, вирівняна по правому краю з екстра позиціонуванням і посиланням

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.

 
    <blockquote class="bq bq_align-right bq_pos-right-extra">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </blockquote>               
        
Цитата на всю ширину, вирівняна по правому краю з екстра позиціонуванням і без посилання

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.

Впорядковані і невпорядковані списки

    
    <ol class="list list_left">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. </li>
        <li>Cum sociis natoque penatibus et magnis dis 
        parturient montes, nascetur ridiculus mus. </li>
    </ol>    
        
Обтічний праворуч впорядкований список
  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.

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.

 
    <ul class="list list_left">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Proin eu egestas metus, quis semper mauris.</li>
        <li>Cras arcu ligula, hendrerit ac tempus ac.</li>
    </ul>    
        
Обтічний праворуч невпорядкований список
  • 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.

 
    <ol class="list list_right">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. </li>
        <li>Cum sociis natoque penatibus et magnis dis 
        parturient montes, nascetur ridiculus mus. </li>
    </ol>     
        
Обтічний зліва впорядкований список
  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.

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.

 
    <ul class="list list_right">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Aenean commodo ligula eget dolor.</li>
        <li>Aenean massa cum sociis natoque penatibus.</li>
    </ul>    
        
Обтічний зліва невпорядкований список
  • 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.

 
    <ol class="list list_left list_left-extra">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit.</li>
        <li>Cum sociis natoque penatibus et magnis.</li>
        <li>Nulla consequat massa quis enim.</li>
    </ol>     
        
Обтічний праворуч впорядкований список з екстра позиціонуванням
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Cum sociis natoque penatibus et magnis.
  3. Nulla consequat massa quis enim.

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.

 
    <ul class="list list_left list_left-extra">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Aenean commodo ligula eget dolor.</li>
        <li>Aenean massa cum sociis natoque penatibus.</li>
    </ul>        
        
Обтічний праворуч невпорядкований список з екстра позиціонуванням
  • 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.

 
    <ol class="list list_right list_right-extra">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit.</li>
        <li>Cum sociis natoque penatibus et magnis.</li>
        <li>Nulla consequat massa quis enim.</li>
    </ol>        
        
Обтічний зліва впорядкований список з екстра позиціонуванням
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Cum sociis natoque penatibus et magnis.
  3. Nulla consequat massa quis enim.

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.

 
    <ul class="list list_right list_right-extra">
        <li>Lorem ipsum dolor sit amet consectetuer.</li>
        <li>Aenean commodo ligula eget dolor.</li>
        <li>Aenean massa cum sociis natoque penatibus.</li>
    </ul>        
        
Обтічний зліва невпорядкований список з екстра позиціонуванням
  • 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.

Блоки коду

Тут показані блоки коду і щоб не плодити додаткових елементів, кожен блок буде показувати власний код, який надає йому той чи інший вид

 
    <figure class="code code_left">
        <pre><code class="language-markup"> 
                    
        </code></pre>
        <figcaption>Обтічний праворуч блок коду</figcaption>
    </figure>
        
Обтічний праворуч блок коду

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.

 
    <figure class="code code_right">
        <pre><code class="language-markup"> 
                    
        </code></pre>
        <figcaption>Обтічний зліва блок коду</figcaption>
    </figure>
        
Обтічний зліва блок коду

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.

 
    <figure class="code code_center">
        <pre><code class="language-markup"> 
                    
        </code></pre>
        <figcaption>Центрований блок коду</figcaption>
    </figure>
        
Центрований блок коду

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.

 
    <figure class="code code_left code_left-extra">
        <pre><code class="language-markup"> 
                    
        </code></pre>
        <figcaption>Обтічний праворуч блок коду з екстра позиціонуванням</figcaption>
    </figure>
        
Обтічний праворуч блок коду з екстра позиціонуванням

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.

 
    <figure class="code code_right code_right-extra">
        <pre><code class="language-markup"> 
                    
        </code></pre>
        <figcaption>Обтічний зліва блок коду з екстра позиціонуванням</figcaption>
    </figure>
        
Обтічний зліва блок коду з екстра позиціонуванням

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.

 
    <figure class="code code_center code_center-extra">
        <pre><code class="language-markup"> 
                    
        </code></pre>
        <figcaption>Центрований блок коду з екстра позиціонуванням</figcaption>
    </figure>
        
Центрований блок коду з екстра позиціонуванням

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.

Таблиці


    <table class="table table_left">
        <caption>Обтічна праворуч таблиця</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
        
Обтічна праворуч таблиця
Обтічна праворуч таблиця
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

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.


    <table class="table table_right">
        <caption>Обтічна зліва таблиця</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
        
Обтічна зліва таблиця
Обтічна зліва таблиця
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.


    <table class="table table_center">
        <caption>Центрована таблиця на всю ширину</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
        
Центрована таблиця на всю ширину
Центрована таблиця на всю ширину
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.


    <table class="table table_left table_left-extra">
        <caption>Обтічна праворуч таблиця з екстра позиціонуванням</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
        
Обтічна праворуч таблиця з екстра позиціонуванням
Обтічна праворуч таблиця з екстра позиціонуванням
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

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.


    <table class="table table_right table_right-extra">
        <caption>Обтічна зліва таблиця з екстра позиціонуванням</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
        
Обтічна зліва таблиця з екстра позиціонуванням
Обтічна зліва таблиця з екстра позиціонуванням
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

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.


    <table class="table table_center table_center-extra">
        <caption>Центрована таблиця з екстра позиціонуванням</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
        
Центрована таблиця з екстра позиціонуванням
Центрована таблиця з екстра позиціонуванням
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

Блоки

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


    <div class="block block_left">
        <h3 class="typo typo_center typo_condensed">Гист с БЭМ-стилизованными селекторами</h3>
        <script src="https://gist.github.com/orlovmax/7dcb059b85c04c176a2a.js"></script>
    </div>
        
Гіст з Гітхаба всередині обтічного праворуч блоку

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

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.


    <div class="block block_center block_spoiler js-spoiler">
        <a href="#" class="js-panel">Прихована під спойлер таблиця</a>
        <table class="table table_center">
            <caption>Центрована таблиця на всю ширину</caption>
            <tr>
                <th>Entry Header 1</th>
                <th>Entry Header 2</th>
                <th>Entry Header 3</th>
                <th>Entry Header 4</th>
                <th>Entry Header 5</th>
            </tr>
        </table>
    </div>            
        
Прихована під спойлер таблиця
Прихована під спойлер таблиця
Центрована таблиця на всю ширину
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.


    <div class="block block_right">
        <figure class="image image_left">
            <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/6.jpg" alt="A lot of sand." />
            <figcaption>A lot of sand.</figcaption>
        </figure>                       
        <figure class="image image_left">
            <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/7.jpg" alt="Groningen" />
            <figcaption>Groningen</figcaption>
        </figure>                           
    </div>
        
Обтічні зліва прев'юшки всередині блоку
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.


    <div class="block block_right block_spoiler js-spoiler">
        <a href="#" class="js-panel">Прихована під спойлер цитата</a>
        <blockquote class="bq bq_align-left">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <cite><a rel="nofollow" href="http://www.lipsum.com/">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></cite>
        </blockquote>
    </div>
        
Обтічна зліва цитата під спойлером
Прихована під спойлер цитата

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.


    <div class="block block_left">
        <h3>Обтічний праворуч заголовок зі шрифтом без зарубок</h3>
    </div>
        
Обтічний праворуч заголовок всередині блоку

Обтічний праворуч заголовок зі шрифтом без зарубок

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.

                           
    <div class="block block_left block_spoiler js-spoiler">
        <a href="#" class="js-panel">Прихований невпорядкований список</a>
        <ul class="list">
            <li>Lorem ipsum dolor sit amet consectetuer.</li>
            <li>Aenean commodo ligula eget dolor.</li>
        </ul>                           
    </div>
        
Обтічний праворуч список під спойлером
Прихований невпорядкований список
  • 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.


    <div class="block block_right block_right-extra">
        <h3 class="typo typo_right typo_condensed">Список з заголовком всередині обтічного зліва блоку</h3>
        <ul class="list">
            <li>Lorem ipsum dolor sit amet consectetuer.</li>
            <li>Aenean commodo ligula eget dolor.</li>
            <li>Aenean massa cum sociis natoque penatibus.</li>
            <li>Vestibulum ante ipsum primis in faucibus.</li>
            <li>Proin eu egestas metus, quis semper mauris.</li>
        </ul>
    </div>
        
Обтічний зліва екстра позиційований список з заголовком всередині блоку

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

  • 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.

                      
    <div class="block block_right block_right-extra block_spoiler js-spoiler">
        <a href="#" class="js-panel">Прихований параграф</a>
        <p>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. </p>
    </div>
        
Параграф під обтічним зліва спойлером
Прихований параграф

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.


    <div class="block block_left block_left-extra">
        <blockquote class="bq bq_align-center">
        <p>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.</p>
        <cite><a rel="nofollow" href="http://www.lipsum.com/">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></cite>
    </blockquote>
    </div>
        
Цитата всередині обтічного праворуч блоку з екстра позиціонуванням

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.

                         
    <div class="block block_left block_left-extra block_spoiler js-spoiler">
        <a href="#" class="js-panel">Приховане зображення</a>
        <figure class="image image_center">
            <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/img/post/lorem/3.jpg" alt="Lindesnes Fyr" />
            <figcaption>Lindesnes Fyr</figcaption>
        </figure>                           
    </div>
        
Зображення під обтічним праворуч екстра позиціованим спойлером

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.

Кнопки


    <button type="button" class="button button_center button_small">Маленька кнопка</button>
    <button type="button" class="button button_center button_regular">Звичайна кнопка</button>
    <button type="button" class="button button_center button_large">Широка кнопка</button> 
    <button type="button" class="button button_left button_regular">Обтічна праворуч кнопка</button> 
    <button type="button" class="button button_right button_regular">Обтічна зліва кнопка</button>
    <button type="button" class="button button_center button_regular button_disabled">Вимкнена кнопка</button>
        

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.

Сітка

Приклад резинової адаптивної сітки

Розмітка резинової адаптивної сітки

    <div class="demo_gs gs_container">
        <div class="gs_row">                            
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
            <div class="demo_col gs_col-1 gs-tablet_col-2 gs-mobile_col-3">1</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
            <div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
            <div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
            <div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
            <div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
            <div class="demo_col gs_col-2 gs-tablet_col-4">2</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-3  gs-mobile_col-6">3</div>
            <div class="demo_col gs_col-3  gs-mobile_col-6">3</div>
            <div class="demo_col gs_col-3  gs-mobile_col-6">3</div>
            <div class="demo_col gs_col-3  gs-mobile_col-6">3</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-4  gs-mobile_col-12">4</div>
            <div class="demo_col gs_col-4  gs-mobile_col-12">4</div>
            <div class="demo_col gs_col-4  gs-mobile_col-12">4</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-6  gs-mobile_col-12">6</div>
            <div class="demo_col gs_col-6  gs-mobile_col-12">6</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-12">12</div>
        </div>                          
    </div>    
            
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

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

Розмітка резинової сітки

    <div class="demo_gs gs_container">
        <div class="gs_row">                            
            <div class="demo_col gs_col-1">1</div>
            <div class="demo_col gs_col-1">1</div>
            <div class="demo_col gs_col-1">1</div>
            <div class="demo_col gs_col-1">1</div>
            <div class="demo_col gs_col-1 gs_push-4">1</div>
            <div class="demo_col gs_col-1">1</div>
            <div class="demo_col gs_col-1">1</div>
            <div class="demo_col gs_col-1">1</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-2 gs_push-2">2</div>
            <div class="demo_col gs_col-2 gs_push-1 gs_pull-1">2</div>
            <div class="demo_col gs_col-2">2</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-3 gs_push-3">3</div>
            <div class="demo_col gs_col-3">3</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-4 gs_pull-4">4</div>
            <div class="demo_col gs_col-4">4</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-6 gs_push-3">6</div>
        </div>
        <div class="gs_row">
            <div class="demo_col gs_col-12">12</div>
        </div>                          
    </div>    
            
1
1
1
1
1
1
1
1
2
2
2
3
3
4
4
6
12

Висновок

Ну ось ми і розглянули стилізацію різних елементів засобами фреймворка Inclusion. Зрозуміло для написання статей може бути досить стандартних стилів і робити вкючення хтмл (якщо ви пишите дописи у форматі * .markdown ) буде зовсім необов'язково. До речі про включення, по замовчуванню для даного блогу ввімкнена розмітка kramdown і вона дозволяє додавати класи до елементів без написання хтмл. Ось так: {: class="typo typo_serif typo_center"} Детальніше дивіться тут і тут. Але все ж застосовуючи ці класи можна з легкістю поліпшити відображення контенту. На цьому мабуть все, дякую за увагу і вдалого нам усім блогінгу !


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям