Page 1

Huraga Responsive Admin Template 1.7 Documentation support.walkingpixels.com | www.walkingpixels.com


Huraga Responsive Admin Template 1.7 Documentation

Table of contents 1. Introduction 2. Installation 3. File structure a. HTML b. CSS c. LESS d. Javascript e. PSD 4. Implementation

1. Introduction

Huraga Responsive Admin Template is flat & bold style admin template based on Twitter Bootstrap framework. Most of the code is documented with comments directly in code for easy and fast modification. Please, read it carefully. In case of any doubt about specific parts of code, please take a look at the documented code inside the files themselves or ask us at support.walkingpixels.com.

Twitter Bootstrap We did our best to keep template consistent with original Bootstrap framework. All changes are in separate LESS files and easy to modify. If you are not very familiar with Twitter Bootstrap you should visit official documentation first - http://twitter.github.com/bootstrap/

2. Installation

Template package is sorted in their respective folders so installation is very straightforward. Just copy the content of template into the web root folder. That’s it. Template comes with several predefined colors, just pick your favorite color CSS file. Don’t like it? You can easily change color with LESS - take a look at LESS topic.

3. File structure 3a / HTML HTML structure is pretty straightforward. Easy HTML file represents sets of user interface elements. Don’t forget that many elements are combinable.

support.walkingpixels.com | www.walkingpixels.com

1


Huraga Responsive Admin Template 1.7 Documentation

3b / CSS There are a few CSS files which serves specific purposes. All of them you will find in css folder. These are: »» /css/font/ - All fonts for icons »» /css/plugins/ - CSS styles for 3rd party and jQuery plugins »» /css/huraga-color.css - Compiled LESS into CSS for each color set If you are new to Twitter Bootstrap, we strongly recommend to take a look at it first.

3c / LESS Each element has its own LESS file. »» »» »» »» »» »»

/less/bootstrap/ - Original Bootstrap LESS files /less/custom/ - Template LESS files, mixins and settings /less/demo-styles.less - Live preview styles, you can remove it /less/settings.less - Settings and variables for Bootstrap and Huraga /less/huraga.less - Template styles /less/style.less - Main constructor file

Best thing about LESS is that it allows you easily and very fast modify template style. See the pixel-huraga-settings.less for settings and variables. Whole typography is controled with 2 variables.

Color customization Template color is controlled with several color variables. Just pick your favourite color or copy and modify it to get a new one. Please note, some colors will need more customization based on their brightness, hue and saturation.

3c / Javascript There are three different flavours of javascript files located under js folder: »» »» »» »»

/js/libs/modernizr.js - Web browser feature detection Javascript library including HTML5 enabler for older web browsers. /js/libs/selectivizr.js - JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in IE 6-8. /js/libs/jquery.js - jQuery library fallback if CDN is not available /js/boostrap/ - Original Twitter Bootstrap javascript plugins

support.walkingpixels.com | www.walkingpixels.com

2


Huraga Responsive Admin Template 1.7 Documentation »» /js/plugins/ -Custom 3rd party plugins for jQuery If you are new to some of these plugins, you should visit their homepages for explanation how they work or for more configuration options: »» »» »» »» »» »» »» »» »» »» »»

http://datatables.net/ — jQuery DataTables http://code.google.com/p/flot/ — jQuery Flot Charts http://github.com/filamentgroup/jQuery-Visualize — jQuery Visualize https://github.com/akzhan/jwysiwyg — jQuery jWYSIWYG http://arshaw.com/fullcalendar/ — jQuery FullCalendar http://www.plupload.com/ — jQuery plUpload http://www.steamdev.com/snippet/ — jQuery Snippet https://github.com/xoxco/jQuery-Tags-Input — jQuery TagsInput http://jhollingworth.github.com/bootstrap-wysihtml5 — Bootstrap wysihtml5 http://www.eyecon.ro/bootstrap-colorpicker— Bootstrap colorpicker http://www.eyecon.ro/bootstrap-datepicker — Bootstrap datapicker

3d / PSD There is aleo a PSD file in PSD folder for prototyping and wireframing. »» huraga-design.psd - Layered interface elements.

4. Implementation

The best way how to get familiar with each element is to take a look at code itself. Every party is well documented and with combination with origianl Bootstrap documentation you should not get lost. But if it happens and you don’t know what to do feel free to contact us.

Thank you!

Thank you for purchasing Huraga Responsive Admin Template. If you have any questions or you have find some bugs, feel free to ask us at support.walkingpixels.com. Yours, Walking Pixels Team

support.walkingpixels.com | www.walkingpixels.com

3

walking pixels documentation  
Advertisement