Web Application Styling

Size: px

Start display at page:

Download "Web Application Styling"

Oswin Ferguson
6 years ago
Views:

1 1 PRESENTED BY ORYX Web Application Styling Presented by Roel Fermont & Harm Wibier

2 2 Todays goals is to learn how to make your highly functional applications look great! We ll show you where to start and what great results can be achieved by using some of the latest techniques that are available on today s web to make your web application stand out from the rest. Are you ready to take your web application to the next level?

3 3 it has been 2 years, 5 months and 22 days since the first DataFlex theme was created.

4 Windows Like 4

5 Windows Modern Sky Like 5

6 Windows Modern Web Creme Sky Like 6

7 7 Windows High Modern Web Contrast Creme Sky Like

8 8 Windows High Modern New Web Contrast theme Creme Sky Like

9 Where to start It all starts here 9 1 Set a goal (client requests, deadlines, budget, etc.) 2 Make a decision and come up with a plan 3 Setup your workspace and startup the tools needed 4 Get creative!

10 but what happens if you don t have a plan? 10

11 11

12 BAD IDEA! 12

13 Find the right approach There are various ways of approaching the styling process 13 1 st option Build > Design Use an existing theme or modify a theme The easiest approach to get quick results but nothing spectacular 2 nd option Design > Build Create your own UI/theme Most likely you ll need custom controls You ll need a graphic designer (like me ) Time consuming but the best approach to get spectacular results

14 14 Quantaris ( before ) Before and After

15 15 Quantaris (( before after )) Before and After

16 16 Berendsen Quantaris Service (Online (before after )) ( before ) Before and After

17 17 Berendsen Quantaris Service (Online (before after )) ( (before after )) Before and After

18 18 Berendsen Clip Quantaris Service Consultancy (Online (before after )) ( before ) ( (before after )) Before and After

