https://github.com/studio51/gridlecss

12 Columns flex-box Grid with SASS
https://github.com/studio51/gridlecss

Last synced: 7 days ago
JSON representation

12 Columns flex-box Grid with SASS

• Host: GitHub
• URL: https://github.com/studio51/gridlecss
• Owner: studio51
• License: mit
• Created: 2014-09-05T18:10:32.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-02-12T10:35:38.000Z (almost 7 years ago)
• Last Synced: 2024-10-10T17:29:57.443Z (about 1 month ago)
• Language: CSS
• Homepage:
• Size: 1.13 MB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.MD
  • License: LICENSE

Awesome Lists containing this project

README

        
## GridleCSS

http://studio51.github.io/gridlecss/

A flexible, responive CSS framework powered by the Flexbox Layout module and

SASS.

### Features

* 12 columns flex grid

* Responsive Grid

* Fluid Layout

* Layout Offsets

* Alignments

* Layout Distribution

* Flex Reverse

* Flex Reorder

* **Viewport specific rules**

### Customization

GridleCSS comes with a ocuple of customizable variables which will affect the

way your grid is compiled.

Increasing the number of columns: `$grid-columns: n !default;` 


Adding more breakpoints: `$grid-breakpoints: "xs" "sm" "md" "lg";` 


Adjusting the responsive breakpoints of the grid: `$grid-*-min: x;` 


Read `grid/config.scss` for more informations.

### Components

We're not sure wether or not it's worth spending time creating components when

there's so much out there already. 


Watch this space, we might change our mind.

### Installation

``` bash

$ git clone [email protected]:studio51/gridlecss.git

$ npm install

```

We use [Grunt.JS] as our Task Runner in order to compile the SASS files.

If you haven't used Grunt before, be sure to check out the Getting Started

guide, as it explains how to create a Gruntfile as well as install and use Grunt

plugins.

`$ grunt`

This is the default task which will `clean` the `dist` folder and `compile` the

SASS files.

`$ grunt ship`

If you make any changes to GridleCSS and whish to make a pull request or use it,

use this task which will `clean`, `compile`, and `prettify` the SASS files which

will give you `gridle.css`, `gridle.css.map` and `gridle.min.css`

### Open for pull requests

Before making any pull requests, make sure the Theme `web/` looks as it should

by using the `$ grunt` task inside the `web/` folder which will launch a preview

of the theme.

### License

MIT © [Studio51]

[Studio51]:http://creative-studio51.co.uk

[Grunt.JS]:http://gruntjs.com