Simple Style Guide

simple-style-guide

<section>
    
    <div class="box caption outline-pad">
        <span data-picture data-alt="Alt text here, unless image is decorative.">
            <span data-src="http://placehold.it/700x200&text=Responsive+Image+(700+x+200)"></span>
            <span data-src="http://placehold.it/1000x300&text=Responsive+Image+(1000+x+300)" data-media="(min-width: 700px)"></span>
            <!--[if (lt IE 9) & (!IEMobile)]>
                <span data-src="http://placehold.it/1000x300&text=IE+Fallback+Image+(1000+x+300)"></span>
            <![endif]-->
            <!-- Fallback content for non-JS browsers. Same img src as above. -->
            <noscript><img src="http://placehold.it/700x200&text=Fallback+Image+(700+x+200)" alt="Alt text here, unless image is decorative."></noscript>
        </span>
        <p class="caption-text">This is a responsive image which uses the <em>picturefill</em> add-on. Resize your browser to see it in action.</p>
    </div>

    <p class="intro">Intro paragraph pellentesque habitant morbi tristique <strong>bold sample text</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est <em>italic sample text</em>. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui <a href="#">sample link</a> in turpis pulvinar.</p>

    <h2><a href="#">Section Heading Linked {h2}</a></h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>

    <ol>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>

    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
        &mdash; <cite><a href="#">Person Name</a></cite>
    </blockquote>

    <h3>Sub-section Heading {h3}</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>

    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>

    <h4>Sub-sub-section Heading {h4}</h4>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>

</section>

<hr>

<section>
    
    <h2>Inline Images with Content {h2}</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</p>

    <div class="box">
    
        <h3 class="clear">Image Floated Left {h3}</h3>

        <img src="http://placehold.it/150x150&text=Image" alt="Monkey with Red Fez Playing Cymbals" class="img-left outline">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in mi at felis aliquet congue.</p>
        <p>Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in mi at felis aliquet congue.</p>
        
    </div>

    <div class="box">
    
        <h3 class="clear">Image Floated Right {h3}</h3>

        <img src="http://placehold.it/150x150&text=Image" alt="Cutest Puppy in the Universe" class="img-right outline">
        <p>Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in mi at felis aliquet congue.</p>
        
    </div>
    
</section>

<hr>

<section>

    <h2>Columns (Grids) {h2}</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</p>
    
    <h3>Two Columns {h3}</h3>

    <div class="grid">

        <div class="one-half">

            <h4>Column One {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit.</p>

        </div><!-- /.one-half -->

        <div class="one-half">

            <h4>Column Two {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit.</p>

        </div><!-- /.one-half -->

    </div><!-- /.grid -->

    <h3>Three Columns {h3}</h3>

    <div class="grid">

        <div class="one-third">

            <h4>Column One {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis.</p>

        </div><!-- /.one-third -->

        <div class="one-third">

            <h4>Column Two {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis.</p>

        </div><!-- /.one-third -->

        <div class="one-third">

            <h4>Column Three {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis.</p>

        </div><!-- /.one-third -->

    </div><!-- /.grid -->

    <h3>Four Columns {h3}</h3>

    <div class="grid">

        <div class="one-fourth">

            <h4>Column One {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis.</p>

        </div><!-- /.one-fourth -->

        <div class="one-fourth">

            <h4>Column Two {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis.</p>

        </div><!-- /.one-fourth -->

        <div class="one-fourth">

            <h4>Column Three {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis.</p>

        </div><!-- /.one-fourth -->

        <div class="one-fourth">

            <h4>Column Four {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis.</p>

        </div><!-- /.one-fourth -->

    </div><!-- /.grid -->

    <h3>One Third / Two Thirds {h3}</h3>

    <div class="grid">

        <div class="one-third">

            <h4>Column One {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus malesuada.</p>

        </div><!-- /.one-third -->

        <div class="two-thirds">

            <h4>Column Two {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis.</p>

        </div><!-- /.two-thirds -->

    </div><!-- /.grid -->

    <h3>Three Fourths / One Fourth {h3}</h3>

    <div class="grid">

        <div class="three-fourths">

            <h4>Column One {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus.</p>

        </div><!-- /.three-fourths -->

        <div class="one-fourth">

            <h4>Column Two {h4}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit magnum. Vivamus magna. Cras in mi at felis aliquet congue.</p>

        </div><!-- /.one-fourth -->

    </div><!-- /.grid -->

</section>