Practical CSS Grid: Adding Grid to an Existing Design, by @meyerwebhttps://alistapart.com/article/practical-grid
“It’s been decades since CSS first emerged, but it’s never contained a system anything like this.” – Eric Meyer on CSS grid and the process of progressively enhancing his site to use grid.
Getting started with variable fonts, by @clagnuthttp://clagnut.com/blog/2389/
Richard Rutter explains the basics of variable fonts and the new values coming with CSS4.
A Practical Guide to SVG on the Web, by @jakegiltsoffhttps://svgontheweb.com/
The guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.
Understanding Flexbox: Everything you need to know, by @OhansEmmanuelhttps://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jcypy2fbj
A concise and complete introduction to CSS Flexbox.
Get the Balance Right: Responsive Display Text, by @clagnut ◆ 24 wayshttps://24ways.org/2016/responsive-display-text/
Richard Rutter (Clearleft) shows how to use
vmin and a hybrid method of sizing text using CSS
calc() to achieve balanced font-sizes for different viewports.
cssreference – a free visual guide to CSS, by @jgthmshttp://cssreference.io
Learn by example cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
“Who Will Command The Robot Armies?” – a talk by @baconmeteor about accountability in automated systemshttp://idlewords.com/talks/robot_armies.htm
It’s a rant by Maciej Cegłowski about chatbots, machine learning, and the issues of accountability and power that go with automation.
Designing for the Web, by Mark Boultonhttp://designingfortheweb.co.uk/index.php
Modern web design is a discipline that spans a huge range of skills. In his book, Mark Boulton masterfully guides you through things like process and workflow, research, typography, colour, layout, and much more.
Using WebP Images – a great introduction by @malchatahttps://css-tricks.com/using-webp-images/
If you want to fight large images and save bandwidth with WebP, a file format created by Google that provides superior lossless and lossy compression, then this article is a really helpful introduction.
Fractal – build and document web component libraries & styleguideshttp://fractal.build/
Fractal by @allmarkedup, frontend dev @clearleft, lets you build and document web component libraries and styleguides, and then integrate them into your projects. It is flexible, data-driven, and can be seamlessly integrated into your site.
The Web’s Grain – A view on designing for the webhttp://www.frankchimero.com/writing/the-webs-grain/
One of the best articles on designing for the web, by @frank_chimero. As wonderful as important. Required reading.
Making And Maintaining Atomic Design Systems With Pattern Lab 2 Byhttps://www.smashingmagazine.com/2016/07/building-maintaining-atomic-design-systems-pattern-lab/
Pattern Lab 2 is an open-source suite of tools to help you and your team create and maintain thoughtful UI design systems. At its core, it’s a static site generator that stitches together patterns and allows you to design with dynamic data.
How Will Web Components Change CSS Architecture?https://snook.ca/archives/html_and_css/will-web-components-change-css
Impressively comprehensive article by @_hmig about creating accessible SVGs in order to ensure a great user experience for everyone.
Astrum – A lightweight pattern library for any web projecthttp://astrum.nodividestudio.com/
Astrum is a lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way.
A #cheatsheet of the A-Z of #typography jargon, by Fontsmithhttp://www.itsnicethat.com/news/fontsmith-typography-jargon-dictionary-300616
London foundry Fontsmith has produced an in-depth glossary of typography jargon in infographic format.
As We May Think. Vannevar Bush's visionary essay from 1945, anticipating the information societyhttp://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/
“Dr. Vannevar Bush […] calls for a new relationship between thinking man and the sum of our knowledge.” – The Editor
Just turned 6: Responsive Web Design, by @beephttp://alistapart.com/article/responsive-web-design
“Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
Why everybody who talks about the importance of semantics is both right and wrong at the same time.
Regressive Web Appshttps://adactio.com/journal/10708
“What does it profit a website to gain app-like features if it loses its soul?” – a must-read by @adactio about how progressive web apps undermine some of the web's greatest features (like URL's) and about some dangerous assumptions been made.
The New Web Typographyhttps://robinrendle.com/essays/new-web-typography/
A wonderful piece by @robinrendle about the aesthetics, the quirks, the flexibility, and the fragility of web typography.
Developing Dependency Awarenesshttps://www.smashingmagazine.com/2016/05/developing-dependency-awareness/
Progressive enhancement once more is on a roll: Great(!) article by @AaronGustafson about reducing dependencies
Design systems and Postel’s lawhttp://markboulton.co.uk/journal/design-systems-and-postels-law
Postel’s law – “Be conservative in what you do, be liberal in what you accept from others” – applied to design systems and their origination process. What a wonderful thought by @markboulton!
Creating A Living Style Guide: A Case Studyhttps://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
One of the most elaborate case studies on living style guides I've read so far. By @StevenKLambert
Responsive Images: Use Cases and Documented Code Snippets to Get You Startedhttps://dev.opera.com/articles/responsive-images/
Nicely sums up of different ways to use responsive images.
Empowering designers with beautiful and accessible color palettes based onWCAG Guidelines of text and background contrast ratios.
Grid Style Sheets 2.0https://gridstylesheets.org/
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
Custom underlines with CSS background gradientshttp://dabblet.com/gist/58f3d67d5bb0f8338776
A dabblet by Lea Verou, this technique is also covered in her very good book CSS Secrets.
Inline SVG with Grunticon Fallbackhttps://css-tricks.com/inline-svg-grunticon-fallback/
@chriscoyier shows you how to build an SVG icon system.
A guide to getting you on the IndieWeb
It's about time to learn CSS Flexbox. And this ingenious game lets you get your head around the relevant CSS properties in no time. Wonderful work.
Designing for Performance – Weighing Aesthetics and Speedhttp://designingforperformance.com/
The (free) online version of @lara_hogan's great book on web performance.
Style Guide Resourceshttp://styleguides.io/
This site lists lots of useful resources to help you learn about and create your own Front-End Style Guides and Pattern Libraries.Contributions by @maban, @bradfrost and many, many more.
Oil Change & Pizzahttp://danielmall.com/articles/oil-change-pizza/
Great advice from Daniel Mall for agencies (and freelancers alike): What makes a great agency are the things they don’t do.
An opinionated styleguide for writing sane, maintainable and scalable Sass.