devlint / Gridlex
Licence: mit
Just a CSS Flexbox Grid System
Stars: ✭ 1,328
Projects that are alternatives of or similar to Gridlex
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (-88.4%)
Mutual labels: grid, flexbox-grid, scss, sass
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (-95.71%)
Mutual labels: grid, css3, css-grid, flexbox-grid
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (-46.08%)
Mutual labels: scss, sass, css3, css-grid
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (-54.67%)
Mutual labels: flexbox-grid, scss, sass, css-grid
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (-81.25%)
Mutual labels: scss, sass, css3
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (-88.33%)
Mutual labels: flexbox-grid, scss, sass
Baseguide
Lightweight and robust CSS framework for prototyping and production code.
Stars: ✭ 127 (-90.44%)
Mutual labels: grid, scss, sass
Iota
A responsive micro-framework for the grid spec powered by CSS custom properties.
Stars: ✭ 189 (-85.77%)
Mutual labels: grid, scss, sass
Neat
Neat is maintained by the thoughtbot design team. It is funded by
thoughtbot, inc. and the names and logos for thoughtbot are
trademarks of thoughtbot, inc.
Stars: ✭ 4,506 (+239.31%)
Mutual labels: grid, scss, sass
Plate
Plate: a super stripped-down WordPress starter theme for developers.
Stars: ✭ 110 (-91.72%)
Mutual labels: scss, sass, css-grid
Blueprint Css
📘 Blueprint CSS is a modern responsive CSS layout library & grid built on top of CSS Grid and Flexbox.
Stars: ✭ 233 (-82.45%)
Mutual labels: grid, scss, css-grid
tetris-grid
◼️Lightweight and simple CSS grid
Stars: ✭ 16 (-98.8%)
Mutual labels: grid, css-grid, flexbox-grid
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (-45.11%)
Mutual labels: scss, sass, css3
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-97.36%)
Mutual labels: scss, sass, css3
Bourbon
Bourbon is maintained by the thoughtbot design team. It is funded
by thoughtbot, inc. and the names and logos for thoughtbot are
trademarks of thoughtbot, inc.
Stars: ✭ 9,065 (+582.61%)
Mutual labels: scss, sass
Sing App
💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥
Stars: ✭ 1,187 (-10.62%)
Mutual labels: scss, sass
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+604.07%)
Mutual labels: scss, sass
Gridlex
Just a Flexbox Grid System
v. 2.7.1
Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.
The concept is simple: you need to wrap your .col in a .grid.
What can we expect?
- Basically each column is the same width as every other cell in the grid.
- But you can add sizing classes to individual columns.
- For responsive designs, you can add classes based on media-queries.
- Top, bottom, or middle. For the grid. And for the columns.
- Grids can be nested. Always. Directly in a column.
Sass, CSS?
I just wanna use it in my page!
To use Gridlex out of the box, call the gridlex.min.css file in your project :
Via CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">
or
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridlex.min.css" integrity="sha256-z8OrWCce0gDjwavCHKqxiPIo74u8go25fRiqW6jefXk=" crossorigin="anonymous">
I want to include it in my source files!
Just include gridlex/src/gridlex.scss and update the $gl- vars:
| Variable names | Default value |
|---|---|
$gl-colCount: |
12 |
$gl-gridName: |
grid |
$gl-colName: |
col |
$gl-attributeName: |
class |
$gl-gutter: |
1rem |
$gl-gutter-vertical: |
1rem |
$gl-mq-width: |
'max-width' |
$gl-mq-list: |
|
Install via Npm
npm install gridlex --save
Install via Bower
bower install gridlex --save
3 ways to use Gridlex
1- The basic. Just add a class .grid-* (from -1 to -12)
<div class="grid-1">
<div class="col">...</div>
</div>
2- The precise. Compose cell by cell (with class like .col-*)
<div class="grid">
<div class="col-12">...</div>
</div>
3- The automatic. Just add number of cells you want in the grid (.grid > .col)
<div class="grid">
<div class="col">...</div>
<div class="col">...</div>
</div>
Gridlex and media-queries
Because of responsive, you sometimes need to change the size of columns: with this keys as classes you can control your layout by media-queries.
Columns can be hidden at breakpoints using _*-0 (e.g. col-4_md-6_sm-0)
| CSS Media Query | Applies | Usage |
|---|---|---|
@media screen and (max-width: 36rem) |
Max 576px | _xs-* |
@media screen and (max-width: 48em) |
Max 768px | _sm-* |
@media screen and (max-width: 64em) |
Max 1024px | _md-* |
@media screen and (max-width: 80em) |
Max 1280px | _lg-* |
See more : http://gridlex.devlint.fr
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].