Smashing Newsletter #301: Front-End Boilerplates

With front-end boilerplates: global CSS reset, favicons, HTML email template and VS code snippets for React, Vue, Angular and TypeScript.Issue #301 May 18, 2021 View in the browser 💨

Smashing Newsletter

Hola Smashing Friends,

Starting off a blank page or canvas is daunting. How would you structure your project? How would you start building your HTML email? Do we use global CSS resets, and if so, which one? And what's the bulletproof syntax for favicons again?

In this newsletter issue, we highlight useful boilerplates — from HTML and accessibility boilerplates to global CSS reset, favicons and VS Code snippets for React, Vue, Angular and TypeScript. We’ll be publishing a lengthier overview of these boilerplates later in the magazine, so if you are using one all the time, please let us know on Twitter.

Birthday picker showing 6 February 2019
Birthday picker starting from February 6th, 2019. From our new series on frustrating design patterns.

As of how-are-things-at-the-smashing-department, there is quite a bit happening behind the scenes. We’ve been working on a few new series of articles that will be coming shortly, written by wonderful people from the community with whom we have the incredible honor to be working with.

So drop by and take a look at the new articles on CSS Container Queries by Stephanie Eckles, a case study on Core Web Vitals by Beau Hartshorne, and our shiny new posts on frustrating design patterns by yours truly — among many other articles.

Happy reading — and we hope you’ll find these articles useful for your work.

And now, off to boilerplates!
— Vitaly (@smashingmag)

1. HTML Boilerplate Explained

How do you start a new project? Do you copy the HTML structure of the last site you built or maybe a boilerplate from HTML5 Boilerplate? Manuel Matuzović usually does the same, but recently, he encountered a situation where copying and pasting wasn’t an option: To document the structure he and his team are using at work, he had to understand the choices that have been made.

HTML Boilerplate

The task took up quite some time to research, so Manuel published the boilerplate on his blog for everyone to use, along with detailed explanations for each line of code so that you know exactly what you’re dealing with. A great opportunity to dive deeper into the underlying structure of a page. (cm)

2. Boilerplates For Responsive HTML Emails

We all know about the challenges that come with designing and building HTML emails. A handy boilerplate for sending out nicely formatted messages while avoiding some of the major pitfalls comes from Sean Powell: HTML Email Boilerplate.

Free Responsive HTML Email Template

Sean’s template is available in two versions — with and without comments — and consists of a header with global styles and a body section with more specific fixes and guidance to use where needed in your design. Whether you want to create your own template based on the snippets or cherry-pick the ones that fix your specific rendering issues, the boilerplate has got you covered.

If you only need a really simple responsive HTML template with a clear call-to-action button, you might also want to check out Lee Munroe’s template. It’s tested on all major email clients, on mobile, desktop, and web. Happy emailing! (cm)

From our sponsor

Code, Test And Debug WordPress In A Local Environment With DevKinsta

Code, Test And Debug WordPress In A Local Environment With DevKinsta

Design WordPress sites and themes offline with DevKinsta, Kinsta’s free local development tool. DevKinsta has powerful tools like a built-in database manager, SMTP server, WordPress_DEBUG toggle, and more. Use DevKinsta to test your site with the latest version of PHP in a safe environment supporting PHP 7.2-8.0.

3. Modern Global CSS Resets

What are sensible CSS defaults for modern projects? Do we need to rely on HTML5 Boilerplate, or Normalize.css, or should we not use them at all? To prevent common CSS issues down the line, it is a good idea to already lay the foundation when beginning a web project. So if you’re looking for a boilerplate solution for CSS, Andy Bell's A Modern CSS Reset is for you.

CSS Boilerplate

According to Andy, thee days we can trust our browsers to behave properly, so heavy-handed resets aren't really necessary. Andy provides a tiny little CSS reset that you can use as the basis for your CSS, and provides a detailed breakdown of each declaration as well.

And in a proper CSS folder organization boilerplate, Matthias Ott explains how he structures CSS, using ITCSS and BEM. A well-established and sensible approach to avoid overwriting CSS and writing styles with maintenance in mind. This should cover the ground well! (vf)

4. Upcoming Smashing Online Workshops

We love reliable tools and techniques, and they are pretty much at the heart of the online workshops that we run — be it around accessibility, design or front-end. With our workshops, you can boost your skills around front-end and design, and get better at your work, live.

Smashing Online Events
We have Summer Bundles — spend the summer learning with us! 🏖

For the next workshops, we have coming up:

5. A Snippet For Loading Responsive WebP Images

What's the responsive images syntax again? Was it srcset, or sizes, or both? We want to ship AVIF and WebP today, but we also need a loading strategy that providess a fallback for browsers that don’t support modern image foramts. Stefan Judis has a little snippet boilerplate to do it.

A picture element to load correctly resized webp images in HTML

Addy Osmani explains everything around images in his article on humble <img> element and Core Web Vitals, and you can use Stefan’s snippet to keep the right format of the responsive images markup nearby.

Also, in case you missed it, Stefan has started publishing his Web Weekly newsletter this year. Every Monday, you’ll find a colorful mix of resources all around frontend, productivity and web development learnings paired with handy tools and GitHub projects in your inbox. Stefan’s goal: make it the best email to start your week. (cm)

From our sponsor

5 Reasons Why You Should NOT Write Your JavaScript Data Grid From Scratch

