[Deprecated] Turn elements on your site into a responsive unified grid.
CoffeeScript JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
bower.json
gulpfile.js
package.json
readme.md

readme.md

[Deprecated] basicFit

Turn elements on your site into a responsive unified grid.

Context Screenshot

Installation

bower install basicFit

Requirements

basicFit requires jQuery >= 2.1.0

How to use

1. Include the files

<script async type="text/javascript" src="bower_components/jQuery/dist/jquery.min.js"></script>
<script async type="text/javascript" src="bower_components/basicFit/dist/basicFit.min.js"></script>

2. Build a simple structure

<div id="content">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

3. Set a margin and max-min-width

#content {
    display: inline-block;
    margin: 0 0 20px 0;
}
.element {
    float: left;
    margin: 20px 0 0 20px;
    min-width: 300px;
    max-width: 500px;
    background-color: #000;
}

4. Initialize basicFit

basicFit.init '#content', '.element'

5. Refresh after adding a new element

$('#content').append element
basicFit.refresh()