[![Plasttic](./.github/assets/repo-banner-1400w-boilerplate.png)](https://plasttic.dev)

# Plasttic HTML Boilerplate

A professional and extensible HTML5 starter template.

[![npm](https://img.shields.io/npm/v/plasttic-boilerplate.svg?style=flat&colorA=18181B&colorB=2D7786)](https://www.npmjs.com/package/plasttic-boilerplate) ![npm](https://img.shields.io/npm/dt/plasttic-boilerplate?style=flat&colorA=18181B&colorB=2D7786) [![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat&colorA=18181B&colorB=2D7786)](https://github.com/tojeiro-me/Plasttic-boilerplate/blob/master/LICENSE) [![Twitter Follow](https://img.shields.io/twitter/follow/Plasttic_Dev?style=social)](https://twitter.com/Plasttic_Dev)

---

## 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](https://github.com/tojeiro-me/Plasttic-reset).

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

The HTML boilerplate was the start of the [Plasttic Workflow](https://github.com/tojeiro-me/Plasttic) 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](https://github.com/tojeiro-me/Plasttic-boilerplate/generate)
   - Inside the `public` folder are the boilerplate files
   - Customize (see below)

3. Snippet

   - `!ptt` shortcut [VS Code Snippet](https://gist.github.com/tojeiro-me/5ca46d8dcb1cee46b4cda2737e47e6ef)
   - Paste on your global or project snippet file.
   - [More info about VS Code snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets)

---

## Customize

Documentation :construction:: until it's not live, the [boilerplate file](https://raw.githubusercontent.com/tojeiro-me/Plasttic-boilerplate/master/public/index.html) 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](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) or [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight), and [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

## Follow

---

[![Twitter](./.github/assets/twitter.svg)](https://twitter.com/Plasttic_Dev)&emsp;[![Mastodon](./.github/assets/mastodon.svg)](https://mastodon.social/@plasttic)&emsp;[![Github](./.github/assets/github.svg)](https://github.com/tojeiro-me)

---

## License

[MIT](./LICENSE)

---

[![Plasttic](./.github/assets/repo-badge-50h.png)](https://github.com/tojeiro-me/Plasttic)