https://github.com/mr-karan/flexit

Responsive grid based on CSS Flexbox
https://github.com/mr-karan/flexit

css flexbox flexbox-grid responsive

Last synced: 4 months ago
JSON representation

Responsive grid based on CSS Flexbox

• Host: GitHub
• URL: https://github.com/mr-karan/flexit
• Owner: mr-karan
• License: mit
• Created: 2018-07-05T08:48:56.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-11-22T03:44:07.000Z (over 3 years ago)
• Last Synced: 2024-09-19T00:00:03.785Z (5 months ago)
• Topics: css, flexbox, flexbox-grid, responsive
• Language: HTML
• Homepage:
• Size: 357 KB
• Stars: 45
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [Flexit](https://mrkaran.com/flexit/)

![Logo](static/images/logo.png "Flexit")

Flexit is a **lightweight CSS Grid** based on [Flexbox](https://www.w3.org/TR/css-flexbox-1/#intro).

[![npm](https://img.shields.io/npm/v/flexitgrid.svg)][npm-link]

[![npm](https://img.shields.io/npm/dm/flexitgrid.svg)][npm-link]

## Demo

[Visit](https://mr-karan.github.io/flexit/) the demo page built entirely using Flexit.

## Quick install

Flexit is in active development:

### NPM

```sh

npm install flexitgrid

```

**or**

### Yarn

```sh

yarn add flexitgrid

```

### Import

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

```sh

import 'flexitgrid/dist/flexit.css'

```

### Manual Method

You can download the CSS file from [here](https://github.com/mr-karan/flexit/blob/master/dist/flexit.css) and use it in your HTML as

```html

```

## 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:

```html



    


        
Content

    

    


        
Content

    

    


        
Content

    



```


## Copyright and license

Code copyright 2018 Karan Sharma. Code released under [the MIT license](https://github.com/mr-karan/flexit/blob/master/LICENSE).

[npm-link]: https://www.npmjs.com/package/flexitgrid