mootools was missing something like this for a long time - thank you guys
On Nov 11, 11:18 pm, Paul Spencer <[EMAIL PROTECTED]> wrote: > Guillermo, > > we would definitely appreciate feedback on customization. I'll try to > quickly cover our approach. > > In general, the look and feel is controlled completely by CSS. Our > guiding principal is to use minimal, semantic (-ish) markup for > representation and control all visual styles through CSS. Where > possible, we use the browser's built-in capabilities to do things (for > instance, the hover state on buttons is done using the CSS hover > psuedo class on an a tag). There should be no hard-coded values for > anything in the javascript code except the location of a single > transparent pixel PNG image that is used for a variety of core things > including detecting the base url for the library. > > We have tried to create a set of straight-forward classes and > selectors in the CSS files with comments throughout to help orient > you. There are some common principals used for most Jx things: > > 1. Background images: We use background images almost exclusively, > except for icons in buttons, menus and tree branches... but even those > can be a_pixel.png with a background image. This enables CSS sprite > techniques to be used. In many cases changing the background images > creates the overall "theme". > > 2. Sliding doors: buttons (and button based objects like tabs) use the > sliding doors technique which is essentially a few nested left floated > block objects with background images. > > 3. Chrome: dialogs and menus and flyouts all use a chroming technique > we developed (but haven't named ;) that uses four positioned dives > with the chrome image repeated four times... kinda like sliding doors, > but works in 2 dimensions. Basically changing the chrome image would > really change the look of a dialog. > > 4. Padding: Many objects rely on padding to change the relationship > between the background visual elements and the content. if changing > the background images is not enough, then changing the padding may be > the next step. > > Two approaches can be taken to create a new visual style or "theme": > > 1. Creating a new theme from scratch (typically by taking an existing > theme and tweaking it). > > If the general size of things is appropriate, it is very easy to just > replace the existing set of images and look for any colors in the CSS > that need updating (text color and a couple of border and background > colors). > > If you want to create a different feel by changing the size of basic > elements like buttons, though, then you will to get more involved in > how the HTML elements are structured and the CSS classes affect them > by modifying the padding, sizes, line-heights, and some other such > properties. > > 2. Overriding the styles and images through another CSS file created > for that purpose. > > Using something like firebug, it is possible to play with tweaking CSS > properties and find the minimal set of CSS overrides you need to > create to achieve what you want. You can even change the look and > feel of a single dialog by specifying a new chrome image via CSS > without affecting other dialogs if you use #id selectors appropriately. > > We have tried very hard to make JxLib easy to customize, but this > should be taken with a grain of salt - its only easy if you understand > CSS techniques and take time to familiarize yourself with the > structure of the JxLib objects. > > We are working on creating documentation that should help to lower the > bar for new users to create their own themes as well. > > Thanks for your interest > > Paul > > On 11-Nov-08, at 4:43 PM, Guillermo Rauch wrote: > > > Looks like solid work has been done. Haven't reviewed the code either. > > I wonder what approach you have taken for customization. I hear UI > > libs such as EXT can be tough to customize to match custom look and > > feel. > > > On Tue, Nov 11, 2008 at 6:46 PM, Paul Spencer <[EMAIL PROTECTED]> > > wrote: > > > Feedback on improving the code style and structure is certainly > > welcome! I did the coding and am not an experienced mootools user > > so I'm sure I can learn from you guys. > > > Cheers > > > Paul > > > On 11-Nov-08, at 3:37 PM, Jan Kassens wrote: > > > Look and feel is pretty good. (code needs to be evaluated). > > > On Nov 11, 2008, at 21:19, Rajeev J Sebastian wrote: > > > On Wed, Nov 12, 2008 at 1:24 AM, Paul Spencer <[EMAIL PROTECTED]> > > wrote: > > The JxLib Team > > > (Paul, Fred and Jason) > > > Sounds and looks great! > > > Regards > > Rajeev J Sebastian > > > -- > > Jan - MooTools comitter > > twitter/blog:http://kassens.net > > > -- > > Guillermo Rauch > >http://devthought.com
