Pure css skinning with menu box and menu

1. European Day of DotNetNuke @ Paris - Session

Pure CSS skinning with Menu Box and Menu Factory

Mikita MikadoSerge Barysiuk

6

2

Coding Staff Inc.

Mikita MikadoCEO, Coding Staff Inc.

Expertise: DNN Skinning UI Design Online Marketing

Serge BarysiukCTO, Coding Staff Inc.

Expertise: JavaScript (jQuery,

qooxdoo, …) RIA Development Application Architecture

3

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 skinning with Menu Box and Menu Factory

4

DotNetNuke design concept

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

• 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

5

What are the parts of the skin?

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Containers

Navigation

Layout

6

DotNetNuke skin parts

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Skins Containers

+ +Navigation

7

DotNetNuke skin parts

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Skins & Containers are reusable.

Navigation is a part of the skin.

8

What if we would have…

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Skins Containers

+ +Navigation

9

… it would be handy.

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

… and we decided to go custom. Why?!

10

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 skinning with Menu Box and Menu Factory

11

5 ideas behind the platform

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

5

5 the most important ideas behind the platform.

12

5 ideas behind the platform

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

1

Menu is a separate part of the skin.

13

5 ideas behind the platform

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

2

Menu theme could be shared and easily installed without a need to

be a programmer.

14

5 ideas behind the platform

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

3

High extensibility in terms of structure, presentation and behavior.

15

5 ideas behind the platform

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

4

Easy themes creation reusing thousands of scripts and menus

across the web.

16

5 ideas behind the platform

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

5

… and finally an open platform to build state of the art menus.

17

Meet Menu Box

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

18

Menu Box Motto

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

There are no limitations but your own imagination.

19

Menu Box Concept

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

ThemesBox

Put themes into the box.

20

Using the module as…

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

DNN Module Skins Object

21

Installing a theme

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

22

Using the module for…

• … main DNN navigation.• … sub navigation for inner pages.• … site map.• … page index.

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

23

Menu Theme

Menu theme under the hood

24

What is a theme?

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

+ +=Menu Theme Structure

(HTML)Presentation

(CSS)Behavior

(JS)

25

What is a theme?

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Structure(HTML)

Presentation(CSS)

Behavior(JS)

How theme is rendered.

How theme looks like.

How theme acts.

26

What is a theme?

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

css

html

images

js

skin.xml

CSS files used for the theme

HTML templates to render structure

Images used in the theme

JavaScript libraries used in the theme

Theme manifest file

27

Menu theme manifest

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Manifest file connects all them together.

Structure(HTML)

Presentation(CSS)

Behavior(JS)

Theme Manifest(skin.xml)

28

Menu theme manifest (skin.xml)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Theme name and additional information

HTML templates declaration

JavaScript files and inline scripts declaration

CSS files declaration

Theme Manifest(skin.xml)

=

29Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

0 Theme meta info

30

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 skinning with Menu Box and Menu Factory

General information about the theme

31

Menu themes management

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

32

Structure (HTML)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

1 Structure (HTML)

33

Structure (HTML)

Main points:- Easy customizable- Easy understandable

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

34

Structure (HTML)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

WrapperNode (Level 1)

Node (Level 2)

Node (Level 2)

Node (Level 2)

Node (Level 2)

Node (Level 1)

…

……

Node (Level 1)

WrapperTemplate.ascx

NodeTemplate.ascx

35

Structure (HTML)

<div class="<%= CssClass%>" id="<%= ClientContainerID %>">

<ul class="topnav">

<asp:repeater runat="server" id="Menu">

<ItemTemplate>

<uc:NodeItem runat="server" Node="<%# Container.DataItem %>“/>

</ItemTemplate>

</asp:repeater>

</ul>

</div>

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

WrapperTemplate.ascx

36

<li class='<%=(IsActive ? "current" : "") %>'>

<a href="<%= Node.NavigateURL %>"><%= Node.Text %></a>

<% if (HasChildren)

{%>

<ul class="subnav">

<asp:PlaceHolder runat="server" ID="phChildNodes"></asp:PlaceHolder>

</ul>

<%} %></li>

Structure (HTML)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

NodeTemplate.ascx

Additional properties: IsLast, IsFirst, Level, Node.*

37

Registering renderer in manifest

<?xml version="1.0" encoding="utf-8"?>

<skin>

...

<html>

<renderer>html/WrapperTemplate.ascx</renderer>

</html>

...

</skin>

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

38

Structure (HTML)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Done!

39

Presentation (CSS)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

2 Presentation (CSS)

40

Presentation (CSS)

Main points:- No predefined CSS classes names- No any specific about the module, just CSS

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

41

Presentation (CSS)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

css CSS files used for the theme

styles.css

theme.css

…

…

42

Presentation (CSS)

<?xml version="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 skinning with Menu Box and Menu Factory

43

Presentation (CSS)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Done!

44

Behavior (JS)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

3 Behavior (JS)

45

Behavior (JS)

Main points:- No limits to particular JS library- Inline scripts support

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

46

Behavior (JS)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

js JS scripts used for the theme

jquery.myplugin.js

jquery.hoverIntent.js

…

…

47

Behavior (JS)

<?xml version="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 skinning with Menu Box and Menu Factory

48

Behavior (JS)

<?xml version="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 skinning with Menu Box and Menu Factory

Startup scripts is a general way to initialize your menu

49

Behavior (JS)

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Done!

50

What we got so far…

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Structure(HTML)

Presentation(CSS)

Behavior(JS)

Theme Manifest(skin.xml)

51

Let’s pack them together

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

css

html

images

js

skin.xml

MyTheme

MyTheme.zip

52

Custom Menu Theme

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Finish!

53

Developers only?

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

But… what if I’m a designer, not a developer?

Can I still use it?

54

Good news for you!

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Menu Factory - Online menu theme builder.

55

Menu Factory service

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

56

Menu Factory service

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

http://factory.codingstaff.com

57

More sugar

• Localization support– Apollo Localization– Ealo Localization components– Adequation Localization Extensions– Locopon DSLocalizator

• 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 skinning with Menu Box and Menu Factory

58

… and even more

Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

It’s free and it’s going to be open sourced!

59

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 skinning with Menu Box and Menu Factory

60Mikita Mikado and Serge Barysiuk: Pure CSS skinning with Menu Box and Menu Factory

Thank you!