When we browse the web, we often find really weird stuff. Even among recent stuff. Graphic choices, pure design, typography uses or just usability, are not always of the smartest.
We really don't want that every web page looks like the next one. We like diversity. However, we provide some guidelines to help you build quicker web apps styled "à la Manitou".
Every dealer may want to have his own identity on his website and other marketing material. This is especially true for dealers who distribute several brands. But sometimes, they could be interested in creating a dedicated website or a page where the proximity to the Manitou brand has to be clearly shown.
As we needed a framework for all the tools we release, we thought it can be useful to open it to everyone who would need it (dealer, huge fan, extravagant blogger...). This is also why the framework is hosted on GitHub and that you, users of the Framework, can make pull requests in case something is: wrong, missing or buggy.
All sorts of web applications are developed internally by other services. Quite often, we don't have a lot of time/budget to spend for customization. Moreover, it can make a real difference on users adoption.
The Manitou framework is build on top of several tools:
The front-end framework Bootstrap 4 that brings us a responsive and mobile first grid system and various utilities and pre-built components. Please, read its own documentation.
The Font Awesome Library that gives us a scalable vector icons we can manage as a font. Use its cheatsheet to find the icon you are looking for.
We also use Noto, the most international font family.
HTML 5 Doctype
Every view should be at least structured as follow since the framework uses certain HTML elements and CSS properties that require the use of the HTML 5 Doctype.
For a good SEO and a proper presentation of the website, don't forget to precise metadata and informations in the head of your view.
Here is a sample of a <head> precising data such as the view title, the encoding system, the different favicon references, the description and keywords of the website, its version, the viewport and the places to insert your stylesheets and specific scripts.