gri
gridss
npm i gridss
gri

gridss

A CSS Grid microlib.

by Brian Gonzalez

4.0.0 (see all)License:MITTypeScript:Not Found
npm i gridss
Readme
gridss logo

npm

Description

gridss provides a mobile-first 12-column grid applied using object oriented css. It weights in at ~2kb.

Demo →

Installation & Usage

npm install --save gridss
<link rel="stylesheet" href="https://unpkg.com/gridss/grid.min.css">

Docs

The source code is quite explanatory, but here are the general classes you can apply:

Container

.gridss

Span Columns

.col-{1..12}
.col-s-{1...12}
.col-m-{1...12}
.col-l-{1...12}
.col-xl-{1...12}

Start-End Columns

.col-s-{1...12}-{1-12}
.col-m-{1...12}-{1-12}
.col-l-{1...12}-{1-12}
.col-xl-{1...12}-{1-12}

For example:

<div class="gridss">
  <div class="col-12 col-s-10 col-m-8 col-l-6 col-xl-4">
    12 columns mobile
    10 columns x-small and above
    8 columns medium and above
    6 columns large and above
    4 columns x-large and above
  </div>
</div>
<div class="gridss">
  <div class="col-1-8"></div>
  <div class="col-8-13"></div>
</div>

What do you mean by mobile first?

It means that the sized-based grid classes function on that size and larger.

mobile first grid (like gridss): col-l-6 applied to widths at or above "large"

non-mobile first grid: col-l-6 applied to width at or below "large"

License

MIT

Downloads/wk

2

GitHub Stars

16

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
4.0.0
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate