Mobile app layout

Base css "components" for laying out mobile apps

by zerrax

HTML

<div class="header">
  <nav id='menu'>
   <input type='checkbox'/>
   <label>&#8801;<span>Navigation</span></label>
   <ul>
      <li><a href='/'>Home</a></li>
      <li><a href='#'>Menu 1</a></li>
      <li>
         <a class='prett' href='#'>Drop Menu</a>
         <ul class='menus'>
            <li><a href='#'>Drop Menu 1</a></li>
            <li><a href='#'>Drop Menu 2</a></li>
            <li><a href='#'>Drop Menu 3</a></li>
         </ul>
      </li>
      <li><a href='#'>Menu 2</a></li>
      <li>
         <a class='prett' href='#'>Drop Menu 1</a>
         <ul class='menus'>
            <li><a href='#'>Drop Menu 1</a></li>
            <li><a href='#'>Drop Menu 2</a></li>
            <li><a href='#'>Drop Menu 3</a></li>
         </ul>
      </li>
      <li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
   </ul>
</nav>
</div>
<div class="container scrollable-y">
    <div class="hgroup">
        <div class="column center"><h1>Corrélation entre vague 3 et 4</h1></div>
    </div>

    
    <div class="hgroup">
        <div class="column center"><img src="http://img.over-blog.com/500x333/3/64/72/79/vagues-imbriquees.jpg"></div><!-- 
        --><div class="column">
          <span class="banner">banner</span>
        </div>
    </div>
    
    <div class="hgroup">
        <div class="column">row 3 - col 1</div><!-- 
        --><div class="column">row 3 - col 2</div><!-- 
        --><div class="column">row 3 - col 3</div>
    </div>

    <div class="hgroup">
        <div class="column">row 4 - col 1</div><!-- 
        --><div class="column">row 4 - col 2</div><!-- 
        --><div class="column">row 4 - col 3</div><!-- 
        --><div class="column">row 4 - col 4</div>
    </div>

    <div class="hgroup">
        <div class="column">
         ...

CSS

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.header {

}
.footer {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    height:50px;
    border: #FFCC00 1px solid;
}
.container {

}
.hgroup, .vgroup {
    overflow: hidden;
}
.hgroup{
    border: #0000FF 1px solid;
}
.vgroup{
    border: #FF00FF 1px solid;
}

.column {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    border: #00FF00 1px solid;
}

/* 
-----------------------
    hgroup
-----------------------
*/
/* hgroup one column */
 .hgroup > .column:first-child:nth-last-child(1) {
    width: 100%;
}
/* hgroup two columns */
.hgroup > .column:first-child:nth-last-child(2), 
.hgroup > .column:first-child:nth-last-child(2) ~ .column {
    width: 50%;
}
/* hgroup three columns */
.hgroup > .column:first-child:nth-last-child(3), 
.hgroup > .column:first-child:nth-last-child(3) ~ .column {
    width: 33.3333%;
}
/* hgroup four columns */
.hgroup > .column:first-child:nth-last-child(4), 
.hgroup > .column:first-child:nth-last-child(4) ~ .column {
    width: 25%;
}

/* 
-----------------------
    vgroup
-----------------------
*/
/* vgroup one column */
 .vgroup > .column:first-child:nth-last-child(1) {
    width: 100%;
    height: 100%;
}
/* vgroup two columns */
.vgroup > .column:first-child:nth-last-child(2), 
.vgroup > .column:first-child:nth-last-child(2) ~ .column {
    width: 100%;
    height: 50%;
}
/* vgroup three columns */
.vgroup > .column:first-child:nth-last-child(3), 
.vgroup > .column:first-child:nth-last-child(3) ~ .column {
    width: 100%;
    height: 33.3333%;
}
/* vgroup four columns */
.vgroup > .column:first-child:nth-last-child(4), 
.vgroup > .column:first-child:nth-last-child(4) ~ .column {
    width: 100%;
    height: 25%;
}
.scrollable-x { overflow-x: auto; }
.scrollable-y { overflow-y: auto; }


#menu {
	background: #464646;
	color: #eee;
	height: 35px;
}

#menu ul,
#menu li {
	margin: 0;
	padding:...