Documentation
Read this before you start using template
Boooya
Revolution Admin Template
Build
v1.0
Development & Design
Name: Dmitry Ivaniuk
Email: aqvatarius@ukr.net
What's Inside?
Files inside downloaded package
In downloaded package you will find this list of files(actual for v1.0):
- - assets /* This files is not important. Used to prettify template preview */
- - css /* All less/css template files */
- - - components /* Main less app files */
- - - fonts /* Folder with icon fonts */
- - - helpers /* Mixins and help classes */
- - - vendor /* Third party(plugins) less/css files */
- - - variables.less /* List of template variables. You can change your color palette here. */
- - - styles.less /* Main template less mixin */
- - img /* Important template images */
- - js /* All js template files */
- - partials /* Template partials */
- - - assets /* Assets for special pages like Bank application etc. */
- - - footers /* Footer variants */
- - - headers /* Header variants */
- - - navigation /* Navigation variants */
- - - sidebars /* Sidebar variants */
- - - sidepanels /* Sidepanels variants */
- - - styles-include.html /* Include template styles */
- - - scripts-include.html /* Include template scripts */
- - - meta-section.html /* Include template meta tags */
- - - heading-elements.html /* Special include in all pages heading / not important for use */
- - *.html /* List of html files with included partials */
- build /* Compiled and ready-to-use template files */
- - assets /* Assets files / not important for use */
- - css /* Main css file and fonts */
- - img /* Important images */
- - js /* JavaScript and third-party plugins */
- - *.html /* Ready to use html files */
- node_modules
- package.json
- gulpfile.js
- bower.json
- .bowerrc
Less/CSS Files
Information about stylesheet files
- - rtl/rtl.less /* Changes for RTL version */
- - app-accordion.less /* Accordion styles */
- - app-alerts.less /* Alert styles */
- - app-blocks-panels.less /* Boooya Block and Bootstrap Panel styles */
- - app-blog.less /* Styles for blog pages */
- - app-buttons.less /* Buttons */
- - app-checkbox-radio.less /* Radio buttons & Checkbox */
- - app-contacts.less /* Contact box styles */
- - app-elements.less /* Content tabs, Heading, Breadcrumb & Pagination */
- - app-faq.less /* FAQ feature styles */
- - app-features.less /* Gallery and Preview feature */
- - app-footer.less /* Footer styles */
- - app-form-elements.less /* Form elements styles */
- - app-header.less /* Header styles */
- - app-labels-badges.less /* Labels and badges styles */
- - app-layout.less /* Layout control styles */
- - app-lists.less /* All lists styles */
- - app-loading.less /* Loading feature styles */
- - app-login.less /* Login page styles */
- - app-messages.less /* Messages styles */
- - app-navigation.less /* All navigations styles */
- - app-other.less /* Other styles */
- - app-progressbars.less /* Progressbars styles */
- - app-spinners.less /* Spinners and loaders styles */
- - app-statusbar.less /* Statusbar feature styles */
- - app-switch-button.less /* Switch button styles */
- - app-tables.less /* Table styles */
- - app-tiles.less /* Tile styles */
- - app-tips.less /* Tips feature styles */
- - app-typography.less /* All typography styles */
- - app-widgets.less /* Widgets styles */
Basic template colors can be changed in css/variables.less. For elements like navigation, footer, header etc. use their less files. Check section How to & Tricks for more information.
JavaScript Files
Information about js files
- - - vendor /* Third party(plugins) js files */
- - - app.js /* Main template js file */
- - - app_plugins.js /* Inits of plugins */
- - - app_faq.js /* Special FAQ plugin */
- - - app_demo.js /* Demo inits / This file is not important */
- - - app_demo_dashboard.js /* Dashboard demo inits / This file is not important */
HTML Structure
Basic html structure for all documents
Less/css can be found in: css/components/app-layout.less
<body>
<div class="app">
<div class="app-container">
<div class="app-content">
...
</div>
</div>
</div>
</body>
App Wrapper
This is main page wrapper
app-loaded - Adds automaticaly when page is loaded. It's enable animations on whole template.
app-sidepanel-open - Adds automaticaly when sidepanel is open.
App Container
This is container that wraps all major elements (sidebars,sidepanels, headers, footers).
Options
app-header-inside-content - Adds automaticaly when header is inside app-content container.
app-sidebar-left-closed - Adds automaticaly when left sidebar is hidden.
app-sidebar-right-closed - Adds automaticaly when right sidebar is hidden.
app-sidebar-left-minimized - Adds automaticaly when left sidebar is minimized.
app-sidebar-right-minimized - Adds automaticaly when right sidebar is minimized.
Important: Classes app-sidebar-left-closed, app-sidebar-right-closed can be used to hide sidebars by default.
Important: Classes app-sidebar-left-minimized, app-sidebar-right-minimized can be used to minimize sidebars by default.
App Content
This is container that wraps content
Options
app-sidebar-left - Adds automaticaly if you use left sidebar.
app-sidebar-right - Adds automaticaly if you use right sidebar.
Important: To prevent content "jumping" before page loaded add this classes to app-content. Only if you use one of this(or both) sidebars.
Header Structure
This is universal panel
Less/css can be found in: css/components/app-header.less
<div class="app-header">
<a href="#" class="app-header-logo">Company</a>
<div class="app-header-title">
<h1><span class="icon-document"></span> Header With Title</h1>
</div>
<ul class="app-header-buttons">
<li>...</li>
</ul>
<form class="app-header-search" action="" method="post">
<input type="text" name="keyword" placeholder="Search">
</form>
<div class="app-header-navigation">
<nav>
<ul>
<li>
<a href="#">First Level</a>
<ul>
<li><a href="#">Second Level</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
Elements
app-header-logo - Header logo container. Add class app-header-logo-condensed to get condensed width.
app-header-title - Header title container.
app-header-buttons - Special button panel for header. Can be aligned to right side using default pull-right class.
app-header-search - Predefined search form.
app-header-navigation - Header navigation. Add class app-header-navigation-hover to add background on hover.
Important: Code preview is to show all elements that can be used in header. Combine this elements and use that what you need.
Sidebar Structure
Use this container for navigation or whatever you want
Less/css can be found in: css/components/app-layout.less
<div class="app-sidebar">
...
</div>
Options
dir-left - Add this class to app-sidebar to get left side position.
dir-right - Add this class to app-sidebar to get right side position.
Important: Check HTML Structure > App Container to get more information about sidebar states.
Event Listeners
data-sidebar-toggle=".app-sidebar.dir-left" - use this attribute with sidebar selector value to toggle sidebar.
data-sidebar-minimize=".app-sidebar.dir-left" - use this attribute with sidebar selector value to minimize sidebar.
Sidepanel Structure
Data container hidden by default
Less/css can be found in: css/components/app-layout.less
Wrapper for this feature is app.
<div class="app-sidepanel">
<div class="container">
...
</div>
</div>
Options
data-overlay="show" - Add this attribute to app-sidepanel to add overlay on sidepanel opened. In this case dont forget to add overlay code:
<div class="app-overlay"></div>
Content Structure
Container for your content is very powerfull
Less/css can be found in: css/components/app-layout.less
<div class="app-content">
<div class="container">
...
</div>
</div>
This structure is basic for template content.
Here some extra content features:
Resizable Content
Separate your content with resize function.
<div class="app-content app-content-resizable">
<div class="app-content-resizable-column" style="width: 30%;">
</div>
<div class="app-content-resizable-column" style="width: 70%;">
</div>
</div>
This structure will give you a possibility to resize columns.
Tabbed Content
Simple example of tabbed content.
<div class="app-content">
<div class="app-content-tabs">
<ul>
<li>
<a href="#tab-1" class="active">
<span class="icon-home"></span>
Tab Name
<span class="fa fa-times close-tab"></span>
</a>
</li>
...
</ul>
</div>
<div class="container app-content-tab active" id="tab-1"></div>
</div>
This structure will give you a possibility to use tabbed content.
Separated Content
Separate your content with columns.
<div class="app-content">
<div class="app-content-separate app-content-separated-left">
<div class="app-content-separate-left">...</div>
<div class="app-content-separate-content">..</div>
</div>
</div>
Options
app-content-separated-left, app-content-separated-right - Add this classes to app-content-separate in case of usage left or right columns.
data-separate-control-height="true" - Add this attribute to app-content-separate-* if you need to set 100% height of content.
Block
Main container for your data, much better then bootstrap panel
Less/css can be found in: css/components/app-blocks-panels.less
<div class="block">
...
</div>
<div class="block block-condensed">
<div class="block-heading">...</div>
<div class="block-content">...</div>
<div class="block-footer">...</div>
</div>
Its not important to use block-heading, block-footer, but in this case you need to add top padding to block-content like block-content padding-top-20.
Options
block-highlight - Highlight block.
block-highlight-hover - Highlight block on hover.
block-condensed - Removes padding.
block-condensed-v - Removes vertical padding.
block-condensed-h - Remove horizontal padding.
block-primary, block-success, block-warning, block-danger, block-info - Adds top border with state color.
block-arrow-top, block-arrow-bottom - Adds top/bottom arrow.
Functions
app.block.delete( ElementBlock, Callback ); - Remove block function.
app.block.toggle( ElementBlock, Callback ); - Toggle block content function. Available only in case of use block-condensed mode.
app.block.expand( ElementBlock ); - Expand block function.
Dividers
This feature available only in case of use block-condensed mode
<div class="block block-condensed">
<div class="block-content">...</div>
<div class="block-divider"></div>
<div class="block-content">...</div>
<div class="block-divider-text">
Block divider text
</div>
</div>
Add icon to block-divier to get line with icon. Use dir-left, dir-right to change icon position.
Preview Accordion
Accordion
Custom accordion function with cool functionality
Less/css can be found in: css/components/app-accordion.less
<div class="app-accordion">
<div class="item">
<div class="heading">
<div class="title">...</div>
</div>
<div class="content">
<div class="block">
....
</div>
</div>
</div>
</div>
Options
data-type="full-height" - Set this attribute to get accordion height from parent div.
data-open="close-other" - Close other item when new opened.
Preview Accordion
Widgets
Prettify your information and show it like a boss
Less/css can be found in: css/components/app-widgets.less
Widget Tile
<div class="app-widget-tile">
<div class="line">
<div class="title">...</div>
</div>
<div class="intval">...</div>
</div>
Elements
line - Basic line for information.
intval - Large text or numbers. <small> tag supported. Add intval-lg to make it bigger.
icon - icon container. Add icon-lg to icon to make it bigger.
Options
app-widget-tile-primary, app-widget-tile-success, app-widget-tile-info, app-widget-tile-warning, app-widget-tile-danger - Custom styles for widget tile.
Widget Button
<a href="#" class="app-widget-button">
<span class="icon-home"></span>
</a>
Options
app-widget-button-primary, app-widget-button-info, app-widget-button-success, app-widget-button-warning, app-widget-button-danger - Custom styles form widget button.
app-widget-button-bordered - Adds dashed border.
app-widget-button-ghost - Adds shadow to button.
Widget Informer
<div class="app-widget-informer">
<div class="title">...</div>
<div class="intval">...</div>
<div class="subtitle">...l</div>
</div>
Elements
title - Basic title.
intval - Large text or number. <small> tag supported.
tynyintval - Small text or number..
icon - icon container. Add icon-lg to icon to make it bigger.
Preview Widgets & Informers
Basic List
Simple and special listing
Less/css can be found in: css/components/app-lists.less
Use basic list-group bootstrap listing markup.
Options
list-group-noborder - Removes border from listing elements.
list-group-condensed - Removes border and background, looks like links list.
list-group-inline - Aline all items. Recomended to use bootstrap grid elements(col-md-*,col-sm-*,etc.).
list-group-adapt-top, list-group-adapt-side, list-group-adapt-bottom - Classes that helps you adapt list inside blocks or panels.
Preview Basic Lists
User & Contacts
Special elements to display user information
Less/css can be found in: css/components/app-contacts.less
<div class="contact">
<img src="assets/images/users/user_1.jpg">
<div class="contact-container">
<a href="#">Name</a>
<span>Information</span>
</div>
<div class="contact-controls">
<button class="btn btn-default btn-icon"><span class="fa fa-home"></span></button>
</div>
</div>
Options
contact-bordered - Adds border to image.
contact-rounded - Rounded corners on image.
contact-dir-right - Right image position.
status-offline, status-online, status-away - Adds status marker on image.
contact-lg, contact-xlg - Custom sizes of contact image.
contact-single - another way to show image.
Preview User & Contacts
Tiles
List of tiles with different features
Less/css can be found in: css/components/app-tiles.less
<div class="tile-basic">
<div class="tile-content">
<div class="tile-image">
<img src="assets/images/preview/img-1.jpg" alt="">
<div class="tile-image-title">
<a href="#" class="tile-title">Image Title</a>
<div class="tile-image-hover">
<div class="tile-image-container-vertical text-center">
<button type="button" class="btn btn-primary btn-icon"><span class="icon-home"></span></button>
</div>
</div>
</div>
</div>
<div class="tile-icon">
<span class="icon-home"></span>
</div>
<h3 class="tile-title">Title</h3>
<span class="tile-subtitle">Subtitle</span>
<p>Information</p>
</div>
</div>
Options
tile-title-underlined - Add to tile-title to get title underlined.
tile-basic-icon-top - Add to tile-basic to get icon half on top.
tile-icon-bg - Add to tile-icon to get background under icon.
tile-image-dir-top - Add to tile-image-title to get top direction of image title.
tile-image-title-hover - Add to tile-image-title to get it visible on hover.
tile-image-hover-light - Add to tile-image-hover to get light hover background.
Preview Tiles
News & Info
Lists with news and other information
Less/css can be found in: css/components/app-lists.less
<div class="listing">
<div class="listing-item">...</div>
</div>
Options
listing-item-with-icon - Add this class to listing to use icons inside items. Add dir-right to set right direction for icon.
Preview News & Info
Compact Gallery
You can use this feature to save space
Less/css can be found in: css/components/app-features.less
<ul class="app-feature-gallery">
<li>...</li>
</ul>
Where each slide is <li></li>. You can use blocks, basic tiles or whatever you want inside.
Options
app-feature-gallery-horizontal - Wrap gallery into div with this class to get horizontal mode. Add class dir-left to this wrapper to get left direction
Preview Compact Gallery
Compact Gallery
You can use this feature to save space
Less/css can be found in: css/components/app-features.less
<div class="app-tip">Information</div>
Options
app-tip-primary, app-tip-info, app-tip-success, app-tip-warning, app-tip-danger - Custom style for tip.
app-tip-runing - Add this class to get runing right to left tip.
app-tip-noborder - Add this class to remove border from tip.
app-tip-runner-right - Add this class to app-tip-runner to get running tip left to right.
app-tip-speed-slow - Add this class to app-tip-runner to get speed slower.
Preview Tips
Loading
LoadingCustom feature to show your loading state
Less/css can be found in: css/components/app-loading.less
Functions
app.loading(action, params); - App loading function.
action (string) - allowed:
show - creates new loading layer
update - update exist layer
destroy - destroy exist layer.
params (array) - allowed:
value (array) - start and end point of loading state. Example: [0,50] (50%).
position (string): top(default), bottom.
state (string): primary, success, info, warning, danger.
speed (int): 20(default)
Preview Loading
Status Bar
Notify your customers in new way
Less/css can be found in: css/components/app-statusbar.less
This feature works like bootstrap modal window. Create your box and show it using trigger.
<div class="app-statusbar" id="statusbar_id">
<div class="app-statusbar-icon"><div class="app-spinner loading"></div></div>
<div class="app-statusbar-text">...</div>
<div class="app-statusbar-close fa fa-times"></div>
</div>
Options
app-statusbar-primary, app-statusbar-success, app-statusbar-info, app-statusbar-warning, app-statusbar-danger - Add this class to app-statusbar to get custom style.
app-statusbar-body - Use this element inside app-statusbar as container for form elements.
Preview Status Bar
Preview
Extra feature for preview your data
Preview feature based on bootstrap modal window. Javascript function will help you to build preview modal as fast as it possible.
This code is important:
<div class="modal fade" id="preview" tabindex="-1" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="icon-cross"></span></button>
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
</div>
Options
preview - Add this class to activate trigger(on click).
data-preview-image="image_path" - Add this attribute to button to get this image into preview.
data-preview-video="video_path" - Add this attribute to button to get this video into preview.
data-preview-href="data_path" - Add this attribute to button to get html into preview.
data-preview-size="modal_size" - Add this attribute to button. Set modal size. Available: modal-lg, modal-sm, modal-fw
Preview "Preview" :P
How to & Tricks
This section will help you understend how it works
How to start work with template?
1. Unarchive template files on your local directory.
1.1. Use compiled build folder.
1.2. Use lesscss dev folder.
2. Open blank.html file and start your project.
How to change template colors?
First of all open css/variables.less, js/app.js. In this two files you will find basic variables for template. Changes in this files will change basic elements of template.
If you need to change (navigation, footer, header) elements style, or you want to add new themes use this elements files and functions inside. For example:
Open file css/components/app-navigation.less and change colors there.
Also you can add new theme style using lesscss function .app-navigation-style-build(...);. Example of usage you can find on line 133.
More information
Contact me: aqvatarius@ukr.net / Dmitry Ivaniuk
Boooya
The innovation in admin template design. You will save hundred hours while working with our template. That is based on latest technologies and understandable for all.
How?
This template included with thousand of best components, that really help you to build awesome design.
About Us
Need Help?
Latest News
Quod quam magnum sit fictae veterum fabulae declarant, in quibus tam multis.
In quibus tam multis tamque variis ab ultima antiquitate repetitis tria.
Notifications
7 new, latest: July 19, 2016 at 10:14:32.
#SPW-955-18 to st. StreetName SA, USA.
19/07/2016 10:14:32 AM
Payment for order #SPW-955-17: $145.44.
19/07/2016 09:55:12 AM
Added new order, waiting for payment. Order details.
19/07/2016 09:51:55 AM
Product: Extra Awesome Product (amount: 2). Storehouse.
19/07/2016 08:30:00 AM
#SPW-955-18 to st. StreetName SA, USA.
18/07/2016 06:14:32 PM
Settings
Notification Settings