jeroenoomsNL / The Flex Grid
Licence: mit
The Flex Grid is a responsive CSS flexbox grid. Because we can!
Stars: ✭ 45
Projects that are alternatives of or similar to The Flex Grid
Frow
Flexbox Toolkit & Grid
Stars: ✭ 152 (+237.78%)
Mutual labels: css-framework, flexbox-grid, flexbox, css-grid
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (+148.89%)
Mutual labels: css-framework, flexbox-grid, flexbox, css-grid
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (+26.67%)
Mutual labels: flexbox, css-framework, css-grid, flexbox-grid
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+1237.78%)
Mutual labels: flexbox-grid, flexbox, css-grid
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (+242.22%)
Mutual labels: css-framework, flexbox-grid, flexbox
tetris-grid
◼️Lightweight and simple CSS grid
Stars: ✭ 16 (-64.44%)
Mutual labels: flexbox, css-grid, flexbox-grid
Vue Flexboxgrid
Vue components made with Flexboxgrid
Stars: ✭ 37 (-17.78%)
Mutual labels: flexbox-grid, flexbox, css-grid
40-lines-of-Sass
Full featured flexbox grid in 40 lines of Sass
Stars: ✭ 20 (-55.56%)
Mutual labels: flexbox, css-grid, flexbox-grid
Must Watch Css
A useful list of must-watch talks about CSS
Stars: ✭ 3,966 (+8713.33%)
Mutual labels: css-framework, flexbox, css-grid
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+1491.11%)
Mutual labels: css-framework, flexbox, css-grid
milligram-stylus
A minimalist CSS framework on Stylus version.
Stars: ✭ 19 (-57.78%)
Mutual labels: flexbox, css-framework
aioneframework
Aione Framework: All-in-one lightweight mobile first front-end framework to design websites, web applications, mobile applications, progressive web applications having large number of examples, documentation, tutorials, community support, components.
Stars: ✭ 13 (-71.11%)
Mutual labels: css-framework, css-grid
skelet
Skelet.css a contemporary CSS framework. The basics to get started.
Stars: ✭ 69 (+53.33%)
Mutual labels: flexbox, css-framework
Atgrid.css
CSS Grid System with attribute selectors
Stars: ✭ 37 (-17.78%)
Mutual labels: flexbox-grid, flexbox
unitscss
UNITS is a simple and beautiful CSS component set.
Stars: ✭ 13 (-71.11%)
Mutual labels: css-framework, css-grid
tailwind-bootstrap-grid
Tailwind CSS plugin that generates Bootstrap's flexbox grid
Stars: ✭ 96 (+113.33%)
Mutual labels: flexbox, flexbox-grid
dash-flexbox-grid
Wrapper around react-flexbox-grid for Plotly Dash
Stars: ✭ 19 (-57.78%)
Mutual labels: css-grid, flexbox-grid
zeus
A novel mobile first flexbox BEM css grid.
Stars: ✭ 14 (-68.89%)
Mutual labels: flexbox, flexbox-grid
Front End Frameworks
A collection of best front-end frameworks for faster and easier web development.
Stars: ✭ 2,786 (+6091.11%)
Mutual labels: css-framework, css-grid
Bulma Helpers
Library with missing Functional / Atomic CSS classes for Bulma framework
Stars: ✭ 263 (+484.44%)
Mutual labels: css-framework, flexbox
The Flex Grid
The Flex Grid is a lightweight 12 columns grid, build with CSS3 feature flexbox. The grid is made for modern browsers, no support for dinosaurs. The max-width of the grid and the width of the gutter are easily customizable by the globals in the SASS file.
Vendor prefixes are added for the last 2 versions of the most used webbrowers using autoprefixer. This can be changed in gulpfile.js
http://jeroenoomsnl.github.io/the-flex-grid
Install
npm install the-flex-grid
bower install the-flex-grid
Fluid flexbox grid
<div class="grid">
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-9"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
Responsive flexbox grid
<div class="grid">
<div class="row">
<div class="col-large-12 col-medium-6"></div>
</div>
<div class="row">
<div class="col-large-3 col-medium-6 col-small-12"></div>
<div class="col-large-9 col-medium-9 col-small-12"></div>
</div>
<div class="row">
<div class="col-large-4"></div>
<div class="col-large-8"></div>
</div>
<div class="row">
<div class="col-large-6"></div>
<div class="col-large-6"></div>
</div>
</div>
More features
See the demo page for all the other features like reverse order and alignment.
Usage of this source
After cloning the repository:
npm install
Build the project:
gulp
Watch and auto refresh while editing:
gulp watch
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].