Skip to content
This repository has been archived by the owner on Feb 20, 2022. It is now read-only.
/ flexgrid Public archive

flexbox-based grid system for older browsers

License

Notifications You must be signed in to change notification settings

marverix/flexgrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

flexgrid.less

flexbox-based grid system for older browsers.

demo

I don't think that it's production ready software yet. But feel free to test it and improve it! :) Use Issues tab to share your ideas etc!

Usage

npm install flexgrid.less

Import in project and use classes.

Classes

Name Example Description
fg fg Container
fg-w-X fg-w-1 Set width of child. Replace X with number.
fg-h-X fg-h-2 Set height of child. Replace X with number.

Examples

  1. Container with one child 5x4
<div class="fg">
  <div class="fg-w-5 fg-h-4"></div>
</div>
  1. Container with 4 even rows and 3 even columns (if used default grid is 16x9)
<div class="fg">
  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>

  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>

  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>
  <div class="fg-w-4 fg-h-3"></div>
</div>
  1. Please check out demo/index.html

Own grid

Main build is 16x9 grid. But you can create own grid!

Command line

  1. Clone repo
  2. Install dependencies (npm install)
  3. Run command:
npx lessc --modify-var='c=NUMBER OF COLUMNS' \
          --modify-var='r=NUMBER OF ROWS' \
          --modify-var='g=GAP SIZE' \
          src/fg.less dist/fg.css

E.g. Grid 4x3 with gap size 2px:

npx lessc --modify-var='c=4' \
          --modify-var='r=3' \
          --modify-var='g=2px' \
          src/fg.less dist/fg.css

Within LESS file

  1. Install
  2. Import in LESS:
@import 'flexgrid/flexgrid.less';
  1. Run mixin:
.flexgrid(@numberOfColumns, @numberOfRows, @gapSize);

E.g. Grid 4x3 with gap size 2px:

.flexgrid(4, 3, 2px);