Pure.css margins

Benchmark created by Mitchell on


Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

                <div class="pure-g pure-g-no-gutter">
            <div class="pure-u-1" id="banner">

                        <a href="/">
                                <img src="/images/friends_banner.png" width="990" height="128" class="pure-img" alt="Friends for the Public Library - Albuquerque Bernalillo New Mexico" title="Friends for the Public Library - Albuquerque Bernalillo New Mexico">
                        </a>
            </div>
                </div>
        
        
    <div id="container">

                        <div class="pure-g">
                <img src="/images/hp_image.jpg" id="hp-img" class="pure-img" width="990" height="180" alt="">
            </div>


            <div class="pure-g" id="hp-img-titles">
                <div class="pure-u-1-4">
                    <h2>Reading Program</h2>
                </div>

                <div class="pure-u-1-4">
                    <h2>AMP Concerts</h2>
                </div>

                <div class="pure-u-1-4">
                    <h2>Book Sale</h2>
                </div>

                <div class="pure-u-1-4">
                    <h2>Bookshop</h2>
                </div>
            </div>


            <div class="pure-g">

                <div class="pure-u-1 pure-u-md-1-4" id="column-navigation" data-hook="hook-column">

                        <!--ZOOMSTOP-->

                    <!-- Only display for md, lg, and xl widths -->
                    <div class="pure-menu pure-menu-open pure-hidden-xs pure-hidden-sm" data-hook="hook-nav-bar">

                        <ul>
                            <li><a href="/">Home</a></li>
                            <li><a href="/about">About</a></li>
                            <li><a href="/news">News</a></li>
                            <li><a href="/fund">What the Friends Fund</a></li>
                            <li><a href="/buy_books">Buy Books and More</a></li>
                            <li><a href="/donate_books">Donate Books and More</a></li>
                            <li><a href="/members">Become a Member</a></li>
                            <li><a href="/volunteer">Volunteer</a></li>
                            <li><a href="/archives">Archives</a></li>
                            <li><a href="/contact">Contact Us</a></li>
                        </ul>

                    </div>


                    <div id="nav-bar-sm" class="pure-menu pure-menu-open pure-hidden-md pure-hidden-lg pure-hidden-xl">

                        <a class="pure-menu-heading" data-hook="hook-nav-bar-heading" href="#">
                            <span class="arrow-down" data-hook="hook-nav-bar-arrow"></span>Menu
                        </a>

                        <ul data-hook="hook-nav-bar-toggle">
                            <li><a href="/">Home</a></li>
                            <li><a href="/about">About</a></li>
                            <li><a href="/news">News</a></li>
                            <li><a href="/fund">What the Friends Fund</a></li>
                            <li><a href="/buy_books">Buy Books and More</a></li>
                            <li><a href="/donate_books">Donate Books and More</a></li>
                            <li><a href="/members">Become a Member</a></li>
                            <li><a href="/volunteer">Volunteer</a></li>
                            <li><a href="/archives">Archives</a></li>
                            <li><a href="/contact">Contact Us</a></li>
                        </ul>

                    </div>

    <!--ZOOMSTART-->

                </div>


                <div class="pure-u-1 pure-u-md-1-2" id="column-main" data-hook="hook-column">

                    <p class="lead">Founded in 1969, the Friends for the Public Library is a nonprofit, 501(c)3 organization that supports the Albuquerque/Bernalillo County (ABC) Library System.
                    </p>

                    <p>Through the sale of donated books, DVDs and CDs some 55 volunteers and one part-time coordinator raise over $200,000 annually to support:
                    </p>

                    <ul>
                        <li>Annual citywide Summer Reading Program</li>
                        <li>AMP Concert Series at the branch libraries</li>
                        <li>Non-partisan advocacy for library bonds</li>
                        <li>Speaker Series at Special Collections Library </li>
                        <li>Staff development &amp; training</li>
                        <li>El Día de los Niños &amp; other community outreach programs</li>
                        <li>Adopt-a-Branch stipend for branch libraries</li>
                        <li>Other needs, such as the purchase of a Book Van </li>
                    </ul>

                    <p>In addition to the satisfaction of supporting the library and promoting literacy, members receive
                    </p>

                    <ul>
                        <li>Free admission to the first three hours of the monthly book sale </li>
                        <li>10% discount at the Friends Bookshop in the Main Library</li>
                    </ul>

                </div>


                <div class="pure-u-1 pure-u-md-1-4" id="column-right" data-hook="hook-column">

                    <h2>News/Events</h2>

                    <dl>
                        <dt>November Holiday Book Sale</dt>

                        <dd>
                        Saturday, November 9, 2014
                        <br>10:00 a.m.- 4:00 p.m.
                        <p class="read-more"><a href="#">Read more <span class="arrow">&rarr;</span></a></p>
                        </dd>

                        <dt>Semi-Annual $5-a-bag Clearance Sale</dt>

                        <dd>Sunday, November 10, Noon - 4:00 p.m.
                            <p class="read-more"><a href="#">Read more <span class="arrow">&rarr;</span></a></p>
                        </dd>
                    </dl>

                </div>
            </div>



    </div>

            <div id="footer" itemscope itemtype="http://schema.org/LocalBusiness">

        <div class="pure-menu pure-menu-open pure-menu-horizontal">

            <ul class="navbar">
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/news">News</a></li>
                <li><a href="/services">What the Friends Fund</a></li>
                <li><a href="/portfolio">Buy Books and More</a></li>
                <li><a href="/testimonials">Donate Books and More</a></li>
                <li><a href="/jobs">Become a Member</a></li>
                <li><a href="/faqs">Volunteer</a></li>
                <li><a href="/events">Archives</a></li>
                <li><a href="/contact">Contact Us</a></li>
            </ul>

        </div>


        <div class="pure-g">
            <div class="pure-u-1">

                <div id="company-name">
                    <span itemprop="name">Friends for the Public Library</span>
                </div>

                <div id="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                    <span id="street-address" itemprop="streetAddress">PO Box 26657</span><span id="city-state-zip"><span id="city" itemprop="addressLocality">Albuquerque</span><span id="comma">, </span><span id="state" itemprop="addressRegion">NM</span> <span id="zip" itemprop="postalCode">87125</span></span>
                </div>

                <div id="telephone" itemscope itemtype="http://schema.org/Organization">
                    <span class="hide-for-small" itemprop="telephone"><a href="tel:15052757680">505-275-7680</a></span>
                </div>

                <div id="services">List of services goes here.
                </div>

                <div id="copyright">Copyright &copy; 2014 Company Name
                </div>

                <div id="credit">
                    <a href="http://www.rubycreekdesign.com" class="no-bg-icon">Ruby Creek Design, Your Albuquerque Web Design Company</a>
                </div>

            </div>
        </div>

    </div>

Test runner

Ready to run.

Testing in
TestOps/sec
.pure-g > div > *
$('.pure-g > div > *').css('margin-left', '15px');
$('.pure-g > div > *').css('margin-right', '15px')
ready
.pure-g > div[class^="pure-u"] > *
$('.pure-g > div > p, ul, div').css('margin-left', '15px');
$('.pure-g > div > p, ul, div').css('margin-right', '15px')
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Mitchell on