<!DOCTYPE html> <html class=“debug”>
<head> <title>Grid - IRFS Components</title> <link rel="stylesheet" href="../../bower_components/normalize-css/normalize.css"> <link rel="stylesheet" href="grid.css"> <style> body { margin: 0; padding: 0; } header { display: block; height: 33px; line-height: 33px; } .logo { display: inline-block; vertical-align: top; } .logo:before { content: " "; display: inline-block; width: 74px; height: 21px; vertical-align: middle; background-color: #000; } header .group { display: none; margin: 0; line-height: 33px; } header > .logo { display: inline-block !important; } /* Group 1 */ @media (max-width: 399px) { header .group-1 { display: inline-block; } } /* Group 2 */ @media (min-width: 400px) and (max-width: 599px) { header .group-2 { display: inline-block; } } /* Group 3 */ @media (min-width: 600px) and (max-width: 1007px) { header .group-3 { display: inline-block; } } /* Group 4b - flexible */ @media (min-width: 1008px) and (max-width: 1280px) { header .group-4 { display: inline-block; } } /* Group 4a - fixed */ @media (min-width: 1281px) { header .group-5 { display: inline-block; } } </style> </head> <body> <div class="grid"> <div class="grid-row"> <header class="grid-col grid-12"> <span class="logo"></span> <h2 class="group group-1">Group 1</h2> <h2 class="group group-2">Group 2</h2> <h2 class="group group-3">Group 3</h2> <h2 class="group group-4">Group 4 (fluid)</h2> <h2 class="group group-5">Group 5 (fixed)</h2> </header> </div><!-- .grid-row --> </div><!-- .grid --> <h2>Normal grid</h2> <div class="grid"> <div class="grid-row"> <div class="grid-col grid-12"> <span>12</span> </div> </div><!-- .grid-row --> <div class="grid-row"> <div class="grid-col grid-6"> <span>6</span> </div> <div class="grid-col grid-6"> <span>6</span> </div> </div><!-- .grid-row --> <div class="grid-row"> <div class="grid-col grid-1"><span>1</span></div> <div class="grid-col grid-1"><span>1</span></div> <div class="grid-col grid-1"><span>1</span></div> <div class="grid-col grid-1"><span>1</span></div> <div class="grid-col grid-1"><span>1</span></div> <div class="grid-col grid-1"><span>1</span></div> <div class="grid-col grid-2"><span>2</span></div> <div class="grid-col grid-2"><span>2</span></div> <div class="grid-col grid-2"><span>2</span></div> </div><!-- .grid-row --> </div><!-- .grid --> <h2>Grid with bleed</h2> <div class="grid grid-bleed"> <div class="grid-row"> <div class="grid-col grid-12"> <span>12</span> </div> </div><!-- .grid-row --> <div class="grid-row"> <div class="grid-col grid-6"> <span>6</span> </div> <div class="grid-col grid-6"> <span>6</span> </div> </div><!-- .grid-row --> </div><!-- .grid --> </body>
</html>