Download

The package

When you download the contents from Github, you will recive a zip file that contains the precompiled version of the framework. Look at the list below to see the contents for the file:

torqueui
├── css
│   ├── framework.css
│   ├── framework.min.css
│   ├── ie.css
│   ├── ie.min.css
│   ├── print.css
│   ├── print.min.css
│   ├── theme.css
│   └── theme.min.css
└── js
    ├── framework.js
    └── framework.min.js

The css folder, is all the CSS that is required for the framework to function. There are minified an unminified version of the code, so it is possible for you to use the uniminified versions during development for easy debugging. The framework is split into two primary files; framework.css files that contain all the structure of the framework. Things like floats, heights, margin and padding. And theme.css files that contain all the coloring and general theming of the framework. The reason for this is to make it easy for you to customize and build your own theme. The ie.css files are files for ie8 and ie7, so the components can function.

The fonts folder and files are the files required for FontAwesome to function. These files are the files that make up the icon font. And should therefor not be deleted.

The last folder js is the Javascript required for some of the components to function. It is things like tabs and dropdowns. The file are available in a minifined and unminified version, for production and development, just like the CSS files.

Installation

After unzipping the files, place the folder inside your project and link to them like the examples below show. The examples below show how to link correctly if all your files are placed inside the torqueui folder in the root of you website.

Note again that jQuery is a requirement.

<!-- Compiled and minified framework CSS -->
<link href="/css/framework.min.css" rel="stylesheet">

<!-- Compiled and minified theme CSS -->
<link href="/css/theme.min.css" rel="stylesheet">

<!-- Compiled and minified print CSS -->
<link href="/assets/css/print.min.css" rel="stylesheet" media="print">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<!-- jQuery is required for Javascript to work -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Compiled and minified framework JavaScript -->
<script src="/js/framework.min.js"></script>

Installation with ie8 and ie7 support

The example below shows how to add partial support for ie8 and ie8. html5shiv.min.js is a Javascript library, that enables the use of HTML5 semantic elements. Like <section></section> and <header></header>. The respond.min.js file is a Javascript library, that enables media queries in older browsers that don't support media queries. Read more about html5shiv and respond.js.

Note again that jQuery is a requirement.

<!-- Compiled and minified framework CSS -->
<link href="/css/framework.min.css" rel="stylesheet">

<!-- Compiled and minified theme CSS -->
<link href="/css/theme.min.css" rel="stylesheet">

<!-- Compiled and minified print CSS -->
<link href="/assets/css/print.min.css" rel="stylesheet" media="print">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <link rel="stylesheet" href="/assets/css/ie.min.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- jQuery is required for Javascript to work -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- Compiled and minified framework JavaScript -->
<script src="/js/framework.min.js"></script>

Local development

Prerequisite

To run the builder and compile the Sass to CSS and run the tests, you need to have Ruby and Nodejs installed.

Ruby is required to install and run Sass and Compass. Nodejs is required to run the task management and build tool Grunt.

When or if you have both installed, you are now able to download the source code from the link above. And with the terminal navigation into the folder where you have extracted the contents of the zip file.

In the folder you will need to run some commands, that will install the last required tools and bundles.

First install bundler, a depency manager and installer for Ruby.

$ gem install bundler

Secondly tell bundler to install. Bundler uses the supplied Gemfile to install all required Ruby dependencies.

$ bundle install

Then tell Nodejs to install a global version of the Grunt commandline tool.

$ npm install -g grunt-cli

And lastly tell Nodejs to install. Nodejs uses the supplied pacage.json to install all the required Nodejs dependencies.

$ npm install

Your system is now ready to develop locally.

Local development commands.

Below is a list of Grunt commands that can be typed into your terminal, in the folder where you extracted the source code.

Start the test server

$ grunt server

Watch the CSS files.

$ grunt

Build all the files for distribution.

$ grunt dist