flexgrid.less

0.1.0 • Public • Published

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 (npm install flexgrid)
  2. Import in LESS:
@import 'flexgrid/flexgrid.less';
  1. Run mixin:
.flexgrid(@numberOfColumns@numberOfRows@gapSize);

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

.flexgrid(432px);

Dependencies (0)

    Dev Dependencies (1)

    Package Sidebar

    Install

    npm i flexgrid.less

    Weekly Downloads

    0

    Version

    0.1.0

    License

    ISC

    Unpacked Size

    27.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • marverix