Smashing Newsletter #304: Front-End Boilerplates and Starter Kits

With reliable CSS/JavaScript boilerplates for all kinds of projects, from static site templates to React/Vue starter kits.Issue #304 June 8, 2021 View in the browser 💨

Smashing Newsletter

Unjani Smashing Friends,

We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately. In this issue, we highlight just them — reliable boilerplates for all kinds of projects, from static site templates to React/Vue starter kits.

In fact, over the last months, we’ve been preparing a couple of useful round-ups for you to use in your projects: on accessible front-end components, CSS generators and tools, SVG generators and VS Code Extensions, among many others. These round-ups are being updated regularly, so feel free to bookmark them and use for your future projects.

Image Optimization book
Meet a shiny new Smashing Book by Addy Osmani, “Image Optimization”. Now shipping worldwide.

This week, we are happy to release Addy Osmani’s Image Optimization book, which is now shipping as a hardcover worldwide. If you ordered one, you should have it delivered to your doorsteps very soon.

And of course we are running online workshops — in just a few hours I’m very excited to take off the journey to new front-end adventures in 2021, and oh my, it’s going to be quite a journey! We still have some tickets left, and I’d be honored and happy to see you there.

In the meantime, happy boilerplates day! 🙂
Vitaly (@smashingmag)

1. Emergency Site Kit

In case of emergency, many organizations need a quick way to publish critical information. However, existing websites are often unable of handling sudden traffic spikes and, depending on the kind of emergency, local network infrastructure might even be damaged, leaving people with poor mobile connections out. Max Boeck’s Emergency Site Kit is here to provide people with the information they need in such cases, no matter the circumstances.

Emergency Site Kit

The kit helps you quickly publish a simple website that is fast, accessible, and that can withstand large amounts of traffic. Built on the rule of least power, it uses simple technologies to ensure maximum resilience: The static files are optimized for first roundtrip, there’s only basic styling and one critical request, and service workers ensure offline support. One for the bookmarks.

2. A Boilerplate For Web Forms

Forms can be a pain. Luckily, there’s a little HTML and CSS boilerplate to change that: Boilerform. Providing baseline BEM-structured CSS and appropriate attributes on elements, this little boilerplate gives your forms a head start.

A Boilerplate For Web Forms

Designed to be straightforward to implement, you can, in its most basic form, drop a CSS file into your head with a short snippet and wrap your elements in a boilerform wrapper. To give you more control, there’s also a Sass partial and a pattern library to work with. Whether it’s a contact form, card payment, or user signup, Boilerform has got you covered.

And if you need an alternative, NoStyle Form Design System (also on GitHub) is a great option to consider.

From our sponsor

Build Web Experiences That Drive Business Growth

Build Web Experiences That Drive Business Growth

CMS Hub enables seamless integration with CRM data for advanced personalization, automation, and dynamic content. Develop locally with the tools and frameworks you prefer, then deploy to HubSpot via the CLI, where marketers can create and edit content with visual design tools. Get started with a free developer test account.

3. Static Site Boilerplate

Automated build processes, a local development server, production minification and optimizations, and the latest standards for static websites. Eric Alli’s Static Site Boilerplate uses the latest tech to make the process of building static websites more straightforward.

Static Site Boilerplate

The built-in development server will get you up and running in seconds, your HTML, styles, and scripts will be automatically linted, changes to files are monitored in real time, images are compressed for your production build, and sitemap.xml and robots.txt files are automatically included with your production build. A real timesaver.

4. Upcoming Smashing Online Workshops

Best practices and useful tooling for designers and developers are at the heart of our online workshops. You finish the workshop with a nice toolbelt of practical techniques to apply to your projects immediately. That’s worth it.

Smashing Online Events
We also have summer bundles with friendly prices and plenty of workshops for upcoming months. 🏖

For the next workshops, we have coming up:

From our sponsor

An Immersive Virtual Office For Your Remote Team

An Immersive Virtual Office For Your Remote Team

What if you could run into people at the office while you work remotely? Gather makes it possible. Claim a desk, chat by the water cooler, and hold important meetings in an interactive space. Put some presence back in your workday. Trusted by millions worldwide.

5. React Boilerplates

When it comes to React, there are several community-created boilerplates out there that are bound to save you time. One of them is the React Boilerplate. The highly-scalable, offline-first foundation was created with a focus on performance, best practices, and developer experience and shines with features such as quick scaffolding, instant feedback, predictable change management, and i18n support, among other things.

React Boilerplates

The React Starterkit by Konstantin Tarkus is a front-end starter kit using React, Relay, GraphQL, and JAMstack architecture. It’s optimized for serverless deployment to CDN edge locations and comes pre-configured with CSS-in-JS styling, code quality tools like ESLint, Prettier, TypeScript, and Jest, as well as VSCode snippets and settings to make your workflow more efficient.

Speaking of VS Code: The React + Redux Snippets VS Code Extension makes sure you always have the snippets you need available in your editor. It’s designed taking maximum advantage of code completion — perfect for power users.

Last but not least, if you want to use the best of all worlds to create your own, unique React boilerplate, Leonardo Maldonado’s tutorial is for you. He takes you step by step through building your own boilerplate from scratch with the main dependencies used in the React community today.

