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.
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.
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>
Just head on to Boilerform to get started!!
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
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.
- Command Line Tools
# 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
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>
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 )
- 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.
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
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.
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)
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.
This uses the latest tech to make the process of building static websites more straightforward.
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
Step 3: Run the deployment server
npm run start
Get started here.
React developers aren't excluded from this list. To get started :
- Make sure that you have
npm 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:
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.
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