Your SlideShare is downloading. ×
Pure css skinning with menu box and menu
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Pure css skinning with menu box and menu

46,151
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.

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
46,151
On Slideshare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Pure CSS skinning with Menu Box and Menu Factory
    Mikita Mikado
    Serge Barysiuk
    6
  • 2. Coding Staff Inc.
    Mikita Mikado
    CEO, Coding Staff Inc.
    Expertise:
    • DNN Skinning
    • 3. UI Design
    • 4. Online Marketing
    Serge Barysiuk
    CTO, Coding Staff Inc.
    Expertise:
    • JavaScript (jQuery, qooxdoo, …)
    • 5. RIA Development
    • 6. Application Architecture
    2
  • 7. Agenda
    A new menu platform concept
    Menu Box how it is
    A menu theme under the hood and how to create your own
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    3
  • 8. DotNetNuke design concept
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    4
    Ability to install a new design with no coding
    Separation between CMS and site design
    Design is page-specific
    Control design of every element of the site with skins and containers
  • 9. What are the parts of the skin?
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    5
    Navigation
    Layout
    Containers
  • 10. DotNetNuke skin parts
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    6
    +
    +
    Containers
    Navigation
    Skins
  • 11. DotNetNuke skin parts
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    7
    Skins & Containers are reusable.
    Navigation is a part of the skin.
  • 12. What if we would have…
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    8
    +
    +
    Containers
    Navigation
    Skins
  • 13. … it would be handy.
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    9
    … and we decided to go custom. Why?!
  • 14. Problems with existing solutions
    DNN navigation is time consuming to skin;
    DNN Navigation is not SEO friendly, not optimized and not flexible;
    Third party modules are too developer-centric and not-easy to integrate and create a theme.
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    10
  • 15. 5
    5 ideas behind the platform
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    11
    5 the most important ideas behind the platform.
  • 16. 5 ideas behind the platform
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    12
    1
    Menu is a separate part of the skin.
  • 17. 5 ideas behind the platform
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    13
    2
    Menu theme could be shared and
    easily installed without a need to
    be a programmer.
  • 18. 5 ideas behind the platform
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    14
    3
    High extensibility in terms of
    structure, presentation and behavior.
  • 19. 5 ideas behind the platform
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    15
    4
    Easy themes creation reusing
    thousands of scripts and menus
    across the web.
  • 20. 5 ideas behind the platform
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    16
    5
    … and finally an open platform to
    build state of the art menus.
  • 21. Meet Menu Box
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    17
  • 22. Menu Box Motto
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    18
    There are no limitations but your own imagination.
  • 23. Menu Box Concept
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    19
    Themes
    Box
    Put themes into the box.
  • 24. Using the module as…
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    20
    DNN Module
    Skins Object
  • 25. Installing a theme
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    21
  • 26. Using the module for…
    … main DNN navigation.
    … sub navigation for inner pages.
    … site map.
    … page index.
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    22
  • 27. Menu Theme
    23
    Menu theme under the hood
  • 28. What is a theme?
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    24
    +
    +
    =
    Menu Theme
    Structure
    (HTML)
    Presentation
    (CSS)
    Behavior
    (JS)
  • 29. What is a theme?
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    25
    Structure
    (HTML)
    How theme is rendered.
    Presentation
    (CSS)
    How theme looks like.
    Behavior
    (JS)
    How theme acts.
  • 30. What is a theme?
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    26
    css
    html
    images
    js
    CSS files used for the theme
    HTML templates to render structure
    Images used in the theme
    JavaScript libraries used in the theme
    skin.xml
    Theme manifest file
  • 31. Menu theme manifest
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    27
    Manifest file connects all them together.
    Structure
    (HTML)
    Presentation
    (CSS)
    Theme Manifest
    (skin.xml)
    Behavior
    (JS)
  • 32. Menu theme manifest (skin.xml)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    28
    Theme name and additional information
    HTML templates declaration
    =
    JavaScript files and inline scripts declaration
    Theme Manifest
    (skin.xml)
    CSS files declaration
  • 33. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    29
    0
    Theme meta info
  • 34. Menu theme manifest (skin.xml)
    <?xml version="1.0" encoding="utf-8"?>
    <skin>
    <skin_id>AnimatedDropdownMenu</skin_id>
    <skin_image>skin_preview.png</skin_image>
    <template_name>Animated Dropdown Menu</template_name>
    <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>
    <default>false</default>
    <version>1.0</version>
     
    ...
     
    </skin>
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    30
    General information about the theme
  • 35. Menu themes management
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    31
  • 36. Structure (HTML)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    32
    1
    Structure (HTML)
  • 37. Structure (HTML)
    Main points:
    • Easy customizable
    • 38. Easy understandable
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    33
  • 39. Structure (HTML)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    34
    WrapperTemplate.ascx
    Wrapper
    Node (Level 1)
    NodeTemplate.ascx
    Node (Level 2)
    Node (Level 2)

    Node (Level 1)
    Node (Level 2)
    Node (Level 2)


    Node (Level 1)
  • 40. Structure (HTML)
    <divclass="<%= CssClass%>"id="<%= ClientContainerID %>">
    <ulclass="topnav">
    <asp:repeaterrunat="server"id="Menu">
    <ItemTemplate>
    <uc:NodeItemrunat="server"Node="<%# Container.DataItem %>“/>
    </ItemTemplate>
    </asp:repeater>
    </ul>
    </div>
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    35
    WrapperTemplate.ascx
  • 41. <liclass='<%=(IsActive ? "current" : "") %>'>
    <ahref="<%= Node.NavigateURL %>"><%= Node.Text %></a>
    <% if (HasChildren)
    {%>
    <ulclass="subnav">
    <asp:PlaceHolderrunat="server"ID="phChildNodes"></asp:PlaceHolder>
    </ul>
    <%} %>
    </li>
    Structure (HTML)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    36
    NodeTemplate.ascx
    Additional properties: IsLast, IsFirst, Level, Node.*
  • 42. Registering renderer in manifest
    <?xmlversion="1.0"encoding="utf-8"?>
    <skin>
    ...
    <html>
    <renderer>html/WrapperTemplate.ascx</renderer>
    </html>
    ...
    </skin>
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    37
  • 43. Structure (HTML)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    38
    Done!
  • 44. Presentation (CSS)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    39
    2
    Presentation (CSS)
  • 45. Presentation (CSS)
    Main points:
    • No predefined CSS classes names
    • 46. No any specific about the module, just CSS
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    40
  • 47. Presentation (CSS)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    41
    css
    CSS files used for the theme
    styles.css
    theme.css


  • 48. Presentation (CSS)
    <?xmlversion="1.0"encoding="utf-8"?>
    <skin>
    ...
    <css>
    <files>
    <file>
    <path>css/styles.css</path>
    </file>
    <file>
    <path>css/theme.css</path>
    </file>
    </files>
    </css>
    ...
    </skin>
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    42
  • 49. Presentation (CSS)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    43
    Done!
  • 50. Behavior (JS)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    44
    3
    Behavior (JS)
  • 51. Behavior (JS)
    Main points:
    • No limits to particular JS library
    • 52. Inline scripts support
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    45
  • 53. Behavior (JS)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    46
    js
    JS scripts used for the theme
    jquery.myplugin.js
    jquery.hoverIntent.js


  • 54. Behavior (JS)
    <?xmlversion="1.0"encoding="utf-8"?>
    <skin>
    ...
    <js>
    ...
    <files>
    <file>
    <path>js/jquery.myplugin.js</path>
    </file>
    <file>
    <path>js/jquery.hoverIntetn.js</path>
    </file>
    </files>
    </js>
    ...
    </skin>
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    47
  • 55. Behavior (JS)
    <?xmlversion="1.0"encoding="utf-8"?>
    <skin>
    ...
    <js>
    <startup_scripts>
    <script>
    <data><![CDATA[
    $(function(){
    $("#{container_id}").myplugin();
    });
    ]]></data>
    </script>
    </startup_scripts>
    <files>...</files>
    </js>
    ...
    </skin>
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    48
    Startup scripts is a general way to initialize your menu
  • 56. Behavior (JS)
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    49
    Done!
  • 57. What we got so far…
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    50
    Structure
    (HTML)
    Presentation
    (CSS)
    Behavior
    (JS)
    Theme Manifest
    (skin.xml)
  • 58. Let’s pack them together
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    51
    css
    html
    images
    js
    MyTheme
    MyTheme.zip
    skin.xml
  • 59. Custom Menu Theme
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    52
    Finish!
  • 60. Developers only?
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    53
    But… what if I’m a designer, not a developer?
    Can I still use it?
  • 61. Good news for you!
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    54
    Menu Factory - Online menu theme builder.
  • 62. Menu Factory service
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    55
  • 63. Menu Factory service
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    56
    http://factory.codingstaff.com
  • 64. More sugar
    Localization support
    Apollo Localization
    Ealo Localization components
    Adequation Localization Extensions
    LocoponDSLocalizator
    Conditional comments (for scripts, styles)
    Side navigation mode
    A set of built themes
    Good documentation to get started
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    57
  • 65. … and even more
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    58
    It’s free and it’s going to be open sourced!
  • 66. More information
    http://www.codingstaff.com
    http://www.codingstaff.com/blog
    http://factory.codingstaff.com
    http://twitter.com/codingstaff
    Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    59
  • 67. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory
    60
    Thank you!