Archive for the ‘Flexbox’ Category

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...

Bootstrap 4: Regular Grid VS Flexbox Grid

Posted on: No Comments
Bootstrap 4 introduced some changes to the grid system we are all so familiar with from version 3. These include a new XL grid tier, alteration to some of the modifier classes, and a brand new flexbox version of the said grid system. The regular and f...

Sticky Footer, Five Ways

A brief history, if you will. The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is...

5 Flexbox Techniques You Need to Know About

Posted on: No Comments
Flexbox is a CSS standard optimized for designing user interfaces. Using the various flexbox properties we can construct our page out of small building blocks, which then are effortlessly positioned and resized any way we want. Websites and apps m...