Stay Ahead of the Game Must Have Front-End Boilerplates and Starter Kits for Every Developer

With Boilerplates, you can set up projects faster and get to work immediately, without having to write everything from scratch every single time.

Today, I'm writing on Boilerplates and Startup kits you should use for a variety of projects from static site templates to React and Vue frameworks.

1. A Boilerplate for Forms

Dealing with forms can be sometimes troublesome. Luckily there's an HTML and CSS boilerplate called Boilerform that can solve this issue. This handy little template gives your forms a kickstart by providing well-organized CSS based on the BEM methodology along, with attributes, on elements.

Prerequisites

HTML
CSS
JavaScript

Getting Started

Drop the CSS file into your head with the following snippet:

<link rel="stylesheet" media="all" href="https://cdn.jsdelivr.net/gh/hankchizljaw/boilerform@master/dist/css/boilerform.min.css?v=1.1.1" />

Then all you need to do is wrap your elements in a .boilerform wrapper. Something like this:

<div class="boilerform">
    <!-- Add all of your boilerform elements in here 👍 -->
</div>

Preview

Just head on to Boilerform to get started!!

2. GitHub Template Guidelines

This template provides a kick start for your user-friendly GitHub repositories. To get this project up and running in your local machine, do the following

$ npm install --global ghdocs
$ ghdocs

Here's the link to the gitHub repo by Augusto Cezar

3. Hackathon Starter

Well, I've never attended a Hackerthon before and have no prior knowledge of what it looks like.
But I happen to come across a guide that we'll help me start up when the time comes.
The Hackerthon starter will help you set up a NodeJS application and will help you focus on what is really important.
This starter also provides you with a boilerplate that features local authentication with email and password, authentication via Twitter, Facebook, Google, GitHub, LinkedIn, and Instagram, flash notifications, MVC project structure, account management, API examples, and much more to help you get started.

Prerequisites

MongoDB
Node.js
Command Line Tools

Getting Started

# Get the latest snapshot
git clone https://github.com/sahat/hackathon-starter.git myproject

# Change directory
cd myproject

# Install NPM dependencies
npm install

# Then simply start your app
node app.js

3. HTML Boilerplate

Copying and Pasting the HTML structure from the last site you did might not sometimes be the best option.
Thanks to Manuel Matuzovic who published a HTML 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.

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

4. All-In-One Front-End Boilerplate

This Boilerplate provides you with a starter kit to develop, build, and deploy your next web project.

Here are some of its features you should before embarking on this boilerplate. They include:

Multiple Frontend SCSS frameworks at your disposal ( Eg:- New - - Bootstrap 4 and Foundation 6 )
Easy to manage folder structure but you can change whatever you want ( Eg:- MVC framework-like folder structure )
A centralized place to manage your JavaScript, images, fonts, and all project-related settings.
Ability to auto-switch remote URL, if you prefer.
For Windows users easy to run dev and build tasks with provided shortcut bat files.
Hassle-free font-face generation with the ability to switch remote URLs during the build process.
Integrated project backup feature and ability to get the source and build files backup anytime
Automatic Deployment to the production server.

Prerequisites

Yarn
Node JS

5. Mobile-First Boilerplate

What do you normally start with mobile view or desktop view?

If you do start with mobile responsiveness, here's a Boilerplate for you. This boilerplate provides you with the following features:

A minimal, modern CSS reset
A responsive, mobile-first grid built on Flexbox
A well-designed, fluid typographic scale
CSS buttons
Simple table styling
Common form components Get started

6. Responsive HTML Emails Boilerplate

Do you struggle with formatting HTML emails?
Here's another handy pretty Boilerplate for sending out nice formatted messages to your clients as a whole.

7. PHP Boilerplate

PHP developers aren't exempted from the list. This could come in handy with exceptional performance you might want to try.

Here's a medium post by Jens Kuerschner where he talks extensively on this template.

8. SaaS Boilerplate (BedRock)

The modern full-stack Next.js and GraphQL boilerplate combines the best tools the JavaScript ecosystem has to offer into one solid foundation for your SaaS product.

BedRock allows you to focus more on your product rather than wondering what tool to use to get started. Most of the technologies used in BedRock can easily be removed and the best is, you don't have to know all of these technologies.

9. Static Site Boilerplate

This uses the latest tech to make the process of building static websites more straightforward.

Prerequisites

NodeJs
NPM
Git

Installation Process
Step 1: Clone the repo

git clone https://github.com/ericalli/static-site-boilerplate
rd /s /q .git && git init

Step 2: Install all dependencies

npm install

Step 3: Run the deployment server

npm run start

Get started here.

10. React Boilerplate

React developers aren't excluded from this list. To get started :

Make sure that you have Node.js v8.15.1 and npm v5 or above installed.
Clone this repo using git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git <YOUR_PROJECT_NAME>
Move to the appropriate directory: cd <YOUR_PROJECT_NAME>
Run npm run setup in order to install dependencies and clean the git repo.
Delete the example app by running npm run clean
At this point, run npm start to see your application at http://localhost:3000.

Get started here.

Conclusion

Remember, all these Boilerplates are bound to save you time, highly scalable, and created with a focus on performance, best practices, and Developer's experience

Blog

Stay Ahead of the Game Must Have Front-End Boilerplates and Starter Kits for Every Developer

Arinze Chinweuba

1. A Boilerplate for Forms

2. GitHub Template Guidelines

3. Hackathon Starter

3. HTML Boilerplate

4. All-In-One Front-End Boilerplate

5. Mobile-First Boilerplate

6. Responsive HTML Emails Boilerplate

7. PHP Boilerplate

8. SaaS Boilerplate (BedRock)

9. Static Site Boilerplate

10. React Boilerplate

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related