fraction-grid's Introduction

fraction-grid

A more semantic, back-end developer friendly grid leading with the idea that layout and style should read separately.

###Install using npm

npm install fraction-grid

###The basic elements

<box>                           // Container
    <row>                       // Wrapper
        <unit>Unit 1</unit>     // Content
    </row>
</box>

###The basic grid

<box>
    <row>
        <unit take="3/5">Unit 1</unit>
        <unit take="1/5">Unit 2</unit>
        <unit take="1/5">Unit 3</unit>
    </row>
</box>

###Make it responsive

<box>
    <row>
        <unit take="3/5" sm-take="1/1" md-take="1/3">Unit 1</unit>
        <unit take="1/5" sm-take="1/1" md-take="1/3">Unit 2</unit>
        <unit take="1/5" sm-take="1/1" md-take="1/3">Unit 3</unit>
    </row>
</box>

###Add some spacing

<box>
    <row push-all="20">
        <unit>Unit 1</unit>
        <unit>Unit 2</unit>
        <unit>Unit 3</unit>
    </row>
</box>
<box>
    <row push-top="20">
        <unit>Unit 1</unit>
        <unit>Unit 2</unit>
        <unit>Unit 3</unit>
    </row>
</box>
<box>
    <row push-bottom="20">
        <unit>Unit 1</unit>
        <unit>Unit 2</unit>
        <unit>Unit 3</unit>
    </row>
</box>
<box>
    <row push-left="20">
        <unit>Unit 1</unit>
        <unit>Unit 2</unit>
        <unit>Unit 3</unit>
    </row>
</box>
<box>
    <row push-right="20">
        <unit>Unit 1</unit>
        <unit>Unit 2</unit>
        <unit>Unit 3</unit>
    </row>
</box>

###Use it as a tag or an attribute

<!-- Tag -->
<box>
    <row>
        <unit>Unit 1</unit>
        <unit>Unit 2</unit>
        <unit>Unit 3</unit>
    </row>
</box>

<!-- Attribute -->
<div box>
    <div row>
        <div unit>Unit 1</div>
        <div unit>Unit 2</div>
        <div unit>Unit 3</div>
    </div>
</div>

###Control the total width of the container and center it

<!-- Tag -->
<box>
    <row lg-max-stretch="3/4">
        <unit>Unit 1</unit>
        <unit>Unit 2</unit>
        <unit>Unit 3</unit>
    </row>
</box>

Recommend Projects