When in doubt, Flexbox

Flexbox is by far the easiest and most flexible solution for quick layout issues. Floating, positioning and tables have a lot of draw backs in our responsive world and lack the complexity for any but the most rudimentary layouts. Grid is far more powerful than Flexbox and excels at placing items in specific places. But... Read More

Turning the Current Color

Before CSS Custom Properties, CSS had a variable of sorts called currentColor that can still be used today. It corresponds to the current element or its parent’s foreground color. This becomes handy when you want to set border or drop shadow colors on the current element or even more useful when you can set the... Read More

Reset Your CSS for Better Compatibility

A CSS reset is a group of CSS rules that try to remove and/or reduce the differences between browsers. Each browser has its own default margin and padding etc. The reset attempts to make all those default settings consistent across browsers. There are many CSS Resets available, but I like normalize.css https://necolas.github.io/normalize.css/... Read More

Em Units are Your Friend

Use ems for (almost) everything. Em is a proportional unit that begins as equal to the default font size. If the user ups (or lowers) their font size, ems will scale up or down accordingly. This makes them great for margin and padding as well as for your breakpoints in Responsive Design. About the only... Read More

Changing the Look and Feel of Selected Text

You can change the look of a selection with the ::selection pseudo element. For instance, changes the background color of the selection to pink. There are limits on what changes you can make using the selection pseudo element though, you can only change: color, background-color, text-decoration and text-shadow every other vendor-neutral property will be ignored.... Read More

Normal Flow vs. Flexbox/Grid

When normal flow gives you the layout you want use it. If most of a section you’re laying out follows normal flow let it. Wrap the section you need a different layout for in a div and use Flexbox or grid just on that section. There’s no need to fight with Flexbox or grid to... Read More