Plasttic HTML Boilerplate

A professional and extensible HTML5 starter template.

About

For every web project, a complete, updated and extensible starting point is essential.

This boilerplate is an HTML template that provides the necessary information to search engines and social media sites, PWA development and more, with a performance strategy.

• Meta tags for SEO.
• Meta tags for Social Media sharing.
• Google Tag Manager script
• Google Analytics script.
• Browser icons.
• PWA icons and information.
• Performance:
  • Preload images tag
  • Local hosted fonts preload tags.
  • Google Fonts tags with preconnect.
  • Javascript with defer.
• A simple 404 error page.
• A CSS file with styling for print.
• CSS Reset stylesheet link from Plasttic CSS Reset.

Note: also includes optional starter CSS, JS, Fonts and Social Icons.

The HTML boilerplate was the start of the Plasttic Workflow project.

Start

1. Quick Start

   • Installs the necessary dependencies
   • Creates a folder with the project name you defined
   • Downloads and installs the latest version of Plasttic HTML Boilerplate
   • Customize (see below)

(cd into your projects folder)
npx create-plasttic-boilerplate
cd <project-name>

1. Download

   • Go to https://github.com/tojeiro-me/Plasttic-boilerplate
   • Click on the Code tab and select Download ZIP
   • Unzip the file and move the contents of the public folder into your project folder
   • Customize (see below)

2. Github New Repo

   • Click this link Plasttic Boilerplate template
   • Inside the public folder are the boilerplate files
   • Customize (see below)

3. Snippet

   • !ptt shortcut VS Code Snippet
   • Paste on your global or project snippet file.
   • More info about VS Code snippets

Customize

Documentation :construction:: until it's not live, the boilerplate file is filled with comments and resource links.

• Search for "TODO:" in comments, relative to the information that needs to be changed or checked.
• Some information is global, some should be defined per page.
• If .##gitignore## exists, rename it to .gitignore and customize to your project info.
• If using VS Code, use the Todo Tree extension or TODO Highlight, and Better Comments

Follow

License

MIT