PLATINUM SPONSOR

GOLD SPONSORS

UI FRAMEWORK FOR SHAREPOINT 2010

BRANDING AND PUBLIC FACING SITES

Hasanga H Abeyaratnehttp://about.me/hasanga

ON YOUR MARKS! GET SET!

• You can live tweet the session with #SPUIKIT with #SEASPC

• QA session in the final 10 minutes• Send questions on my twitter handle

@hasanga

SharePoint is the experience layer through which people interact with your business

- Ryan Duguid

SHAREPOINT BRANDING

THERE ARE MANY WAYS TO SKIN A CAT

ALSO SHAREPOINT

WHEN YOUR WAY, IS THE WRONG WAY

SUCKER PUNCH!!!

WHY A FRAMEWORK FOR SHAREPOINT BRANDING• It’s a platform to get you started• It’s a collection of repeated elements• It improves uniformity and there by

improves manageability• It gets you faster and predictable

results

FRAMEWORK WALKTHROUGHDEMO

THAT’S ONE SET OF PROBLEMS THERE ARE MORE…• Well that was simple but it still doesn’t

explain why it must work this way

• It works on the HTML template but not when I moved to the SharePoint master page!

• Huh! We finally found that CSS is over-ridden by SharePoint core.css file

AND MORE…

• It took me a whole night to figure how to get that Jquery plugin working in there!

• Why won’t that footer stick to the page bottom when the page is short?

• Arrrrggg! It works in Firefox and IE 7 and 9!! But why not in IE 8? #$#%@^@

SO WHY IS IT PROBLEMATIC?• Because Devigners are rare

“We can do HTML and CSS in our sleep, read a C# or VB file and don't go running and screaming away from XML.“

- Heather Solomon

FOR INTRANETS

• SPUIKit includes customV4.master page

• Custom Page Layouts

• Reusable UI Elements

• A fluid width CSS Grid

• Solutions for common V4.master compatibility issues

LET’S CREATE A PAGE LAYOUTDEMO

FOR INTERNET - PUBLIC FACING SITES

• SPUIKit includes publishing.master page

• Reausable UI Library for common widgets

• Custom Item styles

• Solutions for common SharePoint cross browser compatibility issues

INCLUDING A JQUERY PLUGINDEMO

LET’S SEE IF I CAN ANSWERQuestions?

SPUIKIT IS FOR YOU…

• Less screaming and hair pulling when you get around to testing

• Complex designs / 3rd party widgets are made relatively simple to produce

• Improves visual assembly of page elements and there by UX

• Flexible and solves your branding problems

http://spuikit.codeplex.com

Go Grab it now!

http://about.me/hasanga

@hasanga

Thank You

Thank you to all of our SponsorsPLATINUM SPONSOR

SILVER SPONSORS

GOLD SPONSORS

BRONZE SPONSORS