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
YarnNode 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.1andnpm v5or 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 setupin order to install dependencies and clean the git repo. - Delete the example app by running
npm run clean - At this point, run
npm startto 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
Top comments (0)