Archive for the ‘Flexbox’ Category

New flexbox guides on MDN

Posted on: No Comments
MDN released a comprehensive guide to Flexbox with new and updated materials by Rachel Andrew. The guide includes 11 posts demonstrating layouts, use cases and everything you could possibly want or need to know on the topic. All of the related Flexbox ...

CSS Grid Gotchas And Stumbling Blocks

Posted on: No Comments
    In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how exci...

Does CSS Grid Replace Flexbox?

Posted on: No Comments
No. Well. Mostly No. Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox. To put a point on it: Grid can do things Flexbox can't do. Flexb...

CSS Grid VS Flexbox: A Practical Comparison

Posted on: No Comments
Not too long ago, the layout for all HTML pages was done via tables, floats, and other CSS properties that were not well suited for styling complex web pages. Then came flexbox – a layout mode that was specifically designed for creating robust r...

Squeezy Stretchy Flexbox Nav

Posted on: No Comments
I saw an interesting take on off-canvas navigation the other day over on The New Tropic. It wasn't the off-canvas part so much. It was how the elements within the nav took up space. They stretched out to take up all the space, when available, but never...

Quick Tip: User Sortable Lists with Flexbox and jQuery

Posted on: No Comments
In this article, we'll learn, step-by-step, how to build a simple jQuery plugin which sorts elements based on the values of their custom data attributes. If you're curious about the end result, have a look at the corresponding CodePen demo: See the Pe...

The Media Object, A Bunch of Ways

Posted on: No Comments
The Media Object pattern is: image thingy on the left, heading and text on the right. That's what Nicole Sullivan called it and the name stuck. It's a pretty simple pattern, but like all things web design, it can be done many ways. Bootstrap's versi...

Surf Report Template

Posted on: No Comments
View demo Download source Today we’d like to share a little template with you. This flexbox-based layout represents a weekly (5-day) surf report which shows some data of the day, like temperatures and information on waves. It is accompanied by a...