It’s not obvious, other than not working, but Sass variables can be used in CSS calc() functions. They just need to be escaped like this:
$gutter: 32px;
.box {
flex(0 0 calc(25% - #{$gutter/2});
}
Banged against that for an embarrassing amount of time today.
Pure CSS Parallax Websites
If you ever end up converting a boostrap v3 row div to flexbox, be sure to remove the :before pseudo-element or you might waste a non-trivial amount of time wondering why flexbox wasn’t working right.
Some things that might happen (These seem especially common on Safari, macOS and iOS)
justify-content: flex-start doesn’t touch the start (because there’s a hidden element in the way)
flex-wrap: wrap might appear to wrap too soon, leaving an odd number of elements on the first line. It’s working right, it’s just adding the hidden element into the caclulation.
The solution is to remove the pseudo-element from the document by overriding its style with content: none;:
.flex.row {
display: flex;
}
.flex.row:before {
content: none;
}
You Might Not Need JavaScript
This was just awesome: Things get interesting when concatenating :nth-last-child(6) with :first-child, introducing a second condition. In this case, I am looking for any element that is both the sixth element from the end and the first element. Selects a members of a set if that set contains exactly six objects. Mind blown. Quantity Queries […]
Might be adding this to the toolchain… cssnano: A modular minifier based on the PostCSS ecosystem
Designing with relative breakpoints (no pixels widths!) Crazy, but the thinking is sound: 7 Habits of Highly Effective Media Queries
The next version of Bootstrap is switching to Em-defined breakpoint widths. http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints
Update: The Bootstrap team reversed course, v4 will use px breakpoints. Discussions on GitHub: #17366, #17403 (and way back in 2012: #1943)
While I suspect pixels will win out, the debate goes on. PX, EM or REM Media Queries?
Set menu collapse breakpoint in Bootstrap 3
Support tables look like this, but if you’re targeting mobile, photoshop-style blend modes are supported basically everywhere. Basics of CSS Blend Modes | CSS-Tricks
The term ‘breakpoint’ is kind of ironic since changing one so often breaks another. me
Tech, noted 