Pure css skinning with menu box and menu

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

Coding Staff Inc.
Mikita Mikado
CEO, Coding Staff Inc.
Expertise:
DNN Skinning
UI Design
Online Marketing
Serge Barysiuk
CTO, Coding Staff Inc.
Expertise:
JavaScript (jQuery, qooxdoo, …)
RIA Development
Application Architecture
2

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

DotNetNuke design concept
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

What are the parts of the skin?
5
Navigation
Layout
Containers

DotNetNuke skin parts
6
+
+
Containers
Navigation
Skins

DotNetNuke skin parts
7
Skins & Containers are reusable.
Navigation is a part of the skin.

What if we would have…
8
+
+
Containers
Navigation
Skins

… it would be handy.
9
… and we decided to go custom. Why?!

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

5
5 ideas behind the platform
11
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.

Meet Menu Box
17

Menu Box Motto
18
There are no limitations but your own imagination.

Menu Box Concept
19
Themes
Box
Put themes into the box.

Using the module as…
20
DNN Module
Skins Object

Installing a theme
21

Using the module for…
… main DNN navigation.
… sub navigation for inner pages.
… site map.
… page index.
22

Menu Theme
23
Menu theme under the hood

What is a theme?
24
+
+
=
Menu Theme
Structure
(HTML)
Presentation
(CSS)
Behavior
(JS)

What is a theme?
25
Structure
(HTML)
How theme is rendered.
Presentation
(CSS)
How theme looks like.
Behavior
(JS)
How theme acts.

What is a theme?
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

Menu theme manifest
27
Manifest file connects all them together.
Structure
(HTML)
Presentation
(CSS)
Theme Manifest
(skin.xml)
Behavior
(JS)

Menu theme manifest (skin.xml)
28
Theme name and additional information
HTML templates declaration
=
JavaScript files and inline scripts declaration
Theme Manifest
(skin.xml)
CSS files declaration

29
0
Theme meta info

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>
30
General information about the theme

Menu themes management
31

Structure (HTML)
32
1
Structure (HTML)

Structure (HTML)
Main points:
Easy customizable
Easy understandable
33

Structure (HTML)
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)

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>
35
WrapperTemplate.ascx

<liclass='<%=(IsActive ? "current" : "") %>'>
<ahref="<%= Node.NavigateURL %>"><%= Node.Text %></a>
<% if (HasChildren)
{%>
<ulclass="subnav">
<asp:PlaceHolderrunat="server"ID="phChildNodes"></asp:PlaceHolder>
</ul>
<%} %>
</li>
Structure (HTML)
36
NodeTemplate.ascx
Additional properties: IsLast, IsFirst, Level, Node.*

Registering renderer in manifest
<?xmlversion="1.0"encoding="utf-8"?>
<skin>
...
<html>
<renderer>html/WrapperTemplate.ascx</renderer>
</html>
...
</skin>
37

Structure (HTML)
38
Done!

Presentation (CSS)
39
2
Presentation (CSS)

Presentation (CSS)
Main points:
No predefined CSS classes names
No any specific about the module, just CSS
40

Presentation (CSS)
41
css
CSS files used for the theme
styles.css
theme.css
…
…

Presentation (CSS)
<skin>
...
<css>
<files>
<file>
<path>css/styles.css</path>
</file>
<file>
<path>css/theme.css</path>
</file>
</files>
</css>
...
</skin>
42

Presentation (CSS)
43
Done!

Behavior (JS)
44
3
Behavior (JS)

Behavior (JS)
Main points:
No limits to particular JS library
Inline scripts support
45

Behavior (JS)
46
js
JS scripts used for the theme
jquery.myplugin.js
jquery.hoverIntent.js
…
…

Behavior (JS)
<skin>
...
<js>
...
<files>
<file>
<path>js/jquery.myplugin.js</path>
</file>
<file>
<path>js/jquery.hoverIntetn.js</path>
</file>
</files>
</js>
...
</skin>
47

Behavior (JS)
<skin>
...
<js>
<startup_scripts>
<script>
<data><![CDATA[
$(function(){
$("#{container_id}").myplugin();
});
]]></data>
</script>
</startup_scripts>
<files>...</files>
</js>
...
</skin>
48
Startup scripts is a general way to initialize your menu

Behavior (JS)
49
Done!

What we got so far…
50
Structure
(HTML)
Presentation
(CSS)
Behavior
(JS)
Theme Manifest
(skin.xml)

Let’s pack them together
51
css
html
images
js
MyTheme
MyTheme.zip
skin.xml

Custom Menu Theme
52
Finish!

Developers only?
53
But… what if I’m a designer, not a developer?
Can I still use it?

Good news for you!
54
Menu Factory - Online menu theme builder.

Menu Factory service
55

Menu Factory service
56
http://factory.codingstaff.com

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
57

… and even more
58
It’s free and it’s going to be open sourced!

More information
http://www.codingstaff.com
http://www.codingstaff.com/blog
http://factory.codingstaff.com
http://twitter.com/codingstaff
59

60
Thank you!

http://www.codingstaff.com	13257
http://www.quoteroller.com	2197
http://translate.googleusercontent.com	53
http://samplecompany.quoteroller.com	46
http://webcache.googleusercontent.com	6
http://abc.quoteroller-staging.info	2
http://www.quoteroller-staging.info	2
http://translate.baiducontent.com	1
http://perevod.yandex.net	1
http://honyaku.yahoofs.jp	1

Pure css skinning with menu box and menu

by Siarhei Barysiuk on Jul 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 15,566

Statistics

Pure css skinning with menu box and menu — Presentation Transcript