Waffle Grid Versions Save

@santi6291 opened an issue (#21) informing me that the helper classes could collide with other libraries, and suggested adding an SCSS variable to prefix the helper classes.

This was implemented through the $helper-prefix variable, which by default is set to "", so that the helper classes stay the same. Setting this to "waffle-" for example, would make the helper classes as follow: .waffle-center, .waffle-m-hide, etc...

@danieledistanio opened an issue pointing out that bp-un-push would create an asymmetrical layout (and that's no good).

Luckily, that was pretty easy to fix. All I did wrong was set the margin to 0, instead of to n px used to create a gutter (pretty stupid error, I know :hankey:).

That is now all fixed and the un-push feature should work perfectly.

@tienpham241 reached out to me asking how to un-push elements on smaller devices, and I realised that I totally forgot that feature! 😱

https://twitter.com/tienpham241/status/868529708786266112

So here you go:

use bp-un-push to remove push on a device with a width smaller than the bp.

Example:

<div class="grid">
  <div class="row">
    <div class="col col-5-of-12 push-2-of-12 m-un-push s-push-1-of-4">
      /* This div will be pushed 2 of 12 on desktop, not pushed on medium, and 1 of 4 on small devices */
    </div>
  </div>
</div>

Added !default to the breakpoints and update to gulpfile.js.

Pull requests: #11 #12 With the help of @jackmcpickle

The .container class acts like a wrapper, a bit like the .grid class, but without the flexbox properties. You can now also add a class to your grid to make it full width: .grid.full-width. I got the idea for this thanks to @jackmcpickle even though it wasn't exactly what he meant in issue #9, I think it might come in handy for some websites.

That's all! Lucas

Added the .w-auto class for general items and items inside of breakpoints.

The breakpoints are determined by looping through a map, that looks like this by default:

$breakpoints: (
  m: (840px, (4, 6, 8)),
  s: (480px, (4, 6)),
);

This allows you to customize the breakpoints entirely to your needs.

Lucas

No changes to the source code this time... The default gulp task used to finish minifying the css before compiling the sass, and I therefore had to always run the gulp command twice. This is now fixed thanks to the package. The gulp command now outputs:

[12:00:25] Using gulpfile ~\Documents\GitHub\waffle-grid\gulpfile.js
[12:00:25] Starting 'default'...
[12:00:25] Starting 'sass:compile'...
[12:00:25] Finished 'default' after 176 ms
[12:00:26] Finished 'sass:compile' after 1.49 s
[12:00:26] Starting 'css:minify'...
[12:00:27] Finished 'css:minify' after 282 ms

This means that the travis file only runs one command, instead of gulp sass:compile and then gulp css:minify.

That's it!!

The non-minified code is now ~200 lines shorter 🎉!! Don't worry, I didn't drop any functionality to achieve this effect as the source code is still the same. The effect was achieved by minifying then beautifying the file. The minification groups elements like .col-1-of-4, .col-2-of-8 and .col-3-of-12 together, as they have the same exact styles applied to them.

Fixed issue #1 with the gutter. It used to use padding, but now it uses margin. The rows also have flex-wrap set to wrap so that any time the columns add up to more than the full width, they will just wrap to a new layer.