HTML

HTML 5 Template

Template with html5.js shiv *
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Super Site!</title>
  <meta name="description" content="My Super Site!">
  <meta name="author" content="My Name">

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

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>

</body>
</html>

* Inspired by HTML5 Boilerplate

Emmet

If the Emmet plugin is installed in your code editor, you can use the ! alias or html:5 abbreviation then tab to stub out the template.

Emmet, is built into VS Code, you can create the index.html content by entering an exclamation mark on the first line then select the tab key.

Easy Browsersync Server

Easy Browsersync Server is an HTML 5 Template that comes with a NPM package config to install a minimal set of development tools including a Browsersync server and Gulp task runner. After installation, a simple gulp server command loads the html 5 template in a browser using Browsersync. Any edits made to the html or sass (scss) files are processed instantly and reloaded into the browser.

Source Code

  1. Requires Node.js

  2. Download or clone this repsoitory.

  3. Change directory to /uiCookbook/easybs

  4. Run npm install from a bash terminal or command prompt. This will read the package.json file and install the dependencies into the easybs project.

npm install
  • Finally, run gulp server to load the index.html file in a web browser
gulp server

If you wish to include normalize.scss in your sass build, run this task:

gulp cp

Then uncomment the normalize import statement at the top of /src/sass/base/_base.scss

Additional reading:

Easy Web Server

If you don’t need all the overhead of the Browsersync server, this Gulp webserver plugin with LiveReload is a good alternative. The uiCookbook - gulp-webserver branch contains an example to get you started.

Source Code

Or static http-server that can run from any project folder, npm install -g http-server

comments powered by Disqus