HTML
<div class="main"> <div class="dp100"> <h1>Flexy CSS Framework</h1> </div> <div class="dp100">Flexy is minimal CSS framework made with Flex Layout</h1> </div> <div class="dp33">Lightweight - 0.33 Kb</div> <div class="dp33">Fluid</div> <div class="dp33">Responsive</div> <div class="clear"></div> <div class="dp33">Customizable Main Width</div> <div class="dp33">Customizable Gutter</div> <div class="dp33">Nested Columns</div> <div class="clear"></div> <div class="dp100">100%</div> <div class="dp50">50%</div> <div class="dp50">50%</div> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="clear"></div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="clear"></div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="fluid">Fluid</div> <div class="dp12">12,5%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="fluid">Fluid</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="fluid">Fluid</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="dp17">17%</div> <div class="clear"></div> </div>
CSS
/*For Demo Purpose Only*/
.dp10,
.dp12,
.dp17,
.dp20,
.dp25,
.dp33,
.dp40,
.dp50,
.dp60,
.dp67,
.dp75,
.dp80,
.dp83,
.dp100,
.fluid {
border: 1px solid #e56e6e;
color: #1577ca;
padding: 10px;
margin: 10px 0 10px 15px;
text-align: center;
}
.fluid {
background-color: #1577ca;
color: #fff;
}
{ } JS
Preview