19 19 Berendsen Clip Quantaris Service Consultancy (Online (before after )) after )) ((before ( (before after )) Before and After

20 But first understand how the framework works Things you should know before you start styling your web application 20 Controls are the building blocks Forms Buttons Lists Controls are wrapped in containers Views Panels Tab pages Groups

21 Framework defines 21 HTML Structure Each control / container generates its own piece of HTML Positioning Object structure & properties in DataFlex determine layout Control layout Panel layout

22 Rendering process 22 Page load JavaScript include Object initialization CSS Include HTML Generation Positioning Inline styles Sizing

$pscssclass or pshtmld AppHtml\CssStyle\Application.$

23 CSS Structure 23 DataFlex Properties (developer) Custom CSS Classes (developer) Theme CSS (designer) System CSS (framework) Properties on DataFlex classes Inline styles set by JavaScript engine Application specific CSS declarations Assigned using pscssclass or pshtmld AppHtml\CssStyle\Application.css Global styles for the controls defined in CSS file Switch using pstheme property on owebapp AppHtml\CssThemes\<psTheme>\Theme.css CSS required for functioning of controls AppHtml\VdfEngine\System.css

24 Inline CSS by DataFlex Properties 24 pbvisible -> visibillity: hidden pstextcolor -> color: #003300; pbrender -> display: none psbackgroundcolor -> background: #CCCCDD; piheight -> height: 200px pbfillheight -> height: 345px

25 Column Layout CSS 25 Uses percentages Sets inline styles on controls CSS Properties float clear margin-left width

26 CSS Selectors 26 Start with the control classname Use Firebug to determine selectors Never use ID s within themes Remember precedence ID s are stronger than classnames Base on an existing theme Classnames are stronger than tagnames

27 What you ll be needing Things you ll need to create your own theme 27 1 Collect a color chart or create a color scheme (Adobe Kuler or colorschemedesigner.com) 2 Use the right tools and resources Firefox with Firebug ColorPic CSS3 generator 3 CSS skills, experience with the Framework and patience!

28 Firebug Why Firebug is a great tool 28 Inspect elements Preview icons, images, colors Changing padding/margins/heights Cycle trough CSS properties

29 Firebug Why Firebug is a great tool 29 CSS pseudo-classes Disabled styles temporarily See changes highlighted Edit your styles instantly

30 ColorPic Simple but very effective 30 Easily pick any color from your screen Adjust color with four color mixers Colors shown in hex and RGB Resizable magnification area

31 CSS3 Generator A great time saver 31 Automatically generate CSS code Shows cross-browser support Easily select your CSS3 property

32 CSS3 techniques Use these CSS techniques to get great results 32 rgba {background: rgba(200, 54, 54, 0.5);} Box shadow inset {box-shadow:inset 0 1px 0 0 #272525;} Box shadows {box-shadow: 0 0 5px 0 rgba(0,114,198,50);} Text shadows {text-shadow: 1px 1px 0 #005899;} It s okay to have different experiences in different browsers - but make sure you have a fall back.

33 CSS3 techniques Use these CSS techniques to get great results 33 Font { } Use it for typography and icons Transitions {transition: all 0.5s ease;} Text selection ::selection {color: #FFFFFF; background: #0072C6;} Rounded corners {border-radius: 1px;} Simplicity is important in user interface design.

34 @font-face for font-icons Use selector to make your application look awesome 34 Scalable Customizable Render in different colors Apply font- and text-related CSS properties Make changes without opening Photoshop Single color But you can add a <div> around your icon to set a background-color or border

35 @font-face for font-icons Use selector to make your application look awesome 35 HTML <span href= #" class="webitm_icon">my Link</span> { font-family: weborder-171 ; src:url( fonts/weborder-171.eot ); src:url( fonts/weborder-171.eot?#iefix ) format( embedded-opentype ), url( fonts/weborder-171.ttf ) format( truetype ), url( fonts/weborder-171.svg#weborder-171 ) format( svg ), url( fonts/weborder-171.woff ) format( woff ); font-weight: normal; font-style: normal; } span.webitm_icon:before,.webdp.webdp_btnmonth:after { font-family: weborder-171!important; content: d ; font-style: normal!important; font-weight: normal!important; font-variant: normal!important; text-transform: none!important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; color: #D24726; }

36 @font-face icon generators Some resources to generate your own font icons 36 IcoMoon Make sure to check the usage license Fontastic (the one we re currently using) Fontello

37 @font-face for typography Use selector to make your application look awesome 37 Custom fonts and no more web safe fonts like Arial, Times New Roman, etc. Customizable Render in different colors Apply font- and text-related CSS properties Loading time increases with the amount of fonts

38 @font-face for typography Use selector to make your application look awesome 38 HTML <h1 class= title">my Title</h1> { font-family: 'roboto_condensedbold'; src: url('fonts/robotocondensed-bold-webfont.eot'); src: url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('embeddedopentype'), url('fonts/robotocondensed-bold-webfont.woff') format('woff'), url('fonts/robotocondensed-bold-webfont.ttf') format('truetype'), url('fonts/robotocondensed-bold-webfont.svg#roboto_condensedbold') format('svg'); font-weight: normal; font-style: normal; }.title{ font-family: 'roboto_condensedbold', Arial, Helvetica, sans-serif; }

39 @font-face typography generators Use selector to make your application look awesome 39 Font Squirrel Google Font Fonts.com MyFonts

40 40 All these techniques in one Outlook 2013 HD Blue new theme ( live preview )

41 41 Outlook 2013 HD Blue ( live preview )

42 We will update the current themes with font-icons for better performance and customization 42

43 43 Time to workout Get ready for some exercise

44 Setup your workspace Before we can begin you need to make sure all the files are present 44 Deploy the Outlook 2013 HD Blue theme

45 Check list Make sure you have a everything you ll need 45 Workspace deployed? Cache disabled? Firefox with Firebug running? ColorPic installed and the right colors entered? Color chart present? Motivated and inspired?

46 1 Style the WebMenuBar 46 /* LINE 783 */.WebMenuBar { background: #D24726; } /* LINE 814 */.WebMenuBar > ul > li:hover > div,.webmenubar > ul > li.webitm_expanded > div { background-color: #B83E21; } /* LINE 832 */.WebMenuBar ul li ul { border-right: 2px solid #B83E21; border-bottom: 2px solid #B83E21; border-left: 2px solid #B83E21; } /* LINE 861 */.WebMenuBar ul li ul li:focus,.webmenubar ul li ul li:focus a,.webmenubar ul li ul li:active,.webmenubar ul li ul li:active a,.webmenubar ul li ul li.webitm_hassub:active { background-color: #B83E21; } /* LINE 905 */.WebMenuBar ul li ul li ul { border-top: 2px solid #B83E21; }

47 2 Style the WebMenuBar icons 47 /* LINE 2045 */ span.webitm_icon:before,.webmenubar ul li ul li.webitm_hassub > div:before,.webform.webfrm_prompt:before,.webfilefrm div.webfile_btn:before,.webwindow.webwin_controls.webwin_close:before,.webdp.webdp_btnprev:before,.webdp.webdp_btnnext:before,.webdp.webdp_btnmonth:after,.webdp.webdp_btnyear:after { color: #D24726; } /* LINE 2068 */ span.webitm_icon { border: 1px solid #D24726; -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; } /* LINE 2080*/.WebMenuItem:hover span.webitm_icon,.webmenuitem:focus span.webitm_icon { background: #D24726; }

48 3 Style the Prompt icons 48 /* LINE 2184 */.WebForm.WebFrm_Prompt:hover:before,.WebFileFrm div.webfile_btn:hover:before { color: #B83E21; }

49 4 Style the Modal Dialog 49 /* LINE 991 */.WebWindow.WebWin_header { background: #D24726; } /* LINE 1018 */.WebWindow.WebWin_main_l { padding-left: 2px; background-color: #D24726; } /* LINE 1023 */.WebWindow.WebWin_main_r { padding-right: 2px; background-color: #D24726; } /* LINE 1032*/.WebWindow.WebWin_bottom_l { height: 2px; padding-left: 1px; background-color: #D24726; } /* LINE 2201 */.WebWindow.WebWin_controls.WebWin_close:hover { background: #15223D; }

50 5 Style the Web Buttons 50 /* LINE 248 */.WebButton button,.webgrid.weblist_body.weblist_row button,.weblist.weblist_body.weblist_row button { background: #D24726; border: 1px solid #D24726; } /* LINE 283 */.WebButton.Web_Enabled button:active,.webgrid.weblist_body.weblist_row button:active,.weblist.weblist_body.weblist_row button:active { background: #15223D; border: 1px solid #15223D; } /* LINE 268 */.WebButton.Web_Enabled button:hover,.webbutton.web_enabled button:focus,.webgrid.weblist_body.weblist_row button:hover,.weblist.weblist_body.weblist_row button:hover { background: #B83E21; border: 1px solid #B83E21; }

51 6 Style the Web Grid & Web List 51 /* LINE 552*/.WebGrid.WebList_Body.WebList_ShowSelected.WebList_Row.WebList_Selected,.WebList.WebList_Body.WebList_ShowSelected.WebList_Row.WebList_Selected { background: #636162; }

52 7 Style the Tab Container /* LINE 645 */.WebTabContainer.WebTab_Btn { border-top: 2px solid #D24726; border-right: 2px solid #D24726; border-left: 2px solid #D24726; background: #D24726; } /* LINE 673 */.WebTabContainer.WebTab_Btn.WebTab_Enabled:hover,.WebTabContainer.WebTab_Btn.WebTab_Enabled.WebTab_Focus { background: #B83E21; border-top: 2px solid #B83E21; border-right: 2px solid #B83E21; border-left: 2px solid #B83E21; } /* LINE 716 */ 52.WebTabContainer.WebTab_Btn.WebTab_Focus.WebTab_Current.WebTab_Enabled { background: #15223D; border-top: 2px solid #15223D; border-right: 2px solid #15223D; border-bottom: -2px solid #FFFFFF; border-left: 2px solid #15223D; } /* LINE 731 */.WebTabContainer.WebCon_Focus.WebTab_Btn.WebTab_Current { border-left: 2px solid #15223D; border-right: 2px solid #15223D; border-top: 2px solid #15223D; } /* LINE 736 */.WebTabContainer.WebCon_Focus.WebTbc_Head { border-bottom: 2px solid #15223D; } /* LINE 739 */.WebTabContainer.WebCon_Focus.WebTbc_Body { border: 2px solid #15223D; }

53 Outlook 2013 HD Orange 53

54 54 designeduc2014 Tadaa. that easy! Want more? Outlook 2013 HD Orange

55 55 Apply some specific CSS3 techniques Exercise two: change the typography of your application Exercise three: try out some CSS3 techniques

56 Resources Some useful resources Basic tools o Firefox o Firebug o ColorPic Font icon generators o IcoMoon o Fontastic o Fontello Color schemes creator o Adobe Kuler o Color scheme designer CSS generators o Border Radius o CSS3 Generator resources o Font Squirrel o Google Fonts Various o The CSS selector game 56

57 For fun: CSS Diner It's a little game to help you learn CSS selectors 57

58 58 Thank you for joining us We re looking forward seeing great designs from you! Need a professional theme or web application? Contact Data Access Europe info@dataaccess.eu

Styling Web Applications Presented by Roel Fermont

Styling Web Applications Presented by Roel Fermont As Graphic Designer at Data Access, I have helped many developers making wellrunning applications look great. I ll show you what great results can be