Hello Kevin,
In early days I used GoLive ( when there was still table based design ) After switching to DIVs ( I dropped tables in 2005 ), at startup was painful, but as everything, doing exercise, in the years, now I'm a nice HTML+CSS coder.
The tools I use are Eclipse for HTML / JS and CSSEdit for CSS, but I use mostly CSSEdit for autocompletition. I'm fater to type CSS lines than searching in the palette.
A few tips / rules / statement:
With table based design CSS was used mostly to format text, so you had a very few CSS files for a project, now You will have one CSS file per page.
My suggested implementation:
0) nothing in HTML should define layout, you will code better WO/JAVA having HTML page as clean as possible.
1) a PageWrapper (WOCompoment) that his linked to:
main.css ( define here all css regarding master layout ( page size, main menu, top, bottom ) global.css ( define here everything regarding text format and link colors ) tools.css ( I usethis on my framework to call button shapes ) ie6.css ( using ERXIEConditionalComment ) for any fix you need to IE6 ( personally I no longer support IE6 ) fonts.css ( for loading webfonts ) print.css ( for printing layout ) "every"NavigationMenu.css: graphical menus requires a simple but long CSS, i prefer to have in separate file.
2) for every Page (WOCompoment) you will have your CSS file/s defining the page layout, you will call it with an ERXStyleSheet or calling ERXResponseRewriter in the appentToResponse.
myComponentName.css myComponentName-print.css
these could be empty eventually for some pages, but consider having it.
3) in you intend to have inline css: <div style="margin-top: 10px">test</div>, consider that will be rendered in printing layout too. I generally use Inline css only for display:none/block. Do not use display:none/block in css file if you need to hide/show with a JS effect, like scriptaculous, use inline instead.
4) DIVs by default have static positioning, with is very similar to relative position, but there is one thing: "Any div with absolute position will have origin to the first relative positioning parent". This is very important.
5) to have a text vertivally center aligned in a div put line-height of text as div height
6) Floating blocks ( these are painful ), as tip, If you have a parent div with floating blocks inside, and the parent needs to have a backgound (image or color), also the parent must be floating, otherwise will not render background.
7) BE PATIENT, learning CSS requires tme.
TOOLS:
Safari Webkit WebInspector Safari, preferences, advanced -> Show Develop in menu bar.
then right click on a page element and look at "inspect element" Is amazing what u can do with inspector, you can also do basic editing for preview
Take a look at:
These are my latest websites, from the Develop menu in safari choose "Disable styles", and you will see thet the page html have no layout inside.' With the inspector go in the resources tab and see all css files Steal CSS as you want :-)
try also to do in Develop menu: User Agent -> IE6, you will see a funny page :-)
RESOURCES:
Best regards Amedeo
On 06/mag/2011, at 23.40, Kevin Spake wrote: What do you use to build the web interface for your WO apps? Eclipse? DreamWeaver? Is there any sort of agreed upon 'best practices' regarding building complex UIs?
Kevin |
--------------------------------- Amedeo Mantica
WOWODC 2011 : July 1-2-3, Montreal. wowodc.com
|