In this post you’ll learn the basics of CSS Flexbox, which has become a must-have skill for web developers and designers the last couple of years.

We’ll be using a navbar as an example, as this is a very typical use case for Flexbox. This will introduce you to its most-used properties of the module, while leaving out the ones which aren’t as critical.

I’m also creating a free course on Flexbox. If you want early access you can leave your email here and I’ll send it to you once it’s ready.

Now let’s get started!

The two main components of a Flexbox layout are the container and the items.

Here’s the HTML for our example, which contains a container with four items:

As we have seen, flexbox wasn’t designed for grid layouts—but this is where our newest specification is most at home. CSS Grid Layout does exactly what its name suggests: it enables the creation of grid layouts in CSS. This is two-dimensional layout—laying things out as a row and a column at the same time. We’ll go over many more examples of Grid Layout in the rest of this book, but let’s start by seeing how Grid can solve the problem we had with making flexbox display like a grid.

When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.

In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?

What Do We Mean By Support?

Before deciding how you are going to support browsers without grid support, it is worth working out what you mean by support

Auto Trader provides a search platform for dealers to buy vehicles from other traders. A high-performance search experience is critical, as this helps create a competitive marketplace for dealers to purchase vehicles. This blog post will take you through some of the changes we made to create a high-performance search platform that regularly returns results in less than a second.

The default sort order is newly listed vehicles. This platform behaves very differently from the normal site you may be familiar with. The search experience is geared around our dealers being able to rapidly decide on vehicles to purchase to fill their forecourt. Dealers can then further refine their searches to show vehicles that may be suitable for them. A slower site means fewer searches and therefore less incentive for dealers to advertise with us.

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 excited people are about finally being able to use it to solve real problems.

CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to use the specification. This article aims to answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.

Prior to CSS Grid Layout landing in browsers, many people saw flexbox as the answer to all of our design-related problems. However, flexbox doesn’t provide a grid system any more than floats do, although it does make creating one simpler. A true grid is two-dimensional. The two dimensions are rows and columns, and with grid layout you can control both at once. With flexbox, you choose whether to lay the items out as a row or a column, one or the other and not both.

This project is a simple walk through for setting up a React project with Redux for state management. This is not a stand-alone project per se but rather, a simple, methodical introduction to Redux for basic background knowledge in other tutorials. In this series, we create the proverbial "To-do list" application using React and Redux from scratch. This is a good place to start if you have basic Javascript and React knowledge but have not explored Redux in depth yet.

Units

High Level Overview (8:07)

In this video, we simply go through a high level overview of the Redux set up and flow. The Redux architecture takes a little getting used to and it is better to have a general understanding of the concept before diving into the code. We use a simple diagram to visualize the structure which you can download HERE: http://www.mediafire.com/view/jjpdwq37p59z67s/redux-chart.png

Drag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible.

The core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around. This is best illustrated through contrast — so let’s explore some standard drag and drop behaviour and how we have tried to do better.

This example uses the amazing jquery-sortable. It’s drag and drop mechanism is fairly standard and serves as a good reference point.

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while new

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items.

This is all handled by the so called explicit and implicit grid.

All code samples in this post are accompanied by images in order to display grid lines and tracks. If you want to tinker with the code yourself, I recommend you download Firefox Nightly because it currently has the best DevTools

Not all products are created equal. While we repeatedly buy some products almost mindlessly, for others, we take a lot of time to make a purchasing decision. For a price tag that meets a certain threshold or if we are particularly invested in the quality of a product, we want to be absolutely certain that we are making the right choice and are getting a good product for a good price. That’s where a feature comparison table makes all the difference.

Feature comparison tables are helpful not only in their primary function, though. When designed properly, they can aid in decision-making way beyond placing product specifications side by side. They can also add meaning to an otherwise too technical product specification sheet, explaining

In the last couple of weeks I have started to see CSS Grid layout based frameworks and grid systems appearing. I’m actually surprised as to how long it has taken, but I am yet to see one that adds any value at all over just using CSS Grid Layout. Worse, the ones I have seen so far go backwards. They limit themselves by replicating the past rather than looking to the future. A common theme being that they require row wrappers in markup.

Why is grid different?

Grid is a grid system. It allows you to define columns and rows in your CSS, without needing to define them in markup. You don’t need a tool that helps you make it

This is a guest post written by Facebook’s Nuclide team member @matthewwithanm. He tells the story how the new docks got introduced to Atom and how package authors can make great use of them.

