RubygemsResearch

Sha256: 33196fd11bca57562a485402fa6333677320bef7867d1ad96820fcdc4828a94d

Contents?: true

Size: 1.84 KB

Versions: 2

Compression:

Stored size: 1.84 KB

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Flex Box</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="stylesheets/compass-flex-box.css">
    </head>
    <body>
        <h1>FLEX BOX</h1>
        <h2>Common Layouts</h2>
        <h3>Horizontally &amp; Vertically Centered Box</h3>
        <p>Hover to change height & width</p>
        <div class="centered-box-container">
            <div class="centered-box">HOLY SHIT</div>
        </div>
        <h3>Nav</h3>
        <p>One item fills all remaining space</p>
        <div class="flex-nav">
            <div class="flex-nav-item">Home</div>
            <div class="flex-nav-item">Shop</div>
            <div class="flex-nav-item">Sports</div>
            <div class="flex-nav-item--search"><label><input type="search" placeholder="Search"></label></div>
            <div class="flex-nav-item">Help</div>
            <div class="flex-nav-item">Cart</div>
            <div class="flex-nav-item">Join</div>
        </div>
        <h3>Holy Grail</h3>
        <h4>Desktop</h4>
        <div class="holy-grail">
            <header>Header</header>
            <main class="holy-grail-body">
                <article>Main</article>
                <nav>Nav</nav>
                <aside>Sidebar</aside>
            </main>
            <footer>Footer</footer>
        </div>
        <h4>Mobile (Same Markup)</h4>
        <div class="holy-grail is-mobile">
            <header>Header</header>
            <main class="holy-grail-body">
                <article>Main</article>
                <nav>Nav</nav>
                <aside>Sidebar</aside>
            </main>
            <footer>Footer</footer>
        </div>
    </body>
</html>

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
compass-flex-box-0.3	templates/example/compass-flex-box.html
compass-flex-box-0.2	templates/example/compass-flex-box.html