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 Workshops]( We also have [summer bundles]( with friendly prices and plenty of workshops for upcoming months. 🏖 For the next workshops, we have coming up: - [New Adventures In Front-End 2021]( Dev with Vitaly Friedman. June 9–23. - [Maintaining Successful Design Systems]( Dev with Brad Frost. June 29 – July 13. - [Level-Up With Modern CSS]( Dev with Stephanie Eckles. July 8–22. - [Designing Websites That Convert]( UX with Paul Boag. July 22–30. - [The TypeScript Masterclass]( Dev with Stefan Baumgartner. August 5–19. - [Designing The Perfect Navigation]( UX with Vitaly Friedman. August 26–27. - [Jump to all workshops →]( --------------------------------------------------------------- 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 [Northwestern: Online Master’s in 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 - [Senior WordPress Developers]( at Constructive (New York, USA) - [Frontend Engineer]( at Giant Swarm GmbH (Remote) - [Senior UX Designer]( at Rocket Communications, Inc. (Remote) --------------------------------------------------------------- #9. Recent Smashing Articles - [Getting Started With Webpack]( - [Managing Shared State In Vue 3]( - [How To Fix Cumulative Layout Shift (CLS) Issues]( - [Improving The Performance Of An Online Store]( - [Smashing Podcast Ep. 38: Why Is My React App Slow?]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser]( This email was sent to {EMAIL} [why did I get this?](    [unsubscribe from this list](    [update subscription preferences]( Smashing Media AG · Werthmannstr. 15 · Freiburg 79098 · Germany