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


• 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?


Containers

Navigation

Layout

6

DotNetNuke skin parts


Skins Containers

+ +Navigation

7

DotNetNuke skin parts


Skins & Containers are reusable.

Navigation is a part of the skin.

8

What if we would have…


Skins Containers

+ +Navigation

9

… it would be handy.


… 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.


11

5 ideas behind the platform


5

5 the most important ideas behind the platform.

12



1

Menu is a separate part of the skin.

13



2

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

be a programmer.

14



3

High extensibility in terms of structure, presentation and behavior.

15



4

Easy themes creation reusing thousands of scripts and menus

across the web.

16



5

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

17

Meet Menu Box


18

Menu Box Motto


There are no limitations but your own imagination.

19

Menu Box Concept


ThemesBox

Put themes into the box.

20

Using the module as…


DNN Module Skins Object

21

Installing a theme


22

Using the module for…

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


23

Menu Theme

Menu theme under the hood

24

What is a theme?


+ +=Menu Theme Structure

(HTML)Presentation

(CSS)Behavior

(JS)

25

What is a theme?


Structure(HTML)

Presentation(CSS)

Behavior(JS)

How theme is rendered.

How theme looks like.

How theme acts.

26

What is a theme?


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


Manifest file connects all them together.

Structure(HTML)

Presentation(CSS)

Behavior(JS)

Theme Manifest(skin.xml)

28

Menu theme manifest (skin.xml)


Theme name and additional information

HTML templates declaration

JavaScript files and inline scripts declaration

CSS files declaration


=

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>


General information about the theme

31

Menu themes management


32

Structure (HTML)


1 Structure (HTML)

33

Structure (HTML)

Main points:- Easy customizable- Easy understandable


34

Structure (HTML)


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>


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)


NodeTemplate.ascx

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

37

Registering renderer in manifest


<skin>

...

<html>

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

</html>

...

</skin>


38

Structure (HTML)


Done!

39

Presentation (CSS)


2 Presentation (CSS)

40

Presentation (CSS)

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


41

Presentation (CSS)


css CSS files used for the theme

styles.css

theme.css

…

…

42

Presentation (CSS)


<skin>

...

<css>

<files>

<file>

<path>css/styles.css</path>

</file>

<file>

<path>css/theme.css</path>

</file>

</files>

</css>

...

</skin>


43

Presentation (CSS)


Done!

44

Behavior (JS)


3 Behavior (JS)

45

Behavior (JS)

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


46

Behavior (JS)


js JS scripts used for the theme

jquery.myplugin.js

jquery.hoverIntent.js

…

…

47

Behavior (JS)


<skin>

...

<js>

...

<files>

<file>

<path>js/jquery.myplugin.js</path>

</file>

<file>

<path>js/jquery.hoverIntetn.js</path>

</file>

</files>

</js>

...

</skin>


48

Behavior (JS)


<skin>

...

<js>

<startup_scripts>

<script>

<data><![CDATA[

$(function(){

$("#{container_id}").myplugin();

});

]]></data>

</script>

</startup_scripts>

<files>...</files>

</js>

...

</skin>


Startup scripts is a general way to initialize your menu

49

Behavior (JS)


Done!

50

What we got so far…


Structure(HTML)

Presentation(CSS)

Behavior(JS)


51

Let’s pack them together


css

html

images

js

skin.xml

MyTheme

MyTheme.zip

52

Custom Menu Theme


Finish!

53

Developers only?


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

Can I still use it?

54

Good news for you!


Menu Factory - Online menu theme builder.

55

Menu Factory service


56

Menu Factory service


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


58

… and even more


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


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

Thank you!

Pure css skinning with menu box and menu

Technology

Transcript of Pure css skinning with menu box and menu