6. Vue Boilerplates

Do you plan to build a Progressive Web App with Vue.js? Vuesion has got your back. Described as the “most complete boilerplate for production-ready PWAs”, Vuesion focuses on performance, development speed, and best practices. The code is all yours, ready to be modified and build upon, so you can implement the things you actually need, without being limited by the template itself.

To improve prototyping in Vue, there’s the prototyping tool OverVue. It allows you to dynamically create and visualize a Vue app, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The resulting boilerplate can be exported as a template for further development.

Vue Boilerplates

Have you ever tinkered with the idea of using Vue to power a blog? Ben Hong did, and created a dev environment to help you do the same. Optimized for blogging, the VuePress Blog Boilerplate includes default features like RSS feed generation, a list of recent posts, etc. The minimal setup and Markdown-centered project structure help you focus on writing, and, thanks to the Vue-powered engine, you can use Vue components in Markdown and develop your theme in Vue, too.

For handy Vue snippets, little tips, tricks, useful directives, and nice practices, be sure to also check out the Vue Snippets collection (a small but mighty one indeed!).

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.

7. Create Projects From Cookiecutters

A command-line utility that creates projects from cookiecutters (i.e, project templates)? Cookiecutter does just that. It takes a source directory tree, copies it into your new project, and replaces all the names that are surrounded by templating tags {{ and }} with names it finds in cookiecutter.json.

Create Projects From Cookiecutters

These can be file names, directory names, and strings of text within files. This enables you to bootstrap a new project from a standard form, skipping all the mistakes that are often involved when starting a new project. Project templates can be in any language or markup format and you can use both local cookiecutters or remote ones from Git or Mercurial repos.

From our friends

Stay Up To Date On Emerging Tech

Stay Up To Date On Emerging Tech

Emerging Tech Brew Newsletter examines the trajectory of cutting-edge tech (and the real-time impacts on business, society, and key players). AI, 5G, crypto, space, autonomous vehicles: the technologies that will shape the future of business, all in one newsletter. Subscribe today.

8. New On Smashing Job Board

9. Recent Smashing Articles

That’s All, Folks!

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

Smashing Newsletter #303: VS Code Extensions

Tuesday, June 1, 2021

With useful VS Code extensions and little tools to help you save time and avoid headache when writing code. Issue #303 • June 1, 2021 • View in the browser 💨 Smashing Newsletter Namaste Smashing

Smashing Newsletter #302: Figma Plugins and Tools

Tuesday, May 25, 2021

With new features in Figma, useful Figma plugins, a template for Figma wayfinding, simpler annotations and integration with Vue.js, and how to manage design systems in Figma. Issue #302 • May 25, 2021

Smashing Newsletter #301: Front-End Boilerplates

Tuesday, May 18, 2021

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

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

Bamboo, Blow-Ups, and 3 Other Trends from Milan Design Week 2021

Thursday, September 16, 2021

Plus, the new Laura Gonzalez-designed Saint James Hotel is a Parisian oasis (image) Architectural Digest AD PRO Logo Saint James Paris The New Laura Gonzalez-Designed Saint James Hotel Is a Parisian

✏ WordPress vs Blogger, Creative Hamburger Menus, CSS Mirror Editing in Edge, and more...

Thursday, September 16, 2021

WordPress Vs Blogger: Which is Better for your Website? KINSTA.COM COMMENTS 20 Extremely Creative Web Layouts AWWWARDS.COM COMMENTS 10 Creative Hamburger Menus + Tips & Tricks 1STWEBDESIGNER.COM

✏ Issue #504: Typography for Data, Google Search Redesign, 8 Freelance Project Management Apps, Doodle Ipsum, and more…

Thursday, September 16, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #504 SEPTEMBER 15, 2021 Typography for Data In this in-depth investigation of typography for design systems, Michael Yom breaks down the

Now Hiring: Senior Interior Designer at Morgan Harrison Home (and More!)

Thursday, September 16, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Photomicrography, Hoefler&Co & Monotype, Fintech Design, Cascade Layers, Doodle Ipsum

Thursday, September 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 16 2021 The Winners of the 2021 Small World

Running effective remote meetings

Wednesday, September 15, 2021

We're all dialling in, now what? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

6 Timeless Alexander Girard Patterns Are Being Reintroduced

Wednesday, September 15, 2021

Plus, the unbelievable story behind this Elsie de Wolfe portrait (image) Architectural Digest AD PRO Logo The Mexidot pattern by Alexander Girard These 6 Timeless Alexander Girard Patterns Are Being

✏ 10 Iconography Rules, Core Web Vitals For WordPress, Why Creativity Matters, and more…

Wednesday, September 15, 2021

Say buh-bye to PAID page builders. Design Faster & Smarter with BeTheme's Live Builder & 600+ Pre-Built Sites [ad] MUFFINGROUP.COM 10 Iconography Rules to Follow in UI Design DRIBBBLE.COM

Issue 320

Wednesday, September 15, 2021

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news! CSS Layout News Issue 320 By Rachel Andrew – 15 Sep 2021 – View online → I'll start this week with

Human-Computer Interactions, Jargon, Data Vis Dispatch, Bonsai, Jamstack Conf

Wednesday, September 15, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 15 2021 A comprehensive list of human-computer