Essays can be beautiful too, and our framework makes that easy.

See the Pen Modern HTML5 Essay Template by flyingfisch (@flyingfisch) on CodePen.

How to use

Usage is quite simple. First, copy the CSS file and normalize.css into your essay directory. So your directory tree should look like this:

./essay
  - index.html
  - style.css
  - normalize.css

Now start working on the head section of the HTML file. We want to use an HTML 5 DOCTYPE.

<!DOCTYPE html>
<html>
    <head>
        <title>Title of your essay</title>
        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="style.css">

OK, if you want anchor links automagically added to your headers, link jQuery and add the javascript to the head section like so:

<!DOCTYPE html>
<html>
    <head>
        <title>Title of your essay</title>
        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('h2').each(function(index) {
                     $(this).attr('id', 'section' + index);
                     $(this).prepend('<a href="#section' + index + '">#</a> ');
                });
            });
        </script>
    </head>

Now that our head section is all set we can move on to the body. Since we are using HTML 5, let’s use the proper semantics and put your article’s title in the header tag:

<header>
    <h1>Your Title</h1>
    <h3>by Arthur Author</a></h3>
</header>

After that, just add section and h2 tags for each part of the article like this:

<section>
    <h2>Header</h2>
    <p>Text</p>
</section>

And for your footer, use the footer tag (surprise, surprise).

<footer>
  <h2>Awesome footer</h2>
</footer>

The fine print

The template is under the Creative Commons Attribution-ShareAlike 4.0 International License, which means that you can do whatever you want with it as long as you give attribution. Attribution should be a visible link to Top Page Design somewhere on the document or you can mention us in the source code. Have fun!

About

Filed under design