Download

Download whole framework with all the necessary components.

Download CSS files

Download ready-to-use compiled code to easily add into your project.

Compiled and minified CSS. Download
Compiled and unminified CSS. Download

CSS CDN

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="../css/hsm-min.css" type="text/css"">

<link rel="stylesheet" href="../css/hsm.css" type="text/css"">

Download JavaScript Files :

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, and our own JavaScript plugins.
Download ready-to-use JavaScript code to easily add into your project.

Minified Javacript file. ready-to-use. Download
Unminified Javacript file. ready-to-use. Easy to modify. Download

JS CDN

Place the following <script> s near the end of your pages, right before the closing <body> tag, to enable them. jQuery must come first, and then our JavaScript plugins.

<script src="../js/hsm-min.js">script > </script>

<script src="../js/hsm.js">script ><script>

More Important Things

HTML5 doctype

<!DOCTYPE html>

<html>

...

</html>

Add Responsive Meta Tag

HSM is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1 >

Getting Started