bar.html

<div class="demo-container">
<h1>Bar</h1>
    <section class="share share__bar">
        <h3 class="share__title">Share this page</h3>
        <ul class="share__list">
            <li>
                <a class='share__social-link skycon--hover' target='_blank' href='https://www.facebook.com/sharer/sharer.php?u=url-encoded-web-address'>
                    <i aria-hidden=true class='skycon skycon--facebook'></i><span class="share__name">Facebook</span>
                </a>
            </li>
            <li>
                <a class='share__social-link skycon--hover'  target='_blank' href='https://twitter.com/intent/tweet?url=url-encoded-web-addess&text=url-encoded-page-title'>
                    <i aria-hidden=true class='skycon skycon--twitter'></i><span class="share__name">Twitter</span>
                </a>
            </li>
            <li >
                <a class='share__social-link skycon--hover' target='_blank' href='https://plus.google.com/share?url=url-encoded-web-addess'>
                    <i aria-hidden=true class='skycon skycon--google-plus'></i><span class="share__name">Google+</span>
                </a>
            </li>
            <li>
                <a class='skycon--hover' target='_blank' href='mailto:?subject=page-title&body=url-encoded-web-addess'>
                    <i aria-hidden=true class='skycon skycon--mail'></i><span class="share__name" >Mail</span>
                </a>
            </li>
        </ul>
    </section>
</div>