Updated: November 19, 2020

CSS

The ever evolving styles of the web. With the growing complexity of websites, frameworks becoming the norm and bundlers controlling the output of our production code there is a heck of a lot to learn and keep up with.

Twitter

@argyleink

Follow/Read

Adam Argyle is a great follow on twitter for anyone interested in CSS snippets, topping up your general knowledge and seeing whats on the horizon and being added to browsers.

Articles

A Complete Guide to Flexbox - Read/Bookmark - The ultimate guide guide to flexbox. CSS tricks nailed this one and it's one of the best and easiest to understand guides out there

A Complete Guide to Grid - Read/Bookmark - Another great CSS layouts guide from CSS tricks. I find myself referencing this a lot stored some snippets for easy access.

CSS Animations - Watch/Admire - This is where it all started for me and Devtips holds a very dear place in my heart. A lot of it may be outdated but I'm leaving it here for the memories.

Pseudo Class Selectors - Read - Pseudo classed are incredibly powerful things. I use :after and :before all of the time and it often gives a more elegant and readable solution. This article will help you learn about that and more.

Smoother & sharper shadows with layered box-shadows - Read - Create smoother box-shadows with some techniques from Tobias. Philipp Brumm also created this tool inspired by the article. One thing I would love is if it created several box-shadow classes with varying sizes and strengths.

Styling Layout Wrappers In CSS - Read - A comprehensive introduction on creating and styling Layout wrappers. I'm a big fan of this article because it covers a lot of use cases.

Everything I Learned About min(), max(), clamp() In CSS - Read - Ahmed has wrote a great post for those wanting to familiarise themselves with min(), max() and clamp() CSS functions. I'm excited for this addition to the language and it will revolutionise responsive declarations.

Josh Comeau's CSS in JS

/* useful width options */
width: min-content | max-content | fit-content;
/* inherit colours for parent child consistency */
color: inherit;
/* isolated stacking context (add to the wrapper) */
isolation: isolate;
/* keep items inline */
white-space: nowrap;
/* only add styles for mouse/trackpad users */
@media (hover: hover) and (pointer: fine) {
button:hover {
text-decoration: underline;
}
}
  • 0-550px — Mobile
  • 550-1100px — Tablet
  • 1100-1500px — Laptop
  • 1500+px — Desktop

Using Rems instead of pixels for breakpoints

The idea behind this being, as the user increases their default font size the @media scale slides to accomodate those changes. Whereas, with pixels being "static" our layouts would become cramped and unable to adjust, if the user increased their default font size.

// constants.js
const BREAKPOINTS = {
tabletMin: 550,
laptopMin: 1100,
desktopMin: 1500,
}
const QUERIES = {
'tabletAndUp': `(min-width: ${BREAKPOINTS.tabletMin / 16}rem)`
'laptopAndUp': `(min-width: ${BREAKPOINTS.laptopMin / 16}rem)`
'desktopAndUp': `(min-width: ${BREAKPOINTS.desktopMin / 16}rem)`
}

Tools

Responsively - Responsive Design Previewer - Tweeted by none other than @addyosmani (so it's bound to be good). I've got to say it's absolute bliss being able to see all of the screens I care about in one space side by side, and it even updates if you're using hot reloading.

1-Line Layouts - Useful Layout Snippets - @Una has collated 10 modern CSS layout and sizing techniques which anyone can benefit from. CSS again proving how powerful it can be.