Agrid's entire CSS bundle is ~ 19.0 kB (2.1 kB gzip), but the core grid-systems is ~ 9.4 kB (1.0 kB gzip).
📌 Documentation and 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 (96.3% support) and it's pretty much a thinkered version of Bootstrap's 12-Column-Grid system.
- 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";
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');
You can decide on which features you need and import only them:
agrid.css/scss- all utility classesagrid-base.css/scss- only thecolumns+ responsive prefixesagrid-offset.css/scss-columns+offset+ responsive prefixesagrid-order.css/scss-columns+order+ responsive prefixes
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.