1.1.3 • Published 4 years ago

css-light-grid v1.1.3

Weekly downloads
7
License
MIT
Repository
github
Last release
4 years ago

CSS Light Grid

CSS Light Grid is a lightweight CSS grid module that helps you quickly build responsive websites without the hassle of learning the CSS Grid Framework. The grid is based on a 12 column layout.

(Remember that this is an Early release)

  • < 1.77 KB CSS file size
  • < 40 bytes after Gzip
  • Easy to remember class-names
  • Responsive by default (< 480px)
  • Based on CSS Grid (no floats, no flexbox, no negative margins..)

DEMO

Installation

With npm

npm i css-light-grid --save-dev

Implementation

Using with sass

Import the css module to your stylesheet or scss/sass partials

Node-sass / Node-bourbon
@import "~/css-light-grid.min.css";
Other
@import "../node_modules/css-light-grid/css-light-grid.min.css";
CDN

The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:

<link rel="stylesheet" href="https://unpkg.com/css-light-grid@1.1.3/css-light-grid.min.css" />
Locally

The built css is located in the root directory. It contains an minified version. You can either cut and paste that css or link to it directly in your html.

<link rel="stylesheet" href="path/to/module/css-light-grid.min.css">

Usage

CSS Grid works by using the container rather then it's children to create a grid, therefor we have to define a container as grid by applying the following class="grid" to the container HTML element.

Container Classes

ClassesBreakpointUsage
gridDefines Elem as Gridclass="grid"
mq-desktopBreakpoint < 1024pxclass="grid mq-desktop"
mq-tabletBreakpoint < 768pxclass="grid mq-tablet "

Gap Classes

ClassesGap sizeUsage
gap-xs10pxclass="grid gap-xs"
gap-s20pxclass="grid gap-s"
gap-md40pxclass="grid gap-md"
gap-l60pxclass="grid gap-l"
gap-xl80pxclass="grid gap-xl"

Column classes

ClassesColumn sizeUsage
col-11/12class="col-1"
col-22/12class="col-2"
col-33/12class="col-3"
col-44/12class="col-4"
col-55/12class="col-5"
col-66/12class="col-6"
col-77/12class="col-7"
col-88/12class="col-8"
col-99/12class="col-9"
col-1010/12class="col-10"
col-1111/12class="col-11"
col-1212/12class="col-12"

Examples

2 column layout

  <div class="grid gap-s">
    <div class="col-6">col-6 (50%)</div>
    <div class="col-6">col-6 (50%)</div>
  </div>

3 column layout

  <div class="grid gap-s">
    <div class="col-4">col-4 (33.33%)</div>
    <div class="col-4">col-4 (33.33%)</div>
    <div class="col-4">col-4 (33.33%)</div>
  </div>

mixed column layout + tablet breapoint

  <div class="grid gap-s mq-tablet">
    <div class="col-2">col-2</div>
    <div class="col-7">col-7</div>
    <div class="col-3">col-3</div>
  </div>

Author

License

MIT

1.1.1

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago