Responsive grid based on CSS Flexbox
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
scss
src
static
.gitignore
LICENSE
README.md
index.html
package.json

README.md

Flexit

Logo

Flexit is a lightweight CSS Grid based on Flexbox.

npm npm

Demo

Visit the demo page built entirely using Flexit.

Quick install

Flexit is in active development:

NPM

npm install flexitgrid

or

Yarn

yarn add flexitgrid

Import

After installation, you can import the CSS file into your project using this snippet:

import 'flexitgrid/dist/flexit.css'

Manual Method

You can download the CSS file from here and use it in your HTML as

<link rel="stylesheet" href="flexit.css">

Clean Syntax

Flexit has simple, human readable classes for naming rows and columns. The class names are intuitive while laying out a grid. For example to have 2 columns occupying 50% of the grid and one column occupying the remaining grid, the HTML would look like:

<div class="row">
    <div class="three columns">
        <p>Content</p>
    </div>
    <div class="three columns">
        <p>Content</p>
    </div>
    <div class="six columns">
        <p>Content</p>
    </div>
</div>

Copyright and license

Code copyright 2018 Karan Sharma. Code released under the MIT license.