Documentation

What is HSM?

Get started with HSM Framework, easiest framework for building responsive, mobile-first sites for your business.

We made HSM easy to get started making amazing websites for restaurant business. We put together these guides to help you get up and running in no time. These guides include css setup and install, how to use the HSM CSS, JavaScript, accessibility and more.

Why HSM?

HSM is one of the best framework for reatsaurant sites and other small scale businesses. These are some of the best features HSM provies you.

If you want to develop an application or a website promptly, it is imperative to consider using HSM. It helps to save your coding effort by offering less CSS functionality and pre-built blocks of code rather than structuring code from the scratch. Ready-made themes of HSM will help achieve your needs through a faster route.
It helps to save your coding effort by offering less CSS functionality and pre-built blocks of code rather than structuring code from the scratch.
HSM is very easy to use. You just need to download required files and follow the documentation.
Ready-made themes of HSM will help achieve your needs through a faster route.

Where to Start?

Download Visit Github

CSS

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"">

JS

Many of our components require the use of JavaScript function. Specifically, they require jQuery, and our own JavaScript plugins. 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 >

Font Awesome Link

By using an <i> or other HTML element is the easiest way to render any icon from font awesome. Font awesome has lots of food and restaurant related icons which you can use.

In our Framework we have used some font awesome icons. For that you need to put following link to your <head> before all the css links.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

Getting Started