Documentation

Grids
one
one
one
one
one
one
one
one
one
one
one
one
two
two
two
two
two
two
three
three
three
three
four
four
four
six
six
twelve
Codes

How to get started

To get started you need to have a bag class to wrap all your content in one pack. Then it is followed by a chain class which creates a nice row and clearing strategy. Then you just have to add your amount of pockets you want to have.

Always remember to start a new chain when you finished a row i.e.. when you have completed a twelve pockets row.

<body>
    <div class="bag">
        <div class="chain">
            <div class="twelve pockets">
                .......
            </div>
        </div>
    </div>
</body>

<div class="bag">
    <div class="chain">
        <div class="four pockets"></div>
        <div class="eight pockets"></div>
    </div>
    <div class="chain">
        <div class="five pockets"></div>
        <div class="seven pockets"></div>
    </div>
</div>
    

Have multiple pockets

If you have multiple pockets, then just make sure the total is twelve pockets i.e.. the total pockets in a chain is twelve. like I have four and eight in the first chain and five and seven in the second chain which totals twelve.


Buttons

BackPack now comes with some integrated buttons which you can use to enhance your designs.

With a large variety of buttons you can choose which colour do you want for your button. The present colors present are white(default), black, grey, orange, red, blue and green. Not only this, you can now adjust the size also... like small, medium or cover(i.e.. its width is equal to the parent width) and also you can increase the curve of the button too with the help of .rounded class.

<a class="button"></a>
<a class="button black"></a>
<a class="button grey"></a>
<a class="button orange"></a>
<a class="button red"></a>
<a class="button blue"></a>
<a class="button green"></a>
<a class="button cover"></a>
<a class="button rounded"></a>
<a class="button small"></a>
<a class="button medium"></a>

<div class="chain">
    <div class="twelve pockets">
        <h1 class="text-center">This is a centered text</h1>
    </div>   
</div>     
<div class="chain">
    <div class="twelve pockets">
        <div class="float-left"> This is a div which is floated left </div>
        <div class="float-right"> This is a div which is floated right </div>
    </div>
</div>
<div class="chain">
    <div class="center">
        // This is a box or container which is centered
    </div>
</div>

Common styles

Many of us use some common styles such as for aligning the text center, making a div to float left or right. BackPack comes with built in styles for that.

Like for aligning the text center just add a class of text-center, for floating a element right use float-right class, for floating the element left use float-left class, and many more...

With the center class you can center any element but make sure you define a fixed width to that element.

Additives

Upcoming elements ...

Backpack is just started. Many more elements and properties are yet to come like the tooltips, tabs, accordion and many more. But BackPack ensures that all the things, elements, properties and styles were, are and will be in pure CSS.

Updating your BackPack ...

To update your BackPack yo only need to first download the files and replace the custom.css with your css and copying all your files in the relative path...!!

Stay connected with me