Nobody Preheats Microwaves

    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);

    Keywords

    Install

    npm i flexgrid.less

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    ISC

    Unpacked Size

    27.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • marverix