INSPINIA - Responsible Admin Theme

INSPINIA - Documentation
INSPINIA - Responsible Admin Theme

Thank you for purchasing INSPINIA admin theme. If you have any
questions about the template, please feel free to contact us via
email: support@webapplayers.com.
Thanks very much!
Documentation created: 19/05/2014
Latest update: 16/11/2014
By: WebAppLayers Team
For AngularJs documentation go to: Angular documentation.
About the template

INSPINIA has a clean and minimalistic design which helps you create an awesome and powerful
project. It is perfectly designed and precisely prepared. Template was built based on the latest
standards and recommendations. INSPINIA theme is powered by Twitter Bootstrap v3 - the most
popular front-end framework.
Structure
Folders and files
File pack containing INSPINIA template consists of 5 folders and 43 html files (in the main folder).
1. inspinia_admin_theme/
2. Angular_Seed_Project/
3. Angular_version/
4. Landing_Page/
5. LESS/
6. SASS/
7. Static_version/
8. css/
9. css/
10. font-awsome/
11. fonts/
12. img/
13. js/
14. 404.html
15. 500.html
16. angularjs.html
17. badges_labels.html
18. basic_gallery.html
19. boxed_layout.html
20. buttons.html
21. calendar.html
22. carousel.html
23. code_editor.html
24. contacts.html
25. css_animation.html
26. dashboard_2.html
27. dashboard_3.html
28. draggable_panels.html
29. email_template.html
30. empy_page.html
31. faq.html
32. file_manager.html
33. form_advanced.html
34. form_basic.html
35. form_editors.html
36. form_file_upload.html
37. form_wizard.html
38. google_maps.html
39. graph_chartjs.html
40. graph_flot.html
41. graph_morris.html
42. graph_peity.html
43. graph_rickshaw.html
44. graph_sparkline.html
45. grid_options.html
46. icons.html
47. index.html
48. invoice.html
49. invoice_print.html
50. jq_grid.html
51. lockscreen.html
52. login.html
53. mail_compose.html
54. mail_detail.html
55. mailbox.html
56. modal_window.html
57. nestable_list.html
58. notifications.html
59. pin_board.html
60. profile.html
61. project_detail.html
62. projects.html
63. register.html
64. search_result.html
65. skin-config.html
66. table_basic.html
67. table_data_tables.html
68. tabs_panels.html
69. timeline.html
70. typography.html
71. validation.html
72. video.html
73. widgets.html
Main HTML elements

Theme files have almost unchanging structure consisting of:
1. #wrapper main container of body elements.
2. nav .navbar-static-side left navigation menu.
3. #page-wrapper main container for page elements.
4. nav .navbar-static-top top navigation with second menu.
5. .page-heading container with page title and breadcrumb
6. .wrapper-content main container for html elements.
7. .footer main container for footer.

Page Head
Page <head /> contains Metadata, CSS files.
1. <!DOCTYPE html>
2. <head>
3.
4. 

5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>INSPINIA | Page</title>
8.
9. 
10. <link href="css/bootstrap.min.css" rel="stylesheet">
11. <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
12. <link href="css/animate.css" rel="stylesheet">
13. <link href="css/style.css" rel="stylesheet">
14.
15. </head>
Main menu - navigation

Navigation menu with profile submenu.
1. <ul class="nav" id="side-menu">
2. <li class="nav-header">
3. <div class="dropdown profile-element"> <span>
4. <img alt="image" class="img-circle" src="img/profile_small.jpg">
5. </span>
6. <a data-toggle="dropdown" class="dropdown-toggle" href="#">
7. <span class="clear"> <span class="block m-t-xs"> <strong class="font-

bold">David Williams</strong>
8. </span> <span class="text-muted text-xs block">Art Director <b
class="caret"></b></span> </span> </a>
9. <ul class="dropdown-menu animated fadeInRight m-t-xs">
10. <li><a href="profile.html">Profile</a></li>
11. <li><a href="contacts.html">Contacts</a></li>
12. <li><a href="mailbox.html">Mailbox</a></li>
13. <li class="divider"></li>
14. <li><a href="login.html">Logout</a></li>
15. </ul>
16. </div>
17. <div class="logo-element">
18. IN+
19. </div>
20. </li>
21. <li>
22. 
23. </li>
24.
25. </ul>
Second menu
Menu for notifications and primary functions such as logout or global search.
1. <nav class="navbar navbar-static-top " role="navigation">

2. <div class="navbar-header">
3. <a class="navbar-minimalize minimalize-styl-2 btn btn-primary "

href="#"><i class="fa fa-bars"></i> </a>
4. <form role="search" class="navbar-form-custom" method="post"

action="search_results.html">
5. <div class="form-group">
6. <input type="text" placeholder="Search for something..." class="form-

control" name="top-search" id="top-search">
7. </div>
8. </form>
9. </div>
10. <ul class="nav navbar-top-links navbar-right">
11. <li>
12. <span class="m-r-sm text-muted welcome-message">Welcome to

INSPINIA+ Admin Theme.</span>
13. </li>
14. <li class="dropdown">
15. <a class="dropdown-toggle count-info" data-toggle="dropdown"

href="#">
16. <i class="fa fa-envelope"></i> <span class="label label-

warning">16</span>
17. </a>
18. <ul class="dropdown-menu dropdown-messages">
19. <li>
20. <div class="dropdown-messages-box">
21. <a href="profile.html" class="pull-left">

22. <img alt="image" class="img-circle" src="img/a7.jpg">
23. </a>
24. <div class="media-body">
25. <small class="pull-right">46h ago</small>
26. <strong>Mike Loreipsum</strong> started following

<strong>Monica Smith</strong>. <br>
27. <small class="text-muted">3 days ago at 7:58 pm -

10.06.2014</small>
28. </div>
29. </div>
30. </li>
32. <li>
35. <img alt="image" class="img-circle" src="img/a4.jpg">
36. </a>
37. <div class="media-body ">
38. <small class="pull-right text-navy">5h ago</small>
39. <strong>Chris Johnatan Overtunk</strong> started following

<strong>Monica Smith</strong>. <br>
40. <small class="text-muted">Yesterday 1:21 pm -

11.06.2014</small>
41. </div>
42. </div>
43. </li>
45. <li>
48. <img alt="image" class="img-circle" src="img/profile.jpg">
49. </a>
50. <div class="media-body ">
51. <small class="pull-right">23h ago</small>
52. <strong>Monica Smith</strong> love <strong>Kim

Smith</strong>. <br>
53. <small class="text-muted">2 days ago at 2:30 am -

11.06.2014</small>
54. </div>
55. </div>
56. </li>
58. <li>
59. <div class="text-center link-block">
60. <a href="mailbox.html">
61. <i class="fa fa-envelope"></i> <strong>Read All

Messages</strong>
62. </a>
63. </div>
64. </li>
65. </ul>
66. </li>
67. <li class="dropdown">
68. <a class="dropdown-toggle count-info" data-toggle="dropdown"

href="#">
69. <i class="fa fa-bell"></i> <span class="label label-

primary">8</span>
70. </a>
71. <ul class="dropdown-menu dropdown-alerts">
72. <li>
73. <a href="mailbox.html">
74. <div>
75. <i class="fa fa-envelope fa-fw"></i> You have 16 messages
76. <span class="pull-right text-muted small">4 minutes

ago</span>
77. </div>
78. </a>
79. </li>
81. <li>
82. <a href="profile.html">
83. <div>
84. <i class="fa fa-twitter fa-fw"></i> 3 New Followers

ago</span>
86. </div>
87. </a>
88. </li>
90. <li>
91. <a href="grid_options.html">
92. <div>
93. <i class="fa fa-upload fa-fw"></i> Server Rebooted

ago</span>
95. </div>
96. </a>
97. </li>
99. <li>
100. <div class="text-center link-block">
101. <a href="notifications.html">
102. <strong>See All Alerts</strong>
103. <i class="fa fa-angle-right"></i>
104. </a>
105. </div>
106. </li>
107. </ul>
108. </li>
109. <li>
110. <a href="login.html">
111. <i class="fa fa-sign-out"></i> Log out
112. </a>
113. </li>
114. </ul>
115. </nav>
116.
117.
Content
Main content wrapper with page heading and page content.
1. <div class="row wrapper border-bottom white-bg page-heading">
2. <div class="col-lg-9">
3. <h2>This is main title</h2>
4. <ol class="breadcrumb">
5. <li>
6. <a href="index.html">This is</a>
7. </li>
8. <li class="active">
9. <strong>Breadcrumb</strong>
10. </li>
11. </ol>
12. </div>
14. <div class="title-action">
15. <a href="" class="btn btn-primary">This is action area</a>
16. </div>
17. </div>
18. </div>
19. <div class="row">
21. <div class="wrapper wrapper-content">
22.
23. </div>
24. </div>
25. </div>
26.
Skins
Inspinai theme has 4 diferent skins
To change skin you just have to add skin class to body element.
For example: to add skin Inspinia Ultra you just need to add .skin-2 class to body element.
In LESS files skins.less you can find style for the skin. Below is a representation of css classes
demand color skin.
.skin-1 - Blue Light

.skin-2 - Inspinia Ultra
.skin-3 - Yellow/purple
Defaut skin does not need any class
Fixed navbar
Fixed navbar is a top navbar that is sticked on screen.
To add fixed top navbar you just need to add .fixed-nav class to body element. And
replace ..navbar-static-top to .navbar-fixed-top
Fixed footer
Fixed footer is a bottom footer that is sticked on screen.
To add fixed bottom footer you just need to add .fixed class to footer class.
Fixed sidebar
Fixed sidebar is a sidebar that is sticked on screen.
To add fixed sidebar you just need to add .fixed-sidebar class to body element and uncomment
Fixed Sidebar script in inspinia.js file in 60 line. This will run slimScroll plugin to the sidebar element
on load.
When you run fixed sidebar and fixed topbar on demo you will see that sidebar is to shor but this is
only on demo. When you initial run fixed sidebar and top fixed then everything will be fit to the
screen.
Mainly scripts
Core script structure used in ever file.
1. 

2. <script src="js/jquery-2.1.1.js"></script>
3. <script src="js/bootstrap.min.js"></script>
4. <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
5.
6. 
7. <script src="js/inspinia.js"></script>
8. <script src="js/plugins/pace/pace.min.js"></script>
9.
10. <script>
11. $(document).ready(function(){
12. 
13. });
14. </script>
15.
Any Questions?
For further questions visit our profile page (WebAppLayers) on wrapbootstrap.com or contact as with
email: support@webapplayers.com
WebAppLayers 2014 | INSPINIA Admin Theme

INSPINIA - Responsible Admin Theme

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

INSPINIA - Responsible Admin Theme

Загружено:

Авторское право:

Доступные форматы

INSPINIA - Documentation

INSPINIA - Responsible Admin Theme

For AngularJs documentation go to: Angular documentation.

About the template

Main HTML elements

1. #wrapper main container of body elements.

2. nav .navbar-static-side left navigation menu.

3. #page-wrapper main container for page elements.

4. nav .navbar-static-top top navigation with second menu.

5. .page-heading container with page title and breadcrumb

6. .wrapper-content main container for html elements.

7. .footer main container for footer.

4.

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

9.

10. <link href="css/bootstrap.min.css" rel="stylesheet">

11. <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

12. <link href="css/animate.css" rel="stylesheet">

13. <link href="css/style.css" rel="stylesheet">

Main menu - navigation

1. <ul class="nav" id="side-menu">

3. <div class="dropdown profile-element"> <span>

4. <img alt="image" class="img-circle" src="img/profile_small.jpg">

6. <a data-toggle="dropdown" class="dropdown-toggle" href="#">

7. <span class="clear"> <span class="block m-t-xs"> <strong class="font-

9. <ul class="dropdown-menu animated fadeInRight m-t-xs">

10. <li><a href="profile.html">Profile</a></li>

11. <li><a href="contacts.html">Contacts</a></li>

12. <li><a href="mailbox.html">Mailbox</a></li>

13. <li class="divider"></li>

14. <li><a href="login.html">Logout</a></li>

17. <div class="logo-element">

22.

1. <nav class="navbar navbar-static-top " role="navigation">

3. <a class="navbar-minimalize minimalize-styl-2 btn btn-primary "

4. <form role="search" class="navbar-form-custom" method="post"

6. <input type="text" placeholder="Search for something..." class="form-

10. <ul class="nav navbar-top-links navbar-right">

12. <span class="m-r-sm text-muted welcome-message">Welcome to

14. <li class="dropdown">

15. <a class="dropdown-toggle count-info" data-toggle="dropdown"

16. <i class="fa fa-envelope"></i> <span class="label label-

18. <ul class="dropdown-menu dropdown-messages">

20. <div class="dropdown-messages-box">

21. <a href="profile.html" class="pull-left">

24. <div class="media-body">

25. <small class="pull-right">46h ago</small>

26. <strong>Mike Loreipsum</strong> started following

27. <small class="text-muted">3 days ago at 7:58 pm -

31. <li class="divider"></li>

33. <div class="dropdown-messages-box">

34. <a href="profile.html" class="pull-left">

35. <img alt="image" class="img-circle" src="img/a4.jpg">

37. <div class="media-body ">

38. <small class="pull-right text-navy">5h ago</small>

39. <strong>Chris Johnatan Overtunk</strong> started following

40. <small class="text-muted">Yesterday 1:21 pm -

44. <li class="divider"></li>

46. <div class="dropdown-messages-box">

47. <a href="profile.html" class="pull-left">

48. <img alt="image" class="img-circle" src="img/profile.jpg">

50. <div class="media-body ">

51. <small class="pull-right">23h ago</small>