Re: [Wicket-develop] CSS example

Sun, 13 Feb 2005 08:40:38 -0800 

Jonathan Locke wrote:


i agree that we need to automatically do "namespacing" like that.
do we need to automate that right away though?


Nope, we don't. Like Martijn mentioned, there also is a danger with 'namespacing' automatically; it reduces testabiltiy.

for now, it seems like component authors could do that. 


Yep.


another issue:

this prefix wouldn't apply to "global" tags like <p> and <h1>, right?
but what about components that intend to define a local <p> or <h1> or whatever value? such component really want their stylesheet block to stay local to them don't they?


Authors should never depend on globally defined styles like for <p> etc. They should use classes, selectors and inline styles. Now, selectors can be a problem, as when you use the id attribute for wicket components, that id will generally be less usable for css. What authors can do - like I do a lot in the project I'm working on - is to use <span or <div tags for marking style, and within that the usual wicket tags.

Eelco


Eelco Hillenius wrote:

And then, in order to avoid conflicts with other CSS definitions, .borderTop would better be named e.g. wicket_contrib_RoundCornerBorder_borderTop.

Eelco

Gili wrote:

Hi,

    The example given by Kamil was how he'd like to see Wicket
handle JS/CSS. I have no idea how exactly I'd like it to work but I
know what the *output* from it should be. Here is my use-case for the
RoundCornerBorder. Lets please brainstorm on how we'd like Wicket to
build such a component.

<html>
 <head>
   <style type="text/css">
     .borderTop
     {
       background-color: #000000;
       width: 100%
       background-image: none;
     }
     .borderRight
     {
       background-position: right top;
       background-repeat: repeat-y;
     }
     .borderBottom
     {
       background-position: left bottom;
       background-repeat: repeat-x;
     }
     .borderLeft
     {
       background-image: none;
     }
     .borderTopLeft
     {
       background-image: url("top-left.gif");
       background-repeat: no-repeat;
       background-position: top left;
     }
     .borderTopRight
     {
       background-image: url("top-right.gif");
       background-repeat: no-repeat;
       background-position: top right;
     }
     .borderBottomRight
     {
       background-image: url("bottom-right.gif");
       background-repeat: no-repeat;
       background-position: bottom right;             }
     .borderBottomLeft
     {
       background-image: url("bottom-left.gif");
       background-repeat: no-repeat;
       background-position: bottom left;             }
     .borderContents
     {
       width: 100%
     }
   </style>
 </head>
 <body>
   <div class="borderTop">
   <div class="borderRight">
   <div class="borderBottom">
   <div class="borderLeft">
   <div class="borderTopLeft">
   <div class="borderTopRight">
   <div class="borderBottomRight">
   <div class="borderBottomLeft">
   <div class="borderContents">
     This is some text inside my round corner border
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
 </body>
</html>

Gili



-------------------------------------------------------
SF email is sponsored by - The IT Product Guide
Read honest & candid reviews on hundreds of IT Products from real users.
Discover which products truly live up to the hype. Start reading now.
http://ads.osdn.com/?ad_id=6595&alloc_id=14396&op=click
_______________________________________________
Wicket-develop mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/wicket-develop





-------------------------------------------------------
SF email is sponsored by - The IT Product Guide
Read honest & candid reviews on hundreds of IT Products from real users.
Discover which products truly live up to the hype. Start reading now.
http://ads.osdn.com/?ad_id=6595&alloc_id=14396&op=click
_______________________________________________
Wicket-develop mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/wicket-develop



-------------------------------------------------------
SF email is sponsored by - The IT Product Guide
Read honest & candid reviews on hundreds of IT Products from real users.
Discover which products truly live up to the hype. Start reading now.
http://ads.osdn.com/?ad_id=6595&alloc_id=14396&op=click
_______________________________________________
Wicket-develop mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/wicket-develop





-------------------------------------------------------
SF email is sponsored by - The IT Product Guide
Read honest & candid reviews on hundreds of IT Products from real users.
Discover which products truly live up to the hype. Start reading now.
http://ads.osdn.com/?ad_id=6595&alloc_id=14396&op=click
_______________________________________________
Wicket-develop mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/wicket-develop

Reply via email to