A minimal CSS framework made with Flex.

gravatar
CSS 2/3, Flexy
Snippet by Anon
7730 0
Resources
<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>
 /*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;
 }

                        

{} CSS Resources


http://doodlenerd.com/Uploads/Resources/2018/08/UigGhohyxTg/css/flexy.css