CategoryFlexbox

February 23, 2016 — In this article, Cosima Mielke has collected tips, tricks, and tools To give you a head start into Flexbox and provide you with ideas on how to use it to master common coding challenges, that will help you get the most out of its power already today. Flexbox gives us a new kind of control over our layouts, making coding challenges that were hard or impossible to solve with CSS alone straightforward and intuitive. It provides us with the means to build grids that are flexible and aware of dynamic content. The list is by no means complete but includes the resources which we found helpful and useful. Read more…

November 3, 2015 — Flexbox today is very, very real. After many years of development, the specification has become much more stable, making it easier to achieve those CSS layout dreams. In this article, Dennis Gaebel Jr will discuss layout patterns well suited to flexbox, using the interface from the Tracks application, which also takes advantage of atomic design principles. He’ll share how flexbox proved useful and note the pitfalls of pairing it with particular layout patterns, and also look at those patterns that caused concern, provide suggestions for fallbacks and share additional tactics to start using this CSS property immediately. Read more…

August 17, 2015 — The future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll. The order in which they appear can be independent of the source order. And everything can fit a range of screen sizes. Yep, it’s a great time to jump into flexbox if you haven’t done so yet. But flexbox has a dizzying array of features, and in this article, Ben Gremillion will take a look at how you could create a basic Gmail-like, flexbox-based interface. If you haven’t explored or fully understood flexbox yet, this piece will revisit and explain a few things that might be confusing at first. Read more…

July 15, 2015 — Quantity queries and quantity ordering are advanced concepts and might be scary for beginners. However, as we move presentational styling away from programming languages and into CSS, we should use these tools more and more. Even as many members of our industry explore content queries, we can now use quantity queries to modify the order of content simply by counting. If you had to create a table of items, you might assume that JavaScript would be the best solution — just loop over the items, and if there are more than three, update the styling. But what if I told you could do it with CSS alone? Read more…

March 2, 2015 — Flex items are truly accommodating and a pleasure to work with. Most web apps consist of a series of modular, reusable components. You can use flexbox for those bits of layout that induce headaches and that depend on brittle CSS hacks to work. It takes a while to have your “Aha!” moment with flexbox, because it involves unlearning what you already know about CSS layouting. But once you speak the flexbox language fluently, your process of designing responsive apps will become effortless and your style sheets will get leaner! Read more…

August 10, 2013 — In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights. Read more…

May 23, 2013 — When the mockups for the new Financial Times application hit FT Labs desk, Wilson Page knew he and his team had a real challenge on their hands. They were tasked with implementing a far more challenging product, without compromising the performant experience that made the first app so successful. In this article, Wilson Page will discuss some of the changes he made in the latest release and the decision-making behind them. Read more…

May 22, 2013 — Flexible box layout is a new box model optimized for UI layout, and it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements, the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities. Read more…

April 25, 2013 — How can we maintain hierarchy as elements on the screen are resized and reflowed? Trent Walton first called attention to the issue with his post “Content Choreography,” which showed how visual hierarchy gets lost when columns are dropped below one another. You need to think about how you’ll want to rearrange blocks of content as your design moves from single to multiple columns. Read more…

September 19, 2011 — Offering a range of new features that help us break free of the float, the flexbox model is another step forward for the layout of modern Web pages and applications. By experimenting with these new techniques now, you can actively contribute to its development. Read more…