CSS

Before you start working with TorqueUI, there are some things that you need to be aware of.

HTML5 Doctype

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.

<!doctype html>
<html>
...
</html>

Mobile first

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.

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

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.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Breakpoints

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.

	Small devices Phones (<767px)	Medium devices Tablets (≥768px)	Large devices Desktops (≥960px)	XLarge devices Desktops (≥1280px)
Identifier	s	m	l	xl
Screen width	300px - 767px	768px - 959px	960px - 1279px	1280px and above

We have implemented the breakpoints in CSS using the excellent Sass library called Breakpoint Slicer, read more about it in the section below.

Breakpoint Slicer

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.

$slicer-breakpoints:  0                 320px      768px     960px      1280px;
//                    ├───────────────────┼─────────┼─────────┼───────────┼─────────>
//Slice #:                      1              2         3          4          5

To use the slices we use the build in funktions in breakpoint slicer; at, from, to and between.

	Slicer usage	Breakpoint equivalent	The resulting media query
at	at(2)	breakpoint(321px 768px)	(min-width: 321px) and (max-width: 768px)
from	from(2)	breakpoint(321px)	(min-width: 321px)
to	to(2)	breakpoint(max-width 768px)	(max-width: 768px)
between	between(2, 4)	breakpoint(321px 1280px)	(min-width: 321px) and (max-width: 1280px)

Below is a simple usage example:

.example {
    display: inline-block;
    @include at(3) {
        display: block;
    }
}


// The resulting CSS code is
.example {
    display: inline-block;
}
@media (min-width: 769px) and (max-width: 960px) {
    .example {
        display: block;
    }
}

Normalize.css

For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.