Skip to content

High Times
Compare
Choose a tag to compare
@mrmrs mrmrs released this 01 Sep 18:24
v4.2.0
c8c4f5d

Without a doubt this is my favorite release ever. We fixed a couple of bugs and also
added some new goodness.

Additions

#####_debug-grid.css
Added some classes to help enable lining things up. If you place the .grid-debug class on an element you'll get an 8px grid on the background with a slightly transparent blue line. To get a 16px grid use the class .grid-debug-16

8px grid

screen shot 2016-09-01 at 5 39 03 pm

16px grid

screen shot 2016-09-01 at 5 45 05 pm

vh units

Added some classes for setting the height of the element based off of the screen height as opposed to the height of the parent. You can now use vh-100, vh-75, vh-50, or vh-25 to set the height of an element to 100, 75, 50, or 25% of the screen height. Shout out to @yoshuawuyts for the recommendation.

outlines

You can now place a 1px outline on an element with the class="outline" it will be set to the currentColor of the element.

line-height

Made some slight tweaks to line-height values. lh-copy is now set to 1.5 and lh-title is set to 1.25. This will hopefully help people worried about baseline grids a little bit.

pill shaped links / buttons

Added a class called br-pill that makes things look like pills with a border-radius of 9999px. Shout out to @matthewmueller for getting this in.

screen shot 2016-09-01 at 7 10 51 pm

Bug Fixes

Animation fix

The .glow class was not animating properly. This has been fixed.
hover

Filename consistency

Renamed _debug_children.css to _debug-children.css to follow the naming pattern of the other partials

Until next time

I think that is about it. Thanks to everyone who has given feedback and helped out with docs fixes. It's all really helpful.

Assets 2
Loading