Page 1 of 1

Structure of styling system

Posted: Fri Mar 13, 2009 9:47 am
by crazycoders
I have a system i am developping (a framework) that creates highlevel classes used to manage the styles of objects.

I had decided to go with several objects that split the different css properties in groups such as:
- font styles (fontfamily, size, color, etc)
- border styles (border-left-style, border-bottom-size, border-right-color, etc)
- container styles (position, left, top, clear, float, margin-left, margin-top, etc)
- content styles (padding-left, padding-top, horizontal-align (text-align), vertical-align, etc)
- background styles (background-image, background-repeat, etc)

I had decided to do so to split the load of the css handling to different classes so if a user doesn't require changing all the different styles, some of the objects wouldn't even be created thus saving process time when rendering and saving data and also saving memory.

So a simple label or button would have the properties: fontstyle, borderstyle, containerstyle, backgroundstyle and contentstyle. So far no problem, but when we get to custom or complex controls such as my debugger control, i'd need the following:

- debuggerfontstyle
- debuggerborderstyle
- debuggerbackgroundstyle
- debuggercontentstyle
- debuggercontainerstyle
- noticefontstyle
- noticeborderstyle
- noticebackgroundstyle
- noticecontentstyle
- noticecontainerstyle
- warningfontstyle
- warningborderstyle
- warningbackgroundstyle
- warningcontentstyle
- warningcontainerstyle
- errorfontstyle
- errorborderstyle
- errorbackgroundstyle
- errorcontentstyle
- errorcontainerstyle

This can become cumbersome to work with for a standard user because he must know all the style properties. Now i'm faced with a dilema... Either the user has to live with the numerous styles accessors or i have to sacrifice process and probably a bit more of memory to achieve this instead:

- debuggerstyle
- noticestyle
- warningstyle
- errorstyle

What would you do, i want to think user and also think about custom component developers for later and also think about performance impacts... They must all balance together no?

Re: Structure of styling system

Posted: Fri Mar 13, 2009 12:45 pm
by Theory?
What if you created more generic methods for each CSS property and then pass the ID or Class to the constructor or the method itself.

Code: Select all

 
public function fontFamily($id, $value) {
   $property = '#' . $id . '{ font-family: ' . $value . ';}';
}
 
That's a really poor demonstration, but hopefully you can see what I mean.

Re: Structure of styling system

Posted: Fri Mar 13, 2009 12:49 pm
by crazycoders
It's not that easy, the framework i'm building extracts value from an XML declarative file just like ASP.Net does. So a designer could use a designersoftware to generate that file. Now the framework reads that file and sends the information into the various components.

A style has to be a component for the sake of the framework because i want developpers to be able to access the style objects and be able to change values in the styles in a live fashion. If they know how to access the styles they don't need to know the internals of CSS such as how to render the different rules because all the components are built to do that for them.

You way of doing, although it could be a good way to do in other circumstances, cannot be applied to my scenario.

Re: Structure of styling system

Posted: Fri Mar 13, 2009 1:21 pm
by Theory?
Blah sorry, I didn't understand. Useless again. Good luck though.

Re: Structure of styling system

Posted: Sun Mar 15, 2009 12:51 am
by josh
I don't see how XML changes anything. Use an object with 2 descendants, one for loading a plain object one that loads itself from XML and write the application as you would normally. Personally I wrote a CSS editor script a long time ago I scraped some source for the CSS spec, extrapolated that into a relational database, and wrote an interface ontop of that.

Re: Structure of styling system

Posted: Sun Mar 15, 2009 12:32 pm
by VirtuosiMedia
You should check out the syntax of one of the JavaScript libraries like MooTools or jQuery. It might give you some ideas.

Re: Structure of styling system

Posted: Sun Mar 15, 2009 8:59 pm
by crazycoders
Thanks, i decided to go with one big object after all cause i realised that my framework's core webcontrols had two styles, enabled and disabled. Using 5 different objects for each state could have confused the user, so i merged all of them in one big object that anyway shouldnt take much more space in memory since all properties start with null.

So instead of fontstyle, containerstyle, contentstyle, backgroundstyle and borderstyle, i now only have a style object.