All Projects → erwstout → ginger

erwstout / ginger

Licence: MIT license
A minimal flexbox grid system named after a cute dog.

Programming Languages

SCSS
7915 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to ginger

grid-garden
Solutions to CSS Grid Garden
Stars: ✭ 79 (+154.84%)
Mutual labels:  grid-layout, grid-system
flex-box-grid
Responsive, mobile first Flexbox Grid
Stars: ✭ 39 (+25.81%)
Mutual labels:  grid-layout, flexbox-grid
Grassy
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
Stars: ✭ 335 (+980.65%)
Mutual labels:  grid-layout, grid-system
Cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Stars: ✭ 3,943 (+12619.35%)
Mutual labels:  grid-layout, grid-system
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (+109.68%)
Mutual labels:  grid-layout, grid-system
zeus
A novel mobile first flexbox BEM css grid.
Stars: ✭ 14 (-54.84%)
Mutual labels:  grid-layout, flexbox-grid
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+13864.52%)
Mutual labels:  grid-layout, grid-system
Pintsize
Customisable 💪 Flexbox grid system
Stars: ✭ 330 (+964.52%)
Mutual labels:  flexbox-grid, grid-system
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (+183.87%)
Mutual labels:  grid-layout, grid-system
Gaintime
GainTime é um framework de HTML, CSS e JS para desenvolvimento de projetos responsivos, focado na simplicidade.
Stars: ✭ 19 (-38.71%)
Mutual labels:  grid-layout, grid-system
Dragact
a dragger layout system with React style .
Stars: ✭ 710 (+2190.32%)
Mutual labels:  grid-layout, grid-system
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (+458.06%)
Mutual labels:  grid-layout, grid-system
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (+406.45%)
Mutual labels:  grid-layout, grid-system
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-38.71%)
Mutual labels:  grid-layout, grid-system
React Css Grid
React layout component based on CSS Grid Layout and built with styled-components
Stars: ✭ 239 (+670.97%)
Mutual labels:  grid-layout
powergrid
Powerful grid system with CSS grid layout. Works in all modern browsers and IE11.
Stars: ✭ 18 (-41.94%)
Mutual labels:  grid-layout
Magic Grid
A simple, lightweight Javascript library for dynamic grid layouts.
Stars: ✭ 2,827 (+9019.35%)
Mutual labels:  grid-layout
Spacegrid
A no-frills responsive grid layout to help you get started on your next project.
Stars: ✭ 202 (+551.61%)
Mutual labels:  grid-layout
gridbugs-ru
Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю
Stars: ✭ 27 (-12.9%)
Mutual labels:  grid-layout
Grd
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
Stars: ✭ 2,210 (+7029.03%)
Mutual labels:  grid-layout

Ginger

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 gingergrid.com.

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].