1.4.3 • Published 6 years ago

bubbly-grid-stylus v1.4.3

Weekly downloads
3
License
ISC
Repository
github
Last release
6 years ago

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(), so it will support the latest versions of Chrome, Firefox, Safari, Opera (not opera mini) & IE 9+.

Installation

npm install bubbly-grid-stylus

Usage

:arrow_up: back to top

Here is an exemple of how you can use it with Gulp :

// gulpfile.js
var stylus = require('gulp-stylus');
var bubbly = require('bubbly-grid-stylus');


gulp.task('css-builder', function () {
  return gulp.src('./stylesheets/style.styl')
    .pipe(stylus({
      use:[foo(), baz(), bubbly()]
    }))
    .pipe(gulp.dest('./public/style'));
});

Sym Grid (symmetrical only)

Let me introduce you to the mixin :

sym-grid(4, 20px)

Behind the scenes (director's cut) :

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

Make sure to apply some clearfix mixin to the parent container, since every items will be floated inside :

.container
  some-clearfix()

  .item
    sym-grid(whatever)

$flex

:arrow_up: back to top

  • set this flag to true if you are inside a flex container
  • it will prevent unnecessary code bloat (like floating, clearing and whatnot)
.container
  display: flex

  .item
    sym-grid(4, 20px, $flex: true)

$col

:arrow_up: back to top

  • number of columns per row
  • default value is 1
.container
  some-clearfix()

  .item
    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
.container
  some-clearfix()

  .item
    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 :

.container
  some-clearfix()

  .item
    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

Nesting

:arrow_up: back to top

Note: With a bubbly grid, you don't need no context stuff when nesting, so go wild.

nest()

Behind the scenes (director's cut) :

nest($float = left)
  float: $float
  width: 100%

So, I heard it was time to nest :

.big-daddy
  some-clearfix()
  .item
    sym-grid(3, 20px)

.daddy
  nest()
  .item
    sym-grid(4, 10px)

.prodigal-son
  nest()

.lil-twin
  sym-grid(2, 10px)

.left .item
  sym-grid(2, 5px)

.right .item
  sym-grid(3, 5px, $stretch: true)

The HTML :

<div class="big-daddy">
    <div class="item">
      <p>first lvl 01</p>
    </div>
    ...
    <div class="daddy">
      <div class="item">
        <p>second lvl 01</p>
      </div>
      ...
      <div class="prodigal-son">
        <div class="lil-twin left">
          <div class="item">
            <p>third lvl 01</p>
          </div>
          ...
        </div>
        <div class="lil-twin right">
          <div class="item">
            <p>third lvl 01</p>
          </div>
          ...
        </div>
      </div>
    </div>
</div>

nest

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
  sym-grid(4, 20px)

  @media screen and (max-width: 420px)
    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
  sym-grid(4, 20px, $stretch: true)

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

If you set up a new cycle and still want to maintain the stretching stuff, you have re-set it as well :

.item
  sym-grid(4, 20px, $stretch: true)

  @media screen and (max-width: 420px)
    sym-grid(2, 20px, $stretch: true)

Once you have declared '$stretch', you will have to re-set it everytime you set up a new cycle :

.item
  sym-grid(8, 20px, $stretch: true)

  @media screen and (max-width: 1200px)
    sym-grid(5, 20px, $stretch: true)

  @media screen and (max-width: 800px)
    sym-grid(4, 10px, $stretch: reset);

  @media screen and (max-width: 420px)
    sym-grid(2, 5px, $stretch: true)

Asym Grid (asymmetrical grid)

:arrow_up: back to top

Meet the mixin :

asym-grid(2/10, 20px)

Behind the scenes (director's cut) :

asym-grid($col: 1/1, $gutter: 0px, $last: false, $push: false, $pull: false, $full: false)
  • First, we set a ratio => 2/10 (default value is 1/1)
  • You can set up another ratio everytime you defining a new row
  • Then we set a gutter => 20px (default value is 0px)
  • 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

Let's make an asymmetrical grid :

.container
  some-clearfix()

/* -- first row -- */

.LeftSide
  asym-grid(2/10, 20px)

.InBetween
  asym-grid(6/10, 20px)

.RightSide
  asym-grid(2/10, 20px, $last: true)


/* -- second row -- */

.left-side
  asym-grid(10/20, 10px)

.in-between
  asym-grid(7/20, 10px)

.right-side
  asym-grid(3/20, 10px, $last: true)


/* -- third row -- */

.left__side
  asym-grid(3/12, 2em)

.in__between
  asym-grid(3/12, 2em)

.right__side
  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
  asym-grid(4/12, 20px)

.two
  asym-grid(2/12, 20px, $push: 1/12)

.three
  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? follow me :

.one
  asym-grid(4/12, 20px)

.two
  asym-grid(2/12, 20px, $push: 6/12)

.three
  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

center

:arrow_up: back to top

Sure, you can center a column by moving it around using $push or $pull, but you can also simply use this => asym-center()

Let's take a look at this exemple :

push

The HTML :

<div class=container>
  <div class="half">
    asym-grid(1/2) + asym-center()
  </div>
  <div class="quarter">
    asym-grid(1/4) + asym-center()
  </div>
  <div class="third">
    asym-grid(1/3, 20px)
  </div>
  <div class="third">
    asym-grid(1/3, 20px)
  </div>
  <div class="third--last">
    asym-grid(1/3, 20px, $last: true)
  </div>
</div>

Stylus :

.half
  asym-grid(1/2)
  asym-center()
  +below(tablet)
    asym-grid(1/3) // it will still be centered

.quarter
  asym-grid(1/4)
  asym-center()
  +below(tablet)
    asym-grid(1) // set the width to 100%

.third
  asym-grid(1/3, 20px)

.third--last
  asym-grid(1/3, 20px, $last: true)

Media-queries :

if you want a col to take 100% of the width below a certain breakpoint, use asym-grid(1), do not use asym-grid($full: true), the layout will break.

Nesting

:arrow_up: back to top

Note: With a bubbly grid, you don't need no context stuff when nesting, so go wild.

Nothing special here, but just for the hell of it :

.one
  asym-grid(4/12, 20px)

  .item
    sym-grid(2, 10px)

.two
  asym-grid(5/12, 20px)

.left
  asym-grid(4/10, 20px)

.right
  asym-grid(6/10, 20px, $last: true)

.three
  asym-grid(3/12, 20px, $last: true)

.left .item,
.right .item,
.three .item
  nest()

The HTML :

<div class="container">
    <div class="one">
      <div class="item">
        <p>item 01</p>
      </div>
      ...
    </div>
    <div class="two">
      <div class="left">
        <div class="item">
          <p>item 01</p>
        </div>
        ...
      </div>
      <div class="right">
        <div class="item">
          <p>item 01</p>
        </div>
        ...
      </div>
    </div>
    <div class="three">
      <div class="item">
        <p>item 01</p>
      </div>
    </div>
</div>

asym-nest

Media-queries

:arrow_up: back to top

Above 760px :

.one
  asym-grid(2/10, 20px, $push: 8/10)

.two
  asym-grid(6/10, 20px)

.three
  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 or $pull => reset

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

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

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

asym-mq-a

$full

:arrow_up: back to top

  • default value is false
  • Use it if you want each col to take the full width of its container (e.g., when on mobile devices) :
@media screen and (max-width: 320px)
  .one,
  .two,
  .three
    asym-grid($full: true)

asym-full

$last

Like $push and $pull, you can also reset the '$last' parameter it if you wish. Let's take a look at this stupid grid :

/* -- first row -- */

.one
  asym-grid(1/2, 20px)

.two
  asym-grid(1/2, 20px, $last: true)


/* -- second row -- */

.three
  asym-grid(1/2, 20px)

.four
  asym-grid(1/2, 20px, $last: true)


/* -- third row -- */

.five
  asym-grid(1/3, 20px)

.six
  asym-grid(1/3, 20px)

.seven
  asym-grid(1/3, 20px, $last: true)


/* -- fourth row -- */

.eight
  asym-grid(1/3, 20px)

.nine
  asym-grid(1/3, 20px)

.ten
  asym-grid(1/3, 20px, $last: true)

The HTML :

<div class="container">
  <div class="one">
    item 01
  </div>
  <div class="two">
    item 02
  </div>
  <div class="three">
    item 03
  </div>
  <div class="four">
    item 04
  </div>
  <div class="five">
    item 05
  </div>
  <div class="six">
    item 06
  </div>
  <div class="seven">
    item 07
  </div>
  <div class="eight">
    item 08
  </div>
  <div class="nine">
    item 09
  </div>
  <div class="ten">
    item 10
  </div>
</div>

asym-full

Now, let's get down to business :

@media and screen (max-width: 760px)

  /* -- first row -- */
  .one
    asym-grid(1/3, 20px)

  .two
    asym-grid(1/3, 20px, $last: reset)

  .three
    asym-grid(1/3, 20px, $last: true)


  /* -- second row -- */

  .four
    asym-grid(1/3, 20px, $last: reset)

  .five
    asym-grid(1/3, 20px)

  .six
    asym-grid(1/3, 20px, $last: true)


  /* -- third row -- */

  .seven
    asym-grid(1/4, 10px, $last: reset)

  .eight
    asym-grid(1/4, 10px)

  .nine
    asym-grid(1/4, 10px)

  .ten
    asym-grid(1/4, 10px, $last: true)

asym-full

The End

Et voilà, I guess this is it...Now it's your turn to build some crazy layouts :)

:arrow_up: back to top

bubblygridsystemcalcstylus
@infinitebrahmanuniverse/nolb-bub@everything-registry/sub-chunk-1270@zalastax/nolb-bub
1.4.3

6 years ago

1.4.2

6 years ago

1.4.1

7 years ago

1.4.0

7 years ago

1.3.9

8 years ago

1.3.8

8 years ago

1.3.7

8 years ago

1.3.6

8 years ago

1.3.5

8 years ago

1.3.4

8 years ago

1.3.3

8 years ago

1.3.2

8 years ago

1.3.1

8 years ago

1.3.0

8 years ago

1.2.0

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago