Simple Flexbox Grid System

… with blackjack, and hookers! (ref) Introduction and Requirements A while ago, I created a small and simple flexbox-based grid system for use in the projects we make at work. The developed Grid System inspired upon how Bootstrap works: it divides the grid into 12 columns (configurable). it supports gutters in between columns (configurable). it …

Fukol™ Grids

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 …

Flexbugs – Flexbox issues and cross-browser workarounds for them.

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here. Truth be told, most of the time “something is not as I’d expect” when using flexbox 😛 …

Quantity Ordering With CSS

Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row. Visually, we …

Flexbox adventures

Up until reading Flexbox Adventures I hadn’t really given much thought to how flexbox grow exactly works. If you do want to know: Available space = (Container size – Flex-basis siblings total). Flex Item size = Basis + ((Available space / Total Grow nums) * Individual grow num). A recommended read. Flexbox adventures → When …

Dive into Flexbox

Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Great to see that after three years it has become a candidate recommendation. Time to start digging a grave for faux columns (née 2004) …