Before you start working with TorqueUI, there are some things that you need to be aware of.
We use certain markup elements and CSS styling properties, that require your document to be written with the HTML5 doctype. To do this check out the code below. The code snippet is a short code seqment, that should be at the beginning of all the HTML files on which you wish to use TorqueUI. It is a HTML5 dokument declaration, that tells the browser how to render a page.
TorqueUI is built with the primary focus on mobile devices. So instead of mobile styles beeing a extra addon of the framework, they are the core concept and focus of the project.
TorqueUI is in other words built around the design concept called Mobile first.
To ensure the correct rendering and touch zooming or pinching as we know it from multi touch devices, it is important to add the viewport meta tag to the page that use TorqueUI. The code below shows the code you should add to the head part of your HTML documents.
With TorqueUI it is possible to disable user zooming. We how ever do not recommend doing this. The example below shows the same meta tag as above, but with the zomming disabled by adding user-scalable=no.
With the TorqueUI we have decided to work with 4 breakpoints. The breakpoints are based around the major device sizes; Phone, tablets, desktop and wide desktops with HD (or better) quality screens.
We have implemented the breakpoints in CSS using the excellent Sass library called Breakpoint Slicer, read more about it in the section below.
Breapoint Slicer is a great tool build with Sass, and it has a great and simple readme that makes it really easy to follow. You can see the readme and the library here: Breakpoint Slicer on Github. Below is a small snippet, that shows how we have setup Breakpoint Slicer in TorqueUI.
We have setup 4 breakpoints that give 5 breakpoint slices.
To use the slices we use the build in funktions in breakpoint slicer; at, from, to and between.
For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.