Awesome Open Source
Awesome Open Source


Ginger Logo

npm npm bundle size npm GitHub stars

Ginger is a minimal flexbox 12 column grid system named after a cute dog. It doesn't give you any fancy extras like some other frameworks, but what it does give you is a solid lightweight grid system to make developing and designing your next site easy and quick.

Installing Ginger

There are two ways to install Ginger.

Note: as of August 2020, bower is no longer supported

  1. Clone the repository or download the files to your project
  2. Install via npm/yarn using npm install ginger-grid --save or yarn add ginger-grid

When setting up the scss file for your project be sure to include the Ginger settings file before importing ginger.scss. An example scss file may look like this:

// Include Ginger
@import "ginger/settings";
@import "ginger/ginger";

It's important to note that you may get a compile error if you're not including the path to Ginger when compiling your styles.

You can view all the documentation at

Issues / Bugs / Contributions

If you have feedback, find a bug, or want to make contributions, please don't hesitate to open an issue or make a pull request.

Special thanks to Allison Perlis for the rad Ginger logo!

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Css (217,004
Framework (6,773
Grid Layout (351
Grid System (147
Related Projects