Taurus - Responsive Bootstrap3 Admin Template
Clean and responsive flat design
- Created: 06/11/2013
- latest Update: 18/11/2013
- By: Dmitry Ivaniuk
- Email: aqvatarius@gmail.com
HTML structure
Structure of default document
<body>
</body>
Structure of document with custom navigation
<body>
</body>
Check "How to..." section to get more information about themes usage
Header structure
Block usage
Title
Content
This is sample of default block usage. Also available custom block backgrounds and backgrounds of each element.
Block helpers:
.block .block-transparent // each element in block will be transparent
.block .block-white // each element in block will be white
.block .block-fill-white // each element in block will be with white(without transparency)
Header helpers:
.header .header-default // Default header
.header .header-transparent // Transparent header
.header .header-white // Transparent white header
.header .header-fill-white // White background
Toolbar helpers:
.toolbar .toolbar-default // Default toolbar
.toolbar .toolbar-transparent // Transparent toolbar
.toolbar .toolbar-white // Transparent white toolbar
.toolbar .toolbar-fill-white // White background
Content helpers:
.content .content-default // Default content
.content .content-transparent // Transparent content
.content .content-white // Transparent white content
.content .content-fill-white // White background
Footer helpers:
.footer .toolbar-default // Default footer
.footer .toolbar-transparent // Transparent footer
.footer .toolbar-white // Transparent white footer
.footer .toolbar-fill-white // White background
List structure
Custom list structure(Check official site of bootstrap to get information about bootstrap listing)
Simple list:
...
Description
...
Best way to use it, is include list into block > content
List with elements:
...
...
Contacts structure
...
John Doe
...
Contacts with elements:
List statuses:
Messages structure
...
...
Gallery structure
Simple:
...
...
Gallery list:
Thumbnails:
...
Title
Text
...
CSS structure
stylesheets.css is the main CSS file that includes:
@import "bootstrap/bootstrap.min.css";
@import "jquery/jquery-ui.min.css";
@import "icons/font-awesome.min.css";
@import "mcustomscrollbar/jquery.mCustomScrollbar.css";
@import "select2/select2.css";
@import "shbrush/shCoreDefault.css";
@import "shbrush/shThemeDefault.css";
@import "cleditor/jquery.cleditor.css";
@import "codemirror/codemirror.css";
@import "validationengine/validationEngine.css";
@import "fancybox/jquery.fancybox.css";
@import "fullcalendar/fullcalendar.css";
@import "elfinder/elfinder.min.css";
@import "filetree/jqueryFileTree.css";
@import "stylesheet.css";
@import "backgrounds.css";
@import "themes.css";
@import "mystyles.css";
- bootstrap/bootstrap.min.css - bootstrap stylesheets
- jquery/jquery-ui.min.css - jQuery UI custom stylesheets
- icons/font-awesome.min.css - font awesome icons stylesheets
- fullcalendar/fullcalendar.css - full calendar plugin stylesheets
- fancybox/jquery.fancybox.css - fancybox plugin stylesheets
- select2/select2.css - Select2 stylesheets
- validationengine/validationEngine.css - Validation engine stylesheets
- mcustomscrollbar/jquery.mCustomScrollbar.css - Custom scrollbar stylesheets
- cleditor/jquery.cleditor.css - WYSIWYG plugin stylesheets
- shCoreDefault.css, shThemeDefault.css - SyntaxHighlight plugin stylesheets
- elfinder/elfinder.min.css - Elfinder plugin stylesheets
- filetree/jqueryFileTree.css - File Tree plugin stylesheets
- stylesheet.css - Taurus styleshets
- backgrounds.css - backgrounds stylesheet
- themes.css - Themes styleshets(can be cleaned after choose of theme)
- mystyles.css - Your own styles
Javascript structure
Basics
<script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-migrate.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/globalize.js'></script>
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>
<script type='text/javascript' src='js/plugins.js'></script>
<script type='text/javascript' src='js/actions.js'></script>
Uniform plugin
<script type='text/javascript' src='js/plugins/uniform/jquery.uniform.min.js'></script>
Designed form elements: input:checkbox,input:radio
Custom scrollbar
<script type='text/javascript' src='js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
Allows you to use custom content scroller
iButton plugin
<script type='text/javascript' src='js/plugins/ibutton/jquery.ibutton.js'></script>
Allows you to use iButton plugin(styleed checkbox/radio)
Select2 plugin
<script type='text/javascript' src='js/plugins/select2/select2.min.js'></script>
Allows you to use custom select element(custom design of select/select:multiple with search)
Tags input plugin
<script type='text/javascript' src='js/plugins/tagsinput/jquery.tagsinput.min.js'></script>
Allows you to use field with tags
Timepicker addon
<script type='text/javascript' src='js/plugins/jquery/jquery-ui-timepicker-addon.js'></script>
Allows you to use addon for jquery-ui. Timepicker or date-and-time picker.
Notify plugin
<script type='text/javascript' src='js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='js/plugins/noty/themes/default.js'></script>
Allows you to use notify massages. Also check official site of plugin to get more information about usage(direction etc.)
Fancybox plugin
<script type='text/javascript' src='js/plugins/fancybox/jquery.fancybox.pack.js'></script>
Allows you to use popup preview of large image
Knob plugin
<script type='text/javascript' src='js/plugins/knob/jquery.knob.js'></script>
Allows you to use knob circle charts
Flot charts plugin
<script type='text/javascript' src='js/plugins/flot/jquery.flot.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.pie.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.resize.js'></script>
Allows you to use flot charts
Sparkline charts plugin
<script type='text/javascript' src='js/plugins/sparkline/jquery.sparkline.min.js'></script>
Allows you to use sparkline charts
Fullcalendar plugin
<script type='text/javascript' src='js/plugins/fullcalendar/fullcalendar.min.js'></script>
Allows you to use fullcalendar plugin
Google maps plugin
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
Allows you to use Google maps plugin
Datatables plugin
<script type='text/javascript' src='js/plugins/datatables/jquery.dataTables.min.js'></script>
Allows you to use datatables plugin(sortable tables, with paging, search and other controls).
Google maps plugin
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
Allows you to use Google maps plugin
ShBrush plugin
<script type='text/javascript' src='js/plugins/shbrush/XRegExp.js'></script>
<script type='text/javascript' src='js/plugins/shbrush/shCore.js'></script>
<script type='text/javascript' src='js/plugins/shbrush/shBrushXml.js'></script>
<script type='text/javascript' src='js/plugins/shbrush/shBrushJScript.js'></script>
<script type='text/javascript' src='js/plugins/shbrush/shBrushCss.js'></script>
Allows you to use ShBrush plugin(SyntaxHighlighter).
ClEditor plguin
<script type='text/javascript' src='js/plugins/cleditor/jquery.cleditor.min.js'></script>
Allows you to use ClEditor plguin(WYSIWYG editor).
Codemirror plguin
<script type='text/javascript' src='js/plugins/codemirror/codemirror.js'></script>
<script type='text/javascript' src="js/plugins/codemirror/addon/edit/matchbrackets.js"></script>
<script type='text/javascript' src="js/plugins/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script type='text/javascript' src="js/plugins/codemirror/mode/xml/xml.js"></script>
<script type='text/javascript' src="js/plugins/codemirror/mode/javascript/javascript.js"></script>
<script type='text/javascript' src="js/plugins/codemirror/mode/css/css.js"></script>
<script type='text/javascript' src="js/plugins/codemirror/mode/clike/clike.js"></script>
<script type='text/javascript' src="js/plugins/codemirror/mode/php/php.js"></script>
Allows you to use Codemirror plguin(WYSIWYG code editor).
Plupload plguin
<script type='text/javascript' src='js/plugins/plupload/plupload.js'></script>
<script type='text/javascript' src='js/plugins/plupload/plupload.gears.js'></script>
<script type='text/javascript' src='js/plugins/plupload/plupload.silverlight.js'></script>
<script type='text/javascript' src='js/plugins/plupload/plupload.flash.js'></script>
<script type='text/javascript' src='js/plugins/plupload/plupload.browserplus.js'></script>
<script type='text/javascript' src='js/plugins/plupload/plupload.html4.js'></script>
<script type='text/javascript' src='js/plugins/plupload/plupload.html5.js'></script>
<script type='text/javascript' src='js/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js'></script>
Allows you to use Plupload plguin(File uploads plugin).
Elfinder plguin
<script type='text/javascript' src='js/plugins/elfinder/elfinder.min.js'></script>
Allows you to use Elfinder plguin(File manager plugin).
jQuery File Tree plguin
<script type='text/javascript' src='js/plugins/filetree/jqueryFileTree.js'></script>
Allows you to use File Tree plguin.
TinyMCE plguin
<script type='text/javascript' src='js/plugins/tinymce/tinymce.min.js'></script>
Allows you to use TinyMCE plguin(wysiwyg editro).
Taurus javascript
How-to...?
How to start using Taurus template?
- Chose theme and background that you will use, and set default controls. How to do this check it in next part
- Remove from plugins.js all code that commented with (demo)(samples)
- Remove from /js folder files: charts.js, maps.js, settings.js(smaples)
- Remove from /img examples folder. Replace logo with your own. Also You can remove all backgrounds and wallpapers that you doesnt use
- Open css/stylesheet.css and remove part of code commented with /* site settings */ (not important). Also find .container.container-fixed and set width for fixed version of site(by default 1200px)
- Open css/themes.css and remove themes that you doesnt use
- Use component_layout_blank.html as basic HTML file
How to use themes?
All themes you can find in css/themes.css, all background options in backgrounds.css. For example if you choose theme .theme-black and wallpaper .wall-num6:
<body class="wall-num6">
...
</body>
If you need to use fixed content, you should add to .container class .container-fixed
<body class="wall-num6">
...
</body>
Dont forget to change width of fixed content in stylesheet.css(.container.container-fixed)
How to white content?
There two types. 1st is use .block.block-fill-white. 2nd is use custom layout with "white" background(.page-content.page-content-white), there you also shoud use block.block-fill-white, but in this case more available elements.
Also you should to know, that white content support only form elements(example you can find on form_elements.html).
Structure of block with white background same as in default block:
...
...
...
Structure of page with white content same as custom navigation content, but you should also add .page-content-white to .page-content:
<body>
</body>
How to use horizontal navigation?
Horizontal navigation based on Bootstrap3 Navbar. All except second and lower level dropdown. Use ul.dropdown-submenu:
...
For more information how to use Navbar check this page
How to use vertical navigation?
How to collapse vertical navigation?
Vertical navigation collapse available only in Custom Navigation Layout. Collapse controller: .psn-control. Also navigation auto-collapse if width of window is lower than 768, and expand if more than 768.
Check example from component_layout_custom.html:
How to hide elements in panel-sidebar when it collapsed?
You should add class page-navigation-hide to element you want to hide.
How to use header/head in block?
All available items in header:
Title
...
Also you can change background of header. Check this for more information.
All available items in head:
...
head doesnt have default background. So dont forget to set it:
...
...
...
How to use backgrounds?
First of all let's see all available customisible backgrounds(backgrounds.css):
/* eof background images */
...
.bg-light{background-image: url('../img/background/blight.png'); background-position: center top; background-repeat: no-repeat;}
.bg-light-ltr{background-image: url('../img/background/blight_ltr.png'); background-position: left top; background-repeat: no-repeat;}
.bg-light-rtl{background-image: url('../img/background/blight_rtl.png'); background-position: right top; background-repeat: no-repeat;}
.bg-splash-white{background-image: url('../img/background/splash_white.png'); background-position: center top; background-repeat: no-repeat;}
.bg-splash-blue{background-image: url('../img/background/splash_blue.png'); background-position: center top; background-repeat: no-repeat;}
...
/* eof background images */
/* background colors */
.bg-white{background-color: #FFFFFF !important;}
.bg-lblue{background-color: #34A6C8 !important;}
.bg-blue{background-color: #2F80A6 !important;}
.bg-dblue,.bg-default{background-color: #133959 !important;}
.bg-turquoise{background-color: #40BABD !important;}
/* eof background colors */
So, to build your own background you can use class="bg-blue bg-light-ltr" to get blue background with light from left to right.
Also you can add your own colors, and use it for page background or for block > head elements.
How to create a custom scrollbar in block?
...
Important thing to use scrollbar is add for wrapper personal div, and set for it height as on example above.
How to use plugins?
Almost all plugins in template can be called with classes. Samples:
Credits
- jQuery
- jQuery UI
- Twitter Bootstrap
- jQuery fancybox
- jQuery Sparkline charts
- jQuery Knob charts
- Notify plugin
- jQuery DataTables
- jQuery custom content scroller
- jQuery Uniform plugin
- jQuery Select2 plugin
- jQuery TagsInput plugin
- jQuery maskedinput plugin
- jQuery Validation Engine plugin
- jQuery Stepy
- jQuery CLEditor plugin
- SyntaxHighlighter plugin
- jQuery Plupload
- jQuery iButton
- Codemirror plugin
- Fullcalendar plugin
- Elfinder file manager plugin
- File tree plugin
- TinyMCE plugin
Changelog
-
Version 1.0 - 10.11.2013
- Initial release
-
Version 1.1 - 18.11.2013
- Added Tinymce wysiwyg editor
- Added Elfinder file manager
- Added File Tree plugin
- Added sortable and selectable element samples
- Added support form elements on white background
- Added new layout with white background
- Added modal with ajax load content sample
- Added full size modal
- Added draggable modal
- Added modal with white content
- Added messages with white background
- Added on/off series chart sample
- Added auto save site settings(now you can choose theme one per session)
- Updated documentation to v1.1