How Big Is That Box? Understanding Sizing In CSS Layout

Upgrade your inbox and get our editors’ picks twice a month. When starting to use Flexbox and Grid, it can be frustrating to find that we sometimes don’t get the layout we expect. Often this is due to the way sizing is calculated in these new layout methods…. Source: https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/

Box alignment in Flexbox

The Box Alignment Specification details how alignment works in various layout methods; on this page we explore how box alignment works in the context of Flexbox…. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them…. Source: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

The peculiar magic of flexbox and auto margins

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is…. Source: https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/

Sometimes `sizes` is quite important.

I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of “responsive websites,” srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide…. Source: https://css-tricks.com/sometimes-sizes-is-quite-important/

Performant Redux Selectors with Reselect

In Redux a selector is a piece of logic that gets a specific piece of state from the store. Additionally, a selector can compute data from a given state, allowing the store to keep only basic raw data. Selectors are usually used as part of the binding between the store and the container components…. Source: […]

Understanding the CSS Grid Layout Module

Throughout this series we’ve become familiar with Grid syntax, learned about some efficient ways of laying out elements on a page, and said goodbye to some…… Source: https://webdesign.tutsplus.com/series/understanding-the-css-grid-layout-module–cms-1079