1. Home
  2. Discover
  3. Design
  4. Responsive Design Weekly

Responsive Design Weekly - RWD Weekly #430

Read online

Hello and welcome to RWD weekly newsletter edition 430.

This week we have two articles on how to break out into full bleed for images/video/codeblocks while still keeping your columns widths to readable text sizes. Our feature article goes to town on CSS Variables, and there's some performance bonuses in our tutorials.

Let's get to it!
 

Headline


CSS Variables 101

This is an epic introduction to just about everything you can do with CSS Variables var(--myvariable). From animations to colours, dark-modes, padding, margins, scoped variables.... Ahmad ticks every box with a good overview and great real-world example code.
 

Sponsor

Learn what’s next in web design


An Event Apart Online Together: Fall Summit is a 3-day web design conference with an intense focus on digital design, UX, content, code, and more—featuring 18+ in-depth sessions, live Q&A with the speakers, and one-on-one conversations with special guests. You'll get deep insights into where the industry is now and where it is headed next. Join us online October 26-28.

Save $100 on any multi-day pass with promo code AEAOTRWD.
See the full agenda and register now
Advertise your product, service, or job opportunity to 26,748 tuned in web designers and developers. Find out more.

Article


What's New In DevTools (Chrome 87)

One of the key reasons I initially switched over to Firefox (there are a lot of other reasons too) was the support for Grid debugging in dev tools. It looks like Chrome has come to the part for anyone that has been waiting!
 

Why Tailwind CSS

I'm not a fan of utility classes and although I appreciate Tailwind CSS it's never something I can see myself reaching for. It seems this was the same for Guo Lai Ren until they built two sites using the framework, and now they're hooked.
 

Do Website Policy Disclosure Pages Always Have To Be So Ugly?

My favourite Terms of Service page is the CodePen version with human readable translation like
  • BYO electricity, internet, computer, web browser, etc.
  • Don’t be a jerk.
 

Giving material.angular.io a refresh

This article looks through the recent changes on the Material Angular site. They've added some guides and some nice illustrations on the components area.  I really like the Material design for documentation style sites.
 

Stop using Open Sans – Why your font choice matters

In this article Oliver will cover why your font choice matters, why Open Sans is that popular, and where to find alternatives for more diverse typography on the web.
 

Building Automatic Platform Optimization for WordPress using Cloudflare Workers  


A Complete Guide to CSS Media Queries

 

AVIF image format supported by Cloudflare Image Resizing

 

Tutorials

 

I made my website 28ms faster with content-visibility

By adding content-visibility:auto to content elements on your page you can speed an already lightning fast site up even more. Better yet, your slower website will be even faster. I'm interested to hear if anyone has an negative thoughts about the application?
 

CSS Grid full-bleed layout tutorial

My favourite thing about this tutorial is the use of the main content area width to min(65ch, 100%) - which means which ever value is smaller, 100% or 65 characters, make that the width of the content column.
 

Full bleed layout using simple CSS

Another solution to hit full bleed widths on certain page elements without having to lay out your site using Grid (side note: grid is still a great way to lay out up your site).
 

WordPress, Gutenberg, and Tips for ACF Blocks

It's been a long time since I've had to do any custom development on my personal projects, but I'm looking to overhaul all my work on the RWD site to make it all Gutenbergy. This is certainly one of the posts i've bookmarked, especially Dave's self registering block script.

 

Events


Performance Psychology, and Optimisation Experiments

Simon and Andy are taking the virtual stage next week for some performance talks. I used to miss these when we used to commute to and from work (remember those days), but I'm really looking forward to getting my performance on again!

 

.

 

Finally


That's all for this week. If you've come across any interesting/helpful articles or you've written something yourself please hit reply and let me know about them.

See you all next week!

Have a great weekend!

Cheers,

Justin.
Twitter
Facebook
Website
Copyright © 2020 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:
Simple Things
Simple Things LTD
Thame, Oxfordshire OX92EQ
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #429

Friday, October 2, 2020

Read online Hello and welcome to RWD weekly newsletter edition 429. This week (and last) I've been battling a cold that my daughter brought home from school. Don't be alarmed, it isn't

RWD Weekly #428

Friday, September 18, 2020

Read online Hello and welcome to RWD weekly newsletter number 428. This week I've been trying out the emulator on Edge for the new dual screen display along with some new fancy media queries that

RWD Weekly #427

Friday, September 11, 2020

Read online Hello and welcome to RWD weekly newsletter number 427. This week we're taking a closer peak at the image format that can reduce the size of the internet by 50%.... hey let me live in

RWD Weekly #426 Free analytics & making you think

Friday, September 4, 2020

Read online Hello and welcome to RWD weekly newsletter number 426. Our feature image this week comes from a different style of a site then I'm used to seeing. The vertical bars on the right of the

RWD Weekly #423 : The cost of free

Friday, August 14, 2020

Read online Hello and welcome to RWD Weekly Newsletter edition 423. This week one particular article stood out to me (our headline this week). It comes off the back of the sad news that Mozilla, the

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