Introduction

H5TS is free and lightweight HTML5 template !
It was born using boring framework who crashes flies with tanks and many others stuffs who transforms the web in a great lake of shit [troll].
It was designed to be very fast without too many dependances¹.
To use it, we must keep in mind that an octet is an octet and that HTML5 and modern javascript helps you to make a great website without boring user-stories.
A framework will always be deprecated faster than a native code…

Code:

<section class="intro">
<strong>H5TS</strong> is free and lightweight HTML5 template !<br>
It was born using boring framework who crashes flies with tanks and many others stuffs who transforms the web in a great lake of shit [troll].<br>
It was designed to be very fast without too many dependances<sup><a href="#note1">1</a></sup>.<br>
To use it, we must keep in mind that an octet is an octet and that HTML5 and modern javascript helps you to make a great website without boring user-stories.<br>
A framework will always be deprecated faster than a native code…<br>
</section>

Page structure

Code:

<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="img/h5ts.png">
<title>H5TS - The simple and flat template</title>
<meta name="description" content="Ceci est la description de la page importante pour le résultat des recherches">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Bebas+Neue&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,400;0,500;0,900;1,200&family=Noto+Sans:wght@200;300;400&family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">H5TS</div>
<nav>
<a href="#" id="dsp_index">Accueil</a>
</nav>
</header>
<main>
Main content
</main>
<aside class="fixed">
<nav>
<a href="#go_intro" class="cat1">Introduction</a>
<a href="#go_titles" class="cat1">Titles</a>
<a href="#go_texts" class="cat1">Texts</a>
<a href="#go_classic_text" class="cat2">Classic text</a>
<a href="#go_focused_text" class="cat2">Focused text</a>
<a href="#go_paragraph" class="cat2">Paragraph</a>
<a href="#go_alerts" class="cat1">Alerts</a>
</nav>
</aside>
<footer>
<ul class="notes">
<li><a id="note1"></a><sup>1</sup> Only font-awesome and google fonts are loaded from CDNs servers</li>
</ul>
<p class="copyright">© 2022 by Fabien Wissocq</p>
</footer>
<script type="module" src="js/h5ts.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>

Titles

h1 title

h2 title

h3 title

h4 title

h5 title

Code:

<h1>h1 title</h1>
<h2>h2 title</h2>
<h3>h3 title</h3>
<h4>h4 title</h4>
<h5>h5 title</h5>

Texts

Classic text

Code:

Classic text

Focused text

Code:

<span class="focus">Focused text</span>

Paragraph

Paragraph text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<p>Paragraph text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint <span class="focus">occaecat</span> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Alerts

Error

This is an error !

Code:

<div class="msg error"><i class="fa-solid fa-circle-exclamation"></i> This is an error !</div>

Warning

This is a warning !

Code:

<div class="msg warning"><i class="fa-solid fa-triangle-exclamation"></i> This is a warning !</div>

Info

This is an information !

Code:

<div class="msg info"><i class="fa-solid fa-circle-info"></i> This is an information !</div>

Success

This is a success !

Code:

<div class="msg success"><i class="fa-solid fa-check"></i> This is a success !</div>

Badges

This a text with a default badge Awesome badge

Code:

<span class="badge">Awesome badge</span>

This a text some customized badges : Error badge Warning badge Info badge Success badge

Code:

<span class="badge error">Error badge</span>
<span class="badge warning">Warning badge</span>
<span class="badge info">Info badge</span>
<span class="badge success">Success badge</span>

Buttons

Code:

<button type="button">Classic button</button>

Code:

<button type="button" class="red">Red button</button>

Code:

<button type="button" class="orange">Orange button</button>

Code:

<button type="button" class="green">Green button</button>

Code:

<button type="button" class="blue">Blue button</button>

Actions buttons

Code:

<button type="button" class="delete"><i class="fa-solid fa-trash"></i> Delete</button>
<button type="button" class="close"><i class="fa-solid fa-xmark"></i> Close</button>
<button type="button" class="update"><i class="fa-solid fa-pencil"></i> Update</button>
<button type="button" class="ok"><i class="fa-solid fa-check"></i> OK</button>
<button type="button" class="see"><i class="fa-solid fa-eye"></i> See</button>

Cards

Soon…

Code:

Carousel

Soon…

Code:

Modals

Classic modal

Code:

<button type="button" id="btnClassicModal" data-modal_id="modal_example1">Classic modal</button>
<div class="modal hidden" id="modal_example1">
<div>
<header>My modal</header>
<i class="fa-solid fa-xmark fa-2x closeBt" title="Close"></i>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint <span class="focus">occaecat</span> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
<button type="button" class="close" data-modal_id="modal_example1"><i class="fa-solid fa-xmark"></i> Close</button>
</footer>
</div>
</div>

Tabs

Soon…

Code:

Accordion

Soon…

Code:

Breadcrumb

Code:

<ul class="breadcrumb">
<li><a href="#">Index</a></li>
<li><a href="#">My awesome page</a></li>
<li class="current">Current page</li>
</ul>

Toasts

Soon…

Code:

Images

Code:

<figure>
<img src="https://picsum.photos/300" alt="My Photo">
<figcaption>Just an image</figcaption>
</figure>