Pure css skinning with menu box and menu

47,564 views

Published on

The presentation we gave together with Mikita Mikado at The First European Day of DotNetNuke in Paris. It show how you can create a nice navigation menu for DotNetNuke.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
47,564
On SlideShare
0
From Embeds
0
Number of Embeds
34,733
Actions
Shares
0
Downloads
67
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Pure css skinning with menu box and menu

  1. 1. Pure CSS skinning with Menu Box and Menu Factory<br />Mikita Mikado<br />Serge Barysiuk<br />6<br />
  2. 2. Coding Staff Inc.<br />Mikita Mikado<br />CEO, Coding Staff Inc.<br />Expertise:<br /><ul><li>DNN Skinning
  3. 3. UI Design
  4. 4. Online Marketing</li></ul>Serge Barysiuk<br />CTO, Coding Staff Inc.<br />Expertise:<br /><ul><li>JavaScript (jQuery, qooxdoo, …)
  5. 5. RIA Development
  6. 6. Application Architecture</li></ul>2<br />
  7. 7. Agenda<br />A new menu platform concept<br />Menu Box how it is<br />A menu theme under the hood and how to create your own<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />3<br />
  8. 8. DotNetNuke design concept<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />4<br />Ability to install a new design with no coding<br />Separation between CMS and site design<br />Design is page-specific<br />Control design of every element of the site with skins and containers<br />
  9. 9. What are the parts of the skin?<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />5<br />Navigation<br />Layout<br />Containers<br />
  10. 10. DotNetNuke skin parts<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />6<br />+<br />+<br />Containers<br />Navigation<br />Skins<br />
  11. 11. DotNetNuke skin parts<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />7<br />Skins & Containers are reusable.<br />Navigation is a part of the skin.<br />
  12. 12. What if we would have…<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />8<br />+<br />+<br />Containers<br />Navigation<br />Skins<br />
  13. 13. … it would be handy.<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />9<br />… and we decided to go custom. Why?!<br />
  14. 14. Problems with existing solutions <br />DNN navigation is time consuming to skin;<br />DNN Navigation is not SEO friendly, not optimized and not flexible;<br />Third party modules are too developer-centric and not-easy to integrate and create a theme.<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />10<br />
  15. 15. 5<br />5 ideas behind the platform<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />11<br />5 the most important ideas behind the platform.<br />
  16. 16. 5 ideas behind the platform<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />12<br />1<br />Menu is a separate part of the skin.<br />
  17. 17. 5 ideas behind the platform<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />13<br />2<br />Menu theme could be shared and <br />easily installed without a need to <br />be a programmer.<br />
  18. 18. 5 ideas behind the platform<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />14<br />3<br />High extensibility in terms of <br />structure, presentation and behavior.<br />
  19. 19. 5 ideas behind the platform<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />15<br />4<br />Easy themes creation reusing <br />thousands of scripts and menus <br />across the web.<br />
  20. 20. 5 ideas behind the platform<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />16<br />5<br />… and finally an open platform to <br />build state of the art menus.<br />
  21. 21. Meet Menu Box<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />17<br />
  22. 22. Menu Box Motto<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />18<br />There are no limitations but your own imagination.<br />
  23. 23. Menu Box Concept<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />19<br />Themes<br />Box<br />Put themes into the box.<br />
  24. 24. Using the module as…<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />20<br />DNN Module<br />Skins Object<br />
  25. 25. Installing a theme<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />21<br />
  26. 26. Using the module for…<br />… main DNN navigation.<br />… sub navigation for inner pages.<br />… site map.<br />… page index.<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />22<br />
  27. 27. Menu Theme<br />23<br />Menu theme under the hood<br />
  28. 28. What is a theme?<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />24<br />+<br />+<br />=<br />Menu Theme<br />Structure<br />(HTML)<br />Presentation<br />(CSS)<br />Behavior<br />(JS)<br />
  29. 29. What is a theme?<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />25<br />Structure<br />(HTML)<br />How theme is rendered.<br />Presentation<br />(CSS)<br />How theme looks like.<br />Behavior<br />(JS)<br />How theme acts.<br />
  30. 30. What is a theme?<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />26<br />css<br />html<br />images<br />js<br />CSS files used for the theme<br />HTML templates to render structure<br />Images used in the theme<br />JavaScript libraries used in the theme<br />skin.xml<br />Theme manifest file<br />
  31. 31. Menu theme manifest<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />27<br />Manifest file connects all them together.<br />Structure<br />(HTML)<br />Presentation<br />(CSS)<br />Theme Manifest<br />(skin.xml)<br />Behavior<br />(JS)<br />
  32. 32. Menu theme manifest (skin.xml)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />28<br />Theme name and additional information<br />HTML templates declaration<br />=<br />JavaScript files and inline scripts declaration<br />Theme Manifest<br />(skin.xml)<br />CSS files declaration<br />
  33. 33. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />29<br />0<br />Theme meta info<br />
  34. 34. Menu theme manifest (skin.xml)<br /><?xml version="1.0" encoding="utf-8"?><br /><skin><br /><skin_id>AnimatedDropdownMenu</skin_id><br /><skin_image>skin_preview.png</skin_image><br /><template_name>Animated Dropdown Menu</template_name><br /><description>Drop down menus are a really convient way to fit a large menu into a really small initial space. This menu based on tutorial by www.clarklab.net. Note: This menu shows only top-level menu items.</description><br /><default>false</default><br /><version>1.0</version><br /> <br />...<br /> <br /></skin><br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />30<br />General information about the theme<br />
  35. 35. Menu themes management<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />31<br />
  36. 36. Structure (HTML)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />32<br />1<br />Structure (HTML)<br />
  37. 37. Structure (HTML)<br />Main points:<br /><ul><li>Easy customizable
  38. 38. Easy understandable</li></ul>Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />33<br />
  39. 39. Structure (HTML)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />34<br />WrapperTemplate.ascx<br />Wrapper<br />Node (Level 1)<br />NodeTemplate.ascx<br />Node (Level 2)<br />Node (Level 2)<br />…<br />Node (Level 1)<br />Node (Level 2)<br />Node (Level 2)<br />…<br />…<br />Node (Level 1)<br />
  40. 40. Structure (HTML)<br /><divclass="<%= CssClass%>"id="<%= ClientContainerID %>"><br /><ulclass="topnav"><br /><asp:repeaterrunat="server"id="Menu"><br /><ItemTemplate><br /><uc:NodeItemrunat="server"Node="<%# Container.DataItem %>“/><br /></ItemTemplate><br /></asp:repeater><br /></ul><br /></div><br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />35<br />WrapperTemplate.ascx<br />
  41. 41. <liclass='<%=(IsActive ? "current" : "") %>'><br /><ahref="<%= Node.NavigateURL %>"><%= Node.Text %></a><br /><% if (HasChildren)<br /> {%><br /><ulclass="subnav"><br /><asp:PlaceHolderrunat="server"ID="phChildNodes"></asp:PlaceHolder><br /></ul><br /><%} %><br /></li><br />Structure (HTML)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />36<br />NodeTemplate.ascx<br />Additional properties: IsLast, IsFirst, Level, Node.*<br />
  42. 42. Registering renderer in manifest<br /><?xmlversion="1.0"encoding="utf-8"?><br /><skin><br />...<br /><html><br /><renderer>html/WrapperTemplate.ascx</renderer><br /></html><br />...<br /></skin><br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />37<br />
  43. 43. Structure (HTML)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />38<br />Done!<br />
  44. 44. Presentation (CSS)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />39<br />2<br />Presentation (CSS)<br />
  45. 45. Presentation (CSS)<br />Main points:<br /><ul><li>No predefined CSS classes names
  46. 46. No any specific about the module, just CSS</li></ul>Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />40<br />
  47. 47. Presentation (CSS)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />41<br />css<br />CSS files used for the theme<br />styles.css<br />theme.css<br />…<br />…<br />
  48. 48. Presentation (CSS)<br /><?xmlversion="1.0"encoding="utf-8"?><br /><skin><br />...<br /><css><br /> <files><br /><file><br /><path>css/styles.css</path><br /></file><br /><file><br /><path>css/theme.css</path><br /></file><br /></files><br /></css><br />...<br /></skin><br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />42<br />
  49. 49. Presentation (CSS)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />43<br />Done!<br />
  50. 50. Behavior (JS)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />44<br />3<br />Behavior (JS)<br />
  51. 51. Behavior (JS)<br />Main points:<br /><ul><li>No limits to particular JS library
  52. 52. Inline scripts support</li></ul>Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />45<br />
  53. 53. Behavior (JS)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />46<br />js<br />JS scripts used for the theme<br />jquery.myplugin.js<br />jquery.hoverIntent.js<br />…<br />…<br />
  54. 54. Behavior (JS)<br /><?xmlversion="1.0"encoding="utf-8"?><br /><skin><br />...<br /><js><br />...<br /><files><br /><file><br /><path>js/jquery.myplugin.js</path><br /></file><br /><file><br /><path>js/jquery.hoverIntetn.js</path><br /></file><br /></files><br /></js><br />...<br /></skin><br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />47<br />
  55. 55. Behavior (JS)<br /><?xmlversion="1.0"encoding="utf-8"?><br /><skin><br />...<br /><js><br /><startup_scripts><br /><script><br /> <data><![CDATA[<br /> $(function(){<br /> $("#{container_id}").myplugin();<br /> });<br /> ]]></data><br /></script><br /></startup_scripts><br /><files>...</files><br /></js><br />...<br /></skin><br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />48<br />Startup scripts is a general way to initialize your menu<br />
  56. 56. Behavior (JS)<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />49<br />Done!<br />
  57. 57. What we got so far…<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />50<br />Structure<br />(HTML)<br />Presentation<br />(CSS)<br />Behavior<br />(JS)<br />Theme Manifest<br />(skin.xml)<br />
  58. 58. Let’s pack them together<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />51<br />css<br />html<br />images<br />js<br />MyTheme<br />MyTheme.zip<br />skin.xml<br />
  59. 59. Custom Menu Theme<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />52<br />Finish!<br />
  60. 60. Developers only?<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />53<br />But… what if I’m a designer, not a developer? <br />Can I still use it?<br />
  61. 61. Good news for you!<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />54<br />Menu Factory - Online menu theme builder.<br />
  62. 62. Menu Factory service<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />55<br />
  63. 63. Menu Factory service<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />56<br />http://factory.codingstaff.com<br />
  64. 64. More sugar<br />Localization support<br />Apollo Localization<br />Ealo Localization components<br />Adequation Localization Extensions<br />LocoponDSLocalizator<br />Conditional comments (for scripts, styles)<br />Side navigation mode<br />A set of built themes<br />Good documentation to get started<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />57<br />
  65. 65. … and even more<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />58<br />It’s free and it’s going to be open sourced!<br />
  66. 66. More information<br />http://www.codingstaff.com<br />http://www.codingstaff.com/blog<br />http://factory.codingstaff.com<br />http://twitter.com/codingstaff<br />Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />59<br />
  67. 67. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory<br />60<br />Thank you!<br />

×