CSS
Need help with mcgriddle?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
jonsuh

Description

A get-out-of-the-way Sass grid library. Supports flexbox.

126 Stars 5 Forks MIT License 125 Commits 1 Opened issues

Services available

Need anything else?

McGriddle

McGriddle is a get-out-of-your-way Sass library designed to help you build based a grid system. Suports flexbox (the grid is based on floats, by default). Set up your grid system…

$grid-width  : 64em;
$grid-gutter : 1.875em;
$grid-columns: 12;

…and you’re ready to build.

.container { @include container; }
.article   { @include columns(8); }
.sidebar   { @include columns(4, last); }

Installation

  1. Install via npm, yarn or Bower. ``` npm install mcgriddle

yarn add mcgriddle

bower install mcgriddle ```

Also available as a Ruby gem to use within your Rails application—see below for more information.

Or to manually install it, download and unzip the source files. Then copy the files from the

_sass/mcgriddle
directory into your project.
  1. Import the
    _mcgriddle.scss
    file in your Sass manifest file:
  @import "mcgriddle";

Install for Ruby on Rails

  1. Add McGriddle to your Gemfile.
  gem 'mcgriddle'
  1. Run
    bundle install
    .
  2. Include McGriddle by using Sass’s native
    @import
    *
  // application.scss
  @import "mcgriddle";

* More information on why Sass’s native

@import
+ why you should ditch Sprockets directives altogether.

Usage

First, create a settings file (

_mcgriddle-settings.scss
) and import it before importing McGriddle.
@import "mcgriddle-settings";
@import "mcgriddle";

Then edit the settings file to customize/override default grid settings. The following is a list of settings and its defaults:

$grid-width          : 64em;
$grid-gutter         : 1.875em;
$grid-columns        : 12;
$grid-minor          : 1/3;
$grid-collapse       : false;
$grid-rtl            : false;

$grid-flexbox : false; $grid-flexbox-wrap : wrap; $grid-flexbox-justify: flex-start;


Read the documentation for a full list and explanation of settings, mixins and functions.


Features:

  1. Containers
  2. Columns
  3. Collapse gutters
  4. Flexbox support
  5. Right-to-left support

container()

You’ll need a container to wrap the columns in.

.container {
  @include container;
}

// Container with no max width ($grid-width) .container--full { @include container(false); }

columns()

Then use

columns()
on an element to specify how many columns wide it should be.
.column {
  @include columns(8);
}

.column-decimal { @include columns(5.6); }

// Last column .column-last { @include columns(4, last); }

// Centered column .column-center { @include columns(8, center); }

// Relative columns .column-4-9 { @include columns(4 of 9); } .column-5-9 { @include columns(5 of 9, last); }

Nest columns by wrapping nested columns in a container.

Push an element however many columns with

shift()
.
// Shift a column over 2 columns
.column {
  @include columns(6);
  @include shift(2);
}

$grid-collapse

Collapse gutters:

$grid-collapse: true
. (Default is
false
)
$grid-collapse: true;
.container { @include container; }

$grid-flexbox

Flexbox support (as opposed to floats):

$grid-flexbox: true
. (Default is
false
)
$grid-flexbox: true;
.container { @include container; }

$grid-rtl

Right-to-left support for RTL languages:

$grid-rtl: true
. (Default is
false
)
$grid-rtl: true;
.container { @include container; }

Be sure to read the documentation for a full list of settings, mixins and functions.

That’s it?

The documentation is still a work-in-progress, so there are features and functionality that have yet to be properly documented. I also have a couple more features I’d like to build (when and if I decide to), but aside from that… yep, that’s it.

I originally created McGriddle for me—I wanted something stupid simple and straight forward. Therefore if you’re looking for something more robust, I’d suggest Bourbon Neat or Susy.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.