One of the things that the Nuclide team has always really loved about Atom is how it lets us extend and experiment with UI. Tools like Outline View, Console, Diagnostics, and the Debugger all need custom UI and, up until recently, their natural home was Atom’s Panels. Located at the edges of the window, panels are a great place for these kind of graphical tools but they have a couple of issues.

They stack, and can easily end up consuming a lot of valuable screen real estate.

The overflow pattern is a technique used in fluid web designs to expose more content as screen real estate becomes available. Typically seen in carousels and data tables, the overflow pattern allows content to remain compact for small screens while still capitalizing on additional screen real estate.

The benefits are obvious. Exposing more content, especially for an e-commerce site like Amazon, means more chances for users to see something they’d like to buy.

Also, a common complaint with regards to mobile-first responsive design is that large screen versions of mobile-first designs look stark and vacant. The overflow pattern alleviates that problem by introducing more content to fill in the void. This pattern scales well, so small screen users all the way up to 27″ cinema display users can have a (more or less) optimized experience without having to dramatically reconfigure the interface.

The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed

Err… what? 🤔

CSS Grid Layout introduces a lot of new concepts; there are 17 new properties to learn, and many more new terms to understand. This can make getting started with CSS Grid Layout difficult, as new terms reference other terms and you can get into a spiral of confusion. So, here are the basic concepts and terminology of CSS Grid Layout, explained.

Masonry layouts have been around a long time. You'll most likely recognize its use on Pinterest. In fact, Pinterest so popularized the use of this layout that it’s also known as the “Pinterest style layout”.

But even after being around for a while, they’re still one of the most effective ways of laying out a gallery, a portfolio, a dashboard, or any grouping of times. Masonry, at its core, is a grid-based layout with rows containing items of variable heights. However, as these dynamically sized items wrap and stack on top of each other, they leave no unnecessary gap between the items.

A fellow developer asked me how filter Pipes could be used for filtering based on checkboxes. Using the existing code samples I’ve created, I endeavored to put together a little demo of how this can be achieved.

Angular’s custom Pipes can, really, achieved nearly any filtering you’d want. The idea of filtering with checkboxes means that you have discreate values associated with the checkboxes, when checked, and you want to compare those checked values against properties with an array of objects. Sounds straight-forward, right?

The first hurdle is handling checkboxes in Angular. I decided to use an ngFor, and various bindings, for this purpose to display a list of checkboxes.

A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.

Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For the demo we have three slightly different grid layouts with different gutters and column numbers.

We use Dave DeSandro’s Masonry for the grid layout and Julian Garnier’s anime.js for the animations.

This demo is kindly sponsored by FullStory. If you would like to become a demo sponsor, you can find out more

I’ve just come back from EmberConf in Portland, and besides getting to know the community and making some awesome new friends, the GlimmerJS announcement is what really caught my eye.

Some of you might know that I’ve been a big fan of Ember for a long time. Like many others, I was initially put off by the high learning curve, until I eventually learned to embrace the framework’s conventions, and became a better developer in the process.

Even though I’ve flirted with basically all other major web frameworks since then, I still choose Ember most of the time when I have to build an ambitious web application. And why wouldn’t I? The CLI is fantastic, the Glimmer engine is now fast, and getting server-side rendering is literally just an

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Editor’s note:Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient.

Layout on the web is hard. The reason it is so hard is that the layout methods we’ve relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design. Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS grid layout and the box alignment module.

Social media is one of the dominant forms of interactions on the Internet. Leading platforms such as Facebook and Twitter count hundreds of millions of users each month. In this article, I will show you how social media is a rich vein of data for user researchers. I will argue that it would be an oversight for an organization to treat social media as nothing more than an opportunity for customer service enquiries, help requests and brand advocacy.

In the commercial sector, social media is a source of data about users that often gets ignored in favor of other more controlled user research activities, such as interviews and user testing. (Though, it is often used to recruit participants for these traditional methods.) Conversely, in the academic world, social media was immediately recognized as an interesting primary source of data. But it has been typically addressed with quantitative research methods, such as visualizing information flows between network members and graphing peaks of activity, which are not so relevant in most typical user research projects.

Angular Master Class in Freiburg

Contents are based on Angular version >= 2.x unless explicitely stated differently.

You sure heard about Angular’s AsyncPipe haven’t you? It’s this handy little pipe that we can use from within our templates so that we don’t have to deal with unwrapping data from Observables or Promises imperatively. Turns out the AsyncPipe is full of little wonders that may not be obvious at first sight. In this article we like to shed some light on the inner workings of this useful little tool.