A minimal CSS framework made with Flex.

gravatar
CSS 2/3, Flexy
Snippet by Anon
136 0
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