https://github.com/shankara-subramani/griddd

A dead simple, customisable, flexbox-based griddd
https://github.com/shankara-subramani/griddd

flexbox frontend grid grid-system scss

Last synced: 2 months ago
JSON representation

A dead simple, customisable, flexbox-based griddd

• Host: GitHub
• URL: https://github.com/shankara-subramani/griddd
• Owner: shankara-subramani
• License: mit
• Created: 2017-04-28T10:19:42.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-05-09T12:23:37.000Z (over 6 years ago)
• Last Synced: 2025-08-28T03:55:13.805Z (2 months ago)
• Topics: flexbox, frontend, grid, grid-system, scss
• Language: CSS
• Homepage: http://griddd.surge.sh/
• Size: 8.79 KB
• Stars: 110
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Griddd

A dead simple, customisable, flexbox-based [griddd](http://griddd.surge.sh/)  

[DEMO](https://codepen.io/guylyons/pen/WjWZRv)

## Installation

#### NPM

`npm install griddd`

#### CDN

`https://unpkg.com/griddd@1.0.3/dist/griddd.min.css`

## Getting started

#### Link the stylesheet

``

#### Simple Syntax

```html



  


    


    


  



```

It’s that simple.  


#### Customising - It’s all yours.

##### Slug

Don’t like the `is-` slug? I heard it boss. Loud and clear. You can change it [here](https://github.com/shankariyerr/griddd/blob/master/griddd.scss#L5) to whatever you want.

##### Number of Columns

Tired of `12 column` grids? Go ahead and insert the magic number [here](https://github.com/shankariyerr/griddd/blob/master/griddd.scss#L4)

#### Sites using Griddd

- Sindre Sorhus’s [Touch Bar Simulator](https://sindresorhus.com/touch-bar-simulator/)

- [Vookmark](https://vookmark.co/) ’s transactional pages

- [griddd](http://griddd.surge.sh/) :)

- Are you using gridd? [let me know](https://twitter.com/i_shankar)

#### Oh, am I missing something? the badges! here you go:

- [![forthebadge](http://forthebadge.com/images/badges/uses-css.svg)](http://forthebadge.com)

- [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)

- [![forthebadge](http://forthebadge.com/images/badges/for-you.svg)](http://forthebadge.com)

- [![forthebadge](http://forthebadge.com/images/badges/approved-by-george-costanza.svg)](http://forthebadge.com)