Demo post — blocks

This is the seventh post with tests and demo for blocks with code snippets and explanations

Let`s go!

Blocks

This inclusion was created as container for other page elements like widgets, complex blocks, media stuff, iframes or floated titles and also some nested things as container with titled lists or image galleries. Also this element have a spoiler option, that hide content under spoiler with title and icon.
This sounds good and it's really useful for some cases so let's see how we can do this.


    <div class="block block_left">
        <h3 class="typo typo_center typo_condensed">Bem-styled selectors gist</h3>
        <script src="https://gist.github.com/orlovmax/7dcb059b85c04c176a2a.js"></script>
    </div>

Left-floated gist from github within block

Bem-styled selectors gist

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">Hidden table</a>
        <table class="table table_center">
            <caption>Centered full-width table</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>

Hidden table

Centered full-width table
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4	Entry Header 5
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4	Entry First Line 5
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4	Entry Line 5
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4	Entry Last Line 5


    <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="/static/images/post/2015-01-13-demo-post-blocks/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="/static/images/post/2015-01-13-demo-post-blocks/7.jpg" alt="Groningen" />
            <figcaption>Groningen</figcaption>
        </figure>                           
    </div>

Right-floated thumbs within block

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">Hidden blockquote</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>

Right-floated blockquote under spoiler

Hidden blockquote

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>Left floated subtitle with sans-serif font</h3>
    </div>

Left-floated subtitle within block

Left floated subtitle with sans-serif font

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">Hidden unordered list</a>
        <ul class="list">
            <li>Lorem ipsum dolor sit amet consectetuer.</li>
            <li>Aenean commodo ligula eget dolor.</li>
        </ul>                           
    </div>

Right-floated titled list with extra margin within block

Hidden unordered list

Lorem ipsum dolor sit amet consectetuer.
Aenean commodo ligula eget dolor.


    <div class="block block_right block_right-extra">
        <h3 class="typo typo_right typo_condensed">Titled list within right-floated block</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>

Right-floated titled list with extra margin within block

Titled list within right-floated block

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.

                      
    <div class="block block_right block_right-extra block_spoiler js-spoiler">
        <a href="#" class="js-panel">Hidden paragraph</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>

Right-floated paragraph under spoiler

Hidden paragraph

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.


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

Left-floated (with extra margin) blockquote within block

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.

                         
    <div class="block block_left block_left-extra block_spoiler js-spoiler">
        <a href="#" class="js-panel">Hidden image</a>
        <figure class="image image_center">
            <img class="js-lazy js-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/static/images/post/2015-01-13-demo-post-blocks/3.jpg" alt="Lindesnes Fyr" />
            <figcaption>Lindesnes Fyr</figcaption>
        </figure>                           
    </div>

Left-floated image under spoiler

Hidden image