Building a CSS Grid System isn’t that hard really, thanks to flexbox. Heydon has stripped it to its smallest form: .fukol-grid { display: flex; flex-wrap: wrap; margin: -0.5em; } .fukol-grid > * { flex: 1 0 10em; margin: 0.5em; } Fukol™ is a lightweight, breakpoint free, completely responsive, element query driven*, progressive enhancement based CSS …
Why there is no CSS4?
Rachel Andrew: If you read something about CSS3 Selectors, then what is actually being described is something that is part of the CSS Selectors Level 3 specification. […] The CSS Working Group is now working on Selectors Level 4 with new proposed features plus the selectors that were part of Level 3 (and CSS 1 …
Film Meets Art
Gmail to remove CSS :checked support 😟
With a new update about to roll (already rolling?) out, Gmail has added support for – amongst other things – media queries and non-inline styles. Along with that update however, they’ve also axed support for :checked: Also gone is the support for :checked selectors. The only pseudo-class selector supported in Gmail and G Suite webmail …
CSS Transparent and Outlined Text
For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly. Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen: See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) …
Emoji Silhouettes and Emoji Outlines with CSS
From StackOverflow: It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? Using an (inset) text-shadow in combination with transparent text color this indeed is possible: With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) …
Continue reading “Emoji Silhouettes and Emoji Outlines with CSS”
New CSS rotate syntax
In the CSS Transforms Module Level 2 there will be individual transform properties for translate, scale, and rotate. This pen by Wes Bos demonstrates the new rotate syntax (use Canary): See the Pen ALbmzN by Wes Bos (@wesbos) on CodePen. So how exactly is said syntax? Here’s a snippet from the spec: The rotate property …
9 Underutilized Features in CSS
List assembled by Jordan Little: The CSS calc() function The pointer media query The currentColor variable The :valid, :invalid, and :empty pseudoclasses Counters using only CSS Predictable tables with fixed layout Easy form states using adjacent sibling selectors Algebraic nth-child() selection Animating elements with animation-fill-mode As a tenth feature I’d like to add the use …
Electrode – Universal React and Node.js Application Platform
From the folks at Walmart: Electrode is a platform for building universal React/Node.js applications with standardized structure, best practices, and modern technologies baked in. It’s powering Walmart.com. And, now developers can use Electrode Platform as a whole or take its pieces, as appropriate. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud …
Continue reading “Electrode – Universal React and Node.js Application Platform”