Bubbly-grid-sass NPM

Bubbly Grid System

Warning
this project is no longer maintained, you may wanna try the PostCSS version?

This is not another 12-column grid system, this is an up-to-you-column grid system.

This is also not an HTML grid system, meaning you're gonna be able to keep your markup clean and tidy.

Made with calc() and Flexbox, so it will support the latest versions of Chrome, Firefox, Safari, Opera (not opera mini) & IE 11+.

Wanna see some nicer doc?

Wanna see some demos?

npm

Installation

npm install bubbly-grid-sass

Usage

:arrow_up: back to top

How to import it :

// index.scss

@import '~bubbly-grid-sass/bubbly-grid/index.scss';

@import 'partials/foo';
@import 'partials/baz';

Sym Grid (symmetrical only)

Let me introduce you to the mixin :

@include sym-grid(4, 20px)

Behind the scenes :

@mixin sym-grid($col: 1, $gutter: 10px, $stretch: false)

Make sure the parent container is set to display flex :

.container {
  display: flex;
}

.item {
  @include sym-grid(whatever)
}

$col

:arrow_up: back to top

number of columns per row
default value is 1

.container {
  display: flex;
}

.item {
  @include sym-grid(4, 20px)
}

You'll get 4 columns per row
and a gutter of 20px between each column

The HTML :

<div class="container">
  <div class="item">
    item 01
  </div>
  ...
  <div class="item">
    item 08
  </div>
</div>

col

$gutter

:arrow_up: back to top

width of the gutter (values can be in 'px', 'em', 'rem' or '%')
default value is 10px

.item {
  @include sym-grid(3, 2em);
}

You'll get 3 columns per row
You'll get a gutter of 2em between each column

gutter

$stretch

:arrow_up: back to top

default value is false
Use it when you want the last item in the row to take the full width of the remaining space :

.item {
  @include sym-grid(3, 2em, $stretch: true);
}

The HTML :

<div class="container">
  <div class="item">
    item 01
  </div>
  ...
  <div class="item">
    item 05
  </div>
</div>

stretch

media-queries

:arrow_up: back to top

Media queries and new cycles :

Let's say that when the window width gets below 420px, you wanna change the number of cols per row :

.item {
  @include sym-grid(4, 20px);
}

@media screen and (max-width: 420px) {
  @include sym-grid(2, 2em, $stretch: true);
}

First, we set a new cycle with: 2
Then, we set a new value for the gutter: 2em
If not declared, the $gutter value would've been: 10px (the default value)

sym-mq

Media queries and stretch :

Let's say that when the window width gets below 420px, you wanna get rid of the stretching stuff :

.item {
  @include sym-grid(4, 20px, $stretch: true);
}

@media screen and (max-width: 420px) {
  @include sym-grid(2, 20px, $stretch: reset);
}

Asym Grid (asymmetrical grid)

:arrow_up: back to top

Meet the mixin :

@include asym-grid(2/10, 20px)

Behind the scenes :

@mixin asym-grid($col: 1/1, $gutter: 0px, $last: false, $push: false, $pull: false, $linebreak: false)

You can set up another ratio everytime you defining a new row
The gutter value can be in 'px', 'em', 'rem' or '%'
The gutter value must be the same across the different declarations defining a row
To remove the margin-right on the last element of a row, we add: $last: true
Make sure the parent container is set to display flex

Let's make an asymmetrical grid :

.container {
  display: flex;
}

/* -- first row -- */

.LeftSide {
  @include asym-grid(2/10, 20px);
}

.InBetween {
  @include asym-grid(6/10, 20px);
}

.RightSide {
  @include asym-grid(2/10, 20px, $last: true);
}


/* -- second row -- */

.left-side {
  @include asym-grid(10/20, 10px);
}

.in-between {
  @include asym-grid(7/20, 10px);
}

.right-side {
  @include asym-grid(3/20, 10px, $last: true);
}


/* -- third row -- */

.left__side {
  @include asym-grid(3/12, 2em);

}

.in__between {
  @include asym-grid(3/12, 2em);
}

.right__side {
  @include asym-grid(6/12, 2em, $last: true);
}

The HTML :

<div class="container">
  <!-- first row -->
  <div class="LeftSide">
    LeftSide
  </div>
  <div class="InBetween">
    InBetween
  </div>
  <div class="RightSide">
    RightSide
  </div>
  <!-- second row -->
  <div class="left-side">
    left-side
  </div>
  <div class="in-between">
    in-between
  </div>
  <div class="right-side">
    right-side
  </div>
  <!-- third row -->
  <div class="left__side">
    left__side
  </div>
  <div class="in__between">
    in__between
  </div>
  <div class="right__side">
    right__side
  </div>
</div>

asym-grid

$push

:arrow_up: back to top

Wanna push that one col to the right so that it's centered? easy :

.one {
  @include asym-grid(4/12, 20px);
}

.two {
  @include asym-grid(2/12, 20px, $push: 1/12);
}

.three {
  @include asym-grid(4/12, 20px, $last: true);
}

The HTML :

<div class="container">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
  </div>
</div>

push

Alternatively, you can also use negative values if you wanna push an element to the left, e.g., $push: -1/12 is the same as $pull: 1/12

$pull

:arrow_up: back to top

Wanna pull a col to the left? :

.one {
  @include asym-grid(4/12, 20px);
}

.two {
  @include asym-grid(2/12, 20px, $push: 6/12);
}

.three {
  @include asym-grid(4/12, 20px, $pull: 3/12, $last: true);
}

The HTML :

<div class="container">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
  </div>
</div>

push

Alternatively, you can also use negative values if you wanna pull an element to the right, e.g., $pull: -1/12 is the same as $push: 1/12

$linebreak

:arrow_up: back to top

If you wish to have an element to be by itself on his own line, you can use $linebreak: true

Media-queries

:arrow_up: back to top

Above 760px :

.one {
  @include asym-grid(2/10, 20px, $push: 8/10);
}

.two {
  @include asym-grid(6/10, 20px);
}

.three {
  @include asym-grid(2/10, 20px, $pull: 8/10, $last: true);
}

asym-mq-b

Below 760px :

If you get bored of all the pushing and pulling around, use $push: reset or $pull: reset

.one {
  @media screen and (max-width: 760px) {
    @include asym-grid(1/3, 20px, $push: reset);
  }
}

.two {
  @media screen and (max-width: 760px) {
   @include asym-grid(1/3, 20px);
  }
}

.three {
  @media screen and (max-width: 760px) {
    @include asym-grid(1/3, 10px, $pull: reset, $last: true);
  }
}

asym-mq-a