5 Reasons Why You Should NOT Write Your JavaScript Data Grid From Scratch

Of the many awesome things JavaScript developers can build, most are enjoyable, some give you a headache, but also satisfaction, and a handful should be labeled “Here be dragons.” Here are five compelling reasons why creating a data grid from scratch falls into the latter category. Change my mind.

6. How To Favicon In 2021

Sometimes, it’s a good idea to re-evaluate best practices. When it comes to favicons, for example — particularly given the fact that front-end developers had to deal with more than 20 static PNG files to display a simple favicon at some point. To make the process more straightforward, you can explore a smarter solution that requires just five icons and one JSON file to fit most modern needs.

How to Favicon in 2021

Chris Coyier went even a step further and went ultra-minimalist for the CSS Tricks favicon. He explains how it works in his post “How to Favicon in 2021”. An SVG concept to get your favicons ready for dark mode is also included. (cm)

7. VS Code Snippets To Streamline Your Workflow

Are you using VS Code? We came across some useful extensions that handle the React, Vue, and Angular snippets you might need to type frequently for you. For Vue, be sure to check out Sarah Drasner’s extension. It was built for real-world use and focuses on developer ergonomics instead of cataloguing API definitions.

Vue VS Code Snippets

Burke Holland provides you with a collection of essential React snippets and commands that he selected from his day-to-day React use. And if you’re looking for Angular snippets, John Papa has got you covered. His extension adds snippets for Angular for TypeScript and HTML to your VS Code setup.

Speaking of VS Code setup: Have you heard of the “VS Code Can Do That Workshop” already? From customizing the editor to using Git and source control, it features eight exercises to enhance your VS Code skills. (cm)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.

Earn your master’s degree online.

8. New On Smashing Job Board

9. Our Current Most Popular Articles

That’s All, Folks!

Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

This email was sent to you
why did I get this?    unsubscribe from this list    update subscription preferences
Smashing Media AG · Werthmannstr. 15 · Freiburg 79098 · Germany

Older messages

Next Online Workshops on CSS, Design Systems and UX

Friday, May 14, 2021

Boost your skills online, with workshops on everything from front-end to design. Meet our new live workshops on front-end & design. • View in the browser 💨 SmashingConf Newsletter Howdy Smashing

Smashing Newsletter #299: UX Edition

Tuesday, May 4, 2021

On web forms, opening menus on hover/click, UX tooling, maps and UX training exercises. Issue #299 • May 4, 2021 • View in the browser 💨 Smashing Newsletter Hej Smashing Friends, Everyone on the team

Meet "Image Optimization", a Brand New Smashing Book

Wednesday, April 28, 2021

Meet “Image Optimization”, our brand-new practical guide to optimizing and delivering high-quality images on the web. Written by Addy Osmani. Let's get images on the web right. Meet “Image

Smashing Newsletter #298: Web Typography

Tuesday, April 27, 2021

Web type tools, from little CSS helpers to open-sourced typefaces and some helpful guides to choose great type pairings. Issue #298 • Tue, April 27, 2021 • View in the browser 💨 Smashing Newsletter

Smashing Newsletter #297: Web Performance

Tuesday, April 20, 2021

With Lighthouse, debugging CLS, caching, web fonts subsetting and React performance. Issue #297 • Tue, April 20, 2021 • View in the browser 💨 Smashing Newsletter Hola Smashing Friends, Web performance.

✏ How to Avoid SEO Disaster, 6 Types of Web Design, Simply Markdown, and more...

Sunday, June 20, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU An Alternative Voice UI to Voice Assistants SMASHINGMAGAZINE.COM COMMENTS Simply Markdown - Easy Create Markdown with

✏ Is AMP Dead and Do We Care? React Markdown Editor, Bad vs Good Designs, and more...

Saturday, June 19, 2021

Poll: Is AMP Dead, and do We Care? WEBDESIGNERDEPOT.COM COMMENTS Bad Vs Good Accessible Designs USABILITYGEEK.COM COMMENTS Client-Side Routing in Next.js SMASHINGMAGAZINE.COM COMMENTS React Markdown

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript

What Will Back-To-Normal Look Like?

Friday, June 18, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

UX/UI Portfolios, Feels, Bear Plus Snowflake, Optical Size, Aspect Ratio

Friday, June 18, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 18 2021 The problem with UX/UI portfolios

RWD Weekly #462— the one about the little yellow book

Friday, June 18, 2021

No preview text for you this week, you've got to commit to reading this one by opening it first :) Read online Hello again, welcome back to RWD Weekly #462 happy Friday! This week I've been

Meet Image Optimization, A New Smashing Book

Thursday, June 17, 2021

Meet Addy Osmani's new book on image optimization: from formats and compression to delivery and maintenance. Brand new book: Image Optimization by Addy Osmani. Dearest Friend, How do we deliver

🔥 Dashing Mobile UI Designs and more

Thursday, June 17, 2021

Round Up The Newest UpLabs Weekly Freebies 🤠 Check out some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. The New Super Fast Way to Build a Website

Holly Hunt Reinvents Herself Once Again

Thursday, June 17, 2021

Plus, a houseplant sells for almost $20000 at auction (image) Architectural Digest AD PRO Logo house plant - philodendron Think You Love Houseplants? This One Just Sold for Almost $20000 Read More →