Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Responsive grid based on CSS Flexbox

Topics

Resources

License

Releases

No releases published

Packages

No packages published