Toth's Online Tools for HTML
To build nice web applications, Bootstrap (aka bootstrap bootstrap_default) is a great option. But I definetivly dislike the many classes needed to do anything.
TOTH try to create application in a more natural way. HTML5 is lake of application oriented
tags like "popup", and the default alert() is still horrible.
The purpose of TOTH is to provide a solid base for application with a highly customizable solution.
The TOTH framework is created and maintened by Paul TOTH from Excute SARL company. Yes, now you know where the name comes from !
The first release of the framework was the 10th september 2013.
Add toth.js and toth.css to your HTML page, apply the ".toth" style to any parent element an take adventage of TOTH for all it's childrens !
<!DOCTYPE html>
<html>
<head>
<title>TOTH</title>
<link rel="stylesheet" href="toth.css">
<script type="text/javascript" src="toth.js"></script>
</head>
<body class="toth">
Now I can use TOTH !
</body>
</html>
Unlike Bootstrap, TOTH is non-intrusive, all the styles defined in toth.css are prefixed with .toth, that's why you need a parent element of class toth in your code.
Note that TOTH do not define any font for your page, you have to set this by yourself. This page for instance use an inline stylesheet.
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
margin: 5px 10% 40px 10%;
padding: 5px 10px;
border: 1px solid silver;
border-radius: 8px;
box-shadow: 4px 4px 8px 0px silver;
}
code {
font-family: 'Courier New', monospace;
}
A dialog box is defined with a This will be a dialog boxsection tag with a popup class (and a toth classed parent !).
<section class="popup">
<p>This will be a dialog box</p>
</section>
Add a title bar with a header tag, and a bottom bar with a footer tag.
<section class="popup">
<header>Title bar</header>
<p>This will be a dialog box</p>
<footer>bottom bar</footer>
</section>
A div inside the footer let you float the buttons to the right.
With TOTH, the popup's IDs are automaticaly (ie by Javascript) mapped to popupWindow() objects with two methods show() and hide().
To raise a popup, just call it's show() method !
<section class="popup" id="confirmation">
<header>Confirmation</header>
<p>Do you realy want to do that ?</p>
<p>Click OK or Cancel to continue.</p>
<footer>
<div>
<button type="button" onclick="MessageBox('Hello')">OK<button>
<button type="button" onclick="confirmation.hide()">Cancel<button>
</div>
</footer>
</section>
<p>Show the dialog box by clicking this <button onclick="confirmation.show()">button</button></p>
Do you relay want to do that ?
Click OK or Cancel to contiue.
Show the dialog box by clicking this
TOTH define a Javascript function MessageBox(message) to replace the built-in alert() function like .
The title of this dialog box is the title of the page and the message parameter can have HTML tags, it is inserted to the dialog box with the property.