Mobile app layout

Base css "components" for laying out mobile apps

by zerrax

HTML

<div class="header">BitMex Agents</div>
<div class="container scrollable-y">
 
   

    <div class="hgroup">
        <div class="column">Active : true</div><!-- 
        --><div class="column">Sound : true</div>
    </div>

    <div class="vgroup" style="height: calc(100vh - 140px);    overflow-y: scroll;">
        <div class="column cls">row 7 - col 1</div><!-- 
        --><div class="column cls">row 8 - col 1</div><!-- 
        --><div class="column cls">row 9 - col 1</div><!-- 
        --><div class="column">
        </div>
    </div>
     <div class="hgroup">
                <div class="column">French</div><!--
                --><div class="column">English</div>
                <div class="column">Buy</div>
                <div class="column" style="display:none;">English</div>
            </div>
</div>

CSS

html {
    box-sizing: border-box;
    background:#0D2542;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.header {
    position: absolute;
    left:0;
    right:0;
    top:0;
    height:50px;
    //border: #FFCC00 8px solid;
    text-align:center;
    line-height:45px;
    font-size:22px;
    color:#fff;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#851aa5+0,571790+72,0d2542+100 */
background: #851aa5; /* Old browsers */
background: -moz-linear-gradient(top, #851aa5 0%, #571790 72%, #0d2542 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #851aa5 0%,#571790 72%,#0d2542 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #851aa5 0%,#571790 72%,#0d2542 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#851aa5', endColorstr='#0d2542',GradientType=0 ); /* IE6-9 */
}
.footer {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    height:50px;
    border: #FFCC00 8px solid;
}
.container {
    position: absolute;
    left:0;
    right:0;
    top:50px;
    bottom:0px;
  //  border: #FF0000 8px solid;
}
.hgroup, .vgroup {
    overflow: hidden;
}
.hgroup{
   // border: #0000FF 8px solid;
   text-align:center;
}
.vgroup{
  //  border: #FF00FF 8px solid;
   padding: 20px;
   border-top: #999 2px solid;
   border-bottom: #999 2px solid;
   
}
//.vgroup > div:first-child{
//  text-align:center;
//  font-size:16px;
//  color: #fff;
//}
.column {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
 //   border: #00FF00 8px solid;
     width: 100%;
     padding:  10px 5px; 
     margin:  3px 0; 
     color:#fff;
}
.cls{
  background: #333;
  color: #fff;
  font-size: 18px;
}

  
}
/* 
-----------------------
    hgroup
-----------------------
*/
/* hgroup one column */
 .hgroup > .column:first-child:nth-last-child(1) {
    width: 100%;
}
/* hgroup two columns */
.hgroup >...