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
rock.

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.

You Might Also Like

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget