Inspinia Layout 6z2t51

INSPINIA - Documentation

INSPINIA - Responsible Theme Thank you for purchasing INSPINIA theme. If you have any questions about the template, please feel free to us via email: [email protected]. 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__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.

├── s.html

25.

├── css_animation.html

26.

├── dashboard_2.html

27.

├── dashboard_3.html

28.

├── draggable_s.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_.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.

├── .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.

├── .html

64.

├── search_result.html

65.

├── skin-config.html

66.

├── table_basic.html

67.

├── table_data_tables.html

68.

├── tabs_s.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 contains Metadata, CSS files. 1.



2.



3. 4.



5.

<meta charset="utf-8">

6.

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

7.



8. 9.



10.



11.



12.



13.



14. 15.



Main menu - navigation Navigation menu with profile submenu. 1. 2. 3. 4. 5. 6. 7.

• <span> <span class="clear"> <span class="block m-t-xs"> <strong class="fontbold">David Williams
  
  8.
  
  <span class="text-muted text-xs block">Art Director
  
  9.
  
  

  
  
  10.
  
  
  • Profile
  
  
  11.
  
  
  • s
  
  
  12.
  
  
  • Mailbox
  
  
  13.
  
  
  • 
    
    14.
    
    
  
  
  15.
  
  

  
  
  16.
  
  
  
  
  17.
  
  
  
  
  18. 19.
  
  IN+
  
  
  20.
  
  


21.


• 
  
  22. 23.
  
  


24. 25.

Second menu Menu for notifications and primary functions such as or global search. 1.



116. 117.

Content Main content wrapper with page heading and page content. 1. 2.



19.



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">

3.

<script src="js/bootstrap.min.js">

4.

<script src="js/plugins/metisMenu/jquery.metisMenu.js">

5. 6.



7.

<script src="js/inspinia.js">

8.

<script src="js/plugins/pace/pace.min.js">

9. 10. 11. 12. 13. 14.

<script> $(document).ready(function(){ });

15.

Any Questions? For further questions visit our profile page (WebAppLayers) on wrapbootstrap.com or as with email: [email protected]

© WebAppLayers 2014 | INSPINIA Theme