alpha-grid v1.5.0

🧱 αGrid - Light CSS Grid system

The entire agrid.min.css package is ~ 19.0 kB (2.1 kB gzip), but if use only the base grid-systems without the order, offset and gap you will have a bundle of ~ 9.4 kB (1.0 kB gzip).

📌 Examples - alpha-grid.netlify.app

alphaGrid is a tool for implementing 12 Column Grid layouts. Very simple. Mostly configurable. CSS & SCSS. Based on CSS Grid (93.53% support) and it's pretty much an "inspired" clone of Bootstrap's own grid layout.

• 🧱 αGrid - Light CSS Grid system
  • Getting started
    • NPM
    • CDN
  • Bundles
  • Why

Getting started

NPM

• Install package

yarn add alpha-grid
OR 
npm i alpha-grid

• Add the full agrid module (CSS or SCSS) to your project

CSS Minified
@import url("alpha-grid/dist/agrid.min.css")

SCSS
@use "alpha-grid/dist/scss/agrid.scss";

• OR add only the bundle you need (more about the different bundles bellow) - again supports both CSS and SCSS files

SCSS
@use "alpha-grid/dist/scss/agrid-order.scss";

CDN

Load the agrid.css file in your project

<link rel="stylesheet" href="https://unpkg.com/alpha-grid@1.4.0/dist/agrid.min.css" />

OR

@import url('https://unpkg.com/alpha-grid@1.4.0/dist/agrid.min.css');

Bundles

You can decide on which features you need and import only them:

• agrid.css/scss - all utility classes
• agrid-base.css/scss - only the columns + responsive prefixes
• agrid-offset.css/scss - columns + offset + responsive prefixes
• agrid-order.css/scss - columns + order + responsive prefixes

Why

After couple of discussion about using 12-col-grid system in an internal work project I started thinking about creating my own grid system for personal projects and also to play around a little bit more with grid and SASS' mixins. This is probably not worthy of your time, but I had really fun time searching around @each, @mixin, etc. and hopefully will use the system soon.