css liquid layouts

[miss minnie]

i'm working on a php utility that helps you create css styles and preview the results immediately with particular reference to liquid layouts. i've got to the point where it seems to work ok but can't decide how useful, user-friendly or bug-free it is. there are a few things i know of that i could change but would be good to get some feedback first.

anyone care to give me some opinions or suggestions?

if you're not familiar with liquid layouts take a look at this first: http://www.maxdesign.com.au/presentation/liquid/

then have a go at my wee utility: http://zenlan.com/phptest/css_util

it's a work in progress so it ain't particularly pretty but i would welcome ideas about useability. would like the functionality to be 'obvious', i.e. don't want to publish helptext but there may be stuff i should state to make it easier.

if it passes muster and i get a bit of encouragement i'll consider taking it a bit further.

cheers all, thanks in advance. :)

ps. it requires pop-up windows so you'll have to enable those for it to work properly.

[editor]

Ooooh! There's posh!

See you down the boozer later?

[miss minnie]

ooh, ta!

no boozer for me this weekend, boozing at home and saving it up for the next one. :)

[Meles Meles]

Very swanky, definitely worth taking further.

One strange problem I noticed was that the 'edit styles' popup didn't have any scrollbars, which made it almost unusable at 1024x768 (IE6 WinXP) until I resized the window. I saw the scrollbars were specified in the js, and they were there in Firefox... odd.

Who's it aimed at? Think a CSS novice might find the page full of style choices a little daunting. Maybe if you split it into more clearly defined sections with headings: size/position, colours, text styles? Also, once you've selected your styles and clicked the submit, it's not obvious that anything's happened (apart from the page refreshing). I wonder if it shouldn't close the popup, or at least display some sort of 'Styles Updated' message.

Um, what else... have you thought about having a colour-picker rather than select list of colours? And I suppose ideally when you click the View Style button, it would only list the styles that aren't empty. Or even have a link to validate the finished CSS at the W3C... All depends how much time and (financial) motivation you've got.

Hope I don't sound too nit-picking, 'cos I'm actually I'm dead impressed - works really well - must have taken you ages.

[Mation]

when I'm more awake I'll have a look at this. Sounds like an excellent idea.

I keep faffing about trying to do a new site for my lab in % terms and the bits in between everything I'm interested in (borders etc) keep jumping about and rescaling horribly. Granted this must be because I don't know how to use style sheets well enough, but having a tool to help would be really fab.

[Buddy Bradley]

F**king 'ell - that's a bit hardcore! :eek:

My initial thought was "if you know enough about CSS to be able to comprehend all those options and what they mean, why would you be using an automated utility - you'd just write the rules yourself".

Who do you think are your target audience?

I would think that if it is for people who don't know a great deal about CSS, then it would be better to word the style rules in plain english rather than just list the actual CSS names - so instead of having to specify "text-indent, text-decoration, font-variant" and so on, it explains a little bit more what those rules mean.

List-o-matic (http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp) is a usable type of CSS generator.

[Kameron]

jeasus man, I've just had a play, I though I knew quite a bit of CSS but hell there is a lot isn't there.

Could you sort of preload the forms with reasonable settings (then you could have schemes that people could mod off or they could ask to start with a blank slate) or sort of try and lead people by the nose (or ear if nessecary) towards writing pretty CSS.

Nice work

[miss minnie]

Hope I don't sound too nit-picking, 'cos I'm actually I'm dead impressed - works really well - must have taken you ages.
not at all nit-picky! thanks for some very considered feedback. it took a couple of days to write plus a couple of days agonising over the presententation before i thought what the hell, i'll see what other people think and take it from there.

definitely right about the layout of the edit window - it's a mess and way too big. hadn't thought about a colour picker - good idea. things like 'view/save/load styles' were quickly tacked on at the end and certainly need refining. output as a '.css' file would probably be more useful than simply one long inline style string. option to include/exclude empty elements perhaps. might include an option to insert the old 'ipso lorem' text as well. link to w3 is an excellent idea! btw, i've only tested it in firefox.

i was going to leave out the font/text/color 'decorative' type elements and leave it at pure positioning. stuck it in finally because you get a better preview of the finished layout. however, my own hand-spun css uses the 'div id' for positioning and the 'div class' for other elements as well as defining styles for generic elements such as 'body', 'a' etc... some elements, such as tables, seem to warrant their own project. however, weaving classes into it would add a level of complexity that might make it a bit ott.

there's also the possiblity of allowing the user to define more divs, insert more html elements, include their own scripts and import their own stylesheets.

perhaps i need to define a set of smaller projects that could be tied together when each one is working. or something. hmmm, i often start these things with a small idea then make it too complicated and get fed up. my hard disk is littered with unfinished projects!

i.must.keep.it.simple.

:) :)

[miss minnie]

jeasus man, I've just had a play, I though I knew quite a bit of CSS but hell there is a lot isn't there.

Could you sort of preload the forms with reasonable settings (then you could have schemes that people could mod off or they could ask to start with a blank slate) or sort of try and lead people by the nose (or ear if nessecary) towards writing pretty CSS.

Nice work
thank you kindly sir!

take a look at 'load styles' - there is a (rather crappy) 'sample' style that can be loaded up. the idea being that some nice people who are good at css donate some lovely styles that i could include as samples. with full credit of course!

perhaps the 'load styles' button should be on the main page so that the sample-picker is more obvious?

[Kameron]

No I did that but I can't seem to get it so I can edit it, I take it that that is how it's going to work? (Opera7.50). I could compile FireFox if it's an Opera problem.

[miss minnie]

No I did that but I can't seem to get it so I can edit it, I take it that that is how it's going to work? (Opera7.50). I could compile FireFox if it's an Opera problem.
that's odd. i just installed opera and loaded the sample style and it worked.


once it's loaded, click one of the edit div buttons - the sample style settings should have been imported into the controls. are they not?

[Meles Meles]

there's also the possiblity of allowing the user to define more divs, insert more html elements, include their own scripts and import their own stylesheets.
Probably be entering a whole world of pain there... Think at that stage I'd just tell 'em to go buy a copy of TopStyle :D


hmmm, i often start these things with a small idea then make it too complicated and get fed up. my hard disk is littered with unfinished projects!
Glad it's not just me that does that. BTW, I was looking for a colour picker recently and thought this was one of the better ones (can use a popup or a div): Matt Kruse colorpicker (http://www.mattkruse.com/javascript/colorpicker/)

[spudulike]

I found Glish (http://www.glish.com/css/) helped me learn quite a lot about liquid CSS

[Kameron]

No I'm having a few problems with that here, I may will have a tweak and see if it's any of my security setting and I'll get a newer version of Opera.

Meles, CSS isn't that biga deal man. Just go at it slowly and it really does work. The real fun comes when you have to get it to degrade gracefully on progressily older platforms and into text2speach browsers. There are things you can do that only IE can see and other that only netscape 4 can see and so on and so on, up until modern versions of Opera and Moz which render the same almost, most of the time.

So first, define your blocks. these are the major layout areas and have div tags wrapped round them. Then format the content you indend them to have and if all else fails copy CSS/edge from this guy http://www.meyerweb.com/eric/css/edge/ which I used http://www.wirewater.co.uk there.

Oh yes the CSS ishttp://www.wirewater.co.uk/alt.css there and if you want to write CSS get an editor that does syntax highlighing for you or you will DIE. I edited and wrote that CSS in vim.

[miss minnie]

when you click the 'load style' button - do you get the popup window? if so, when you click the sample / load button do you get any output in that window? if so, can you copy it and send if in a pm. might help me figure out what's going wrong.

[fubert]

not wanting to derail the thread or being the negative nancy how much of future does php really have ? i don't know much about it but in commericial situations i've thought it would be much easier and faster to write apps (like this bb) in it instead of the full j2ee/client/session/logic/objects/storage multi-layered guffage i have to deal with.

the app by miss minnie is top btw. it will be most useful if it remains.

[miss minnie]

it is very easy to write quick little apps in php. as with any language or construct it still pays to analyse, design, plan objects and layers though.

as you can no doubt tell, this particular little app was coded top-down and thrown together on the fly.

i've hoisted up a second version. color-picker, w3 links, tidied-up edit controls and css output have been implemented.

however, when i sat down to think about how much more could go into it i ended up drawing an object model. i will probably now chuck most of the code and rewrite as objects. it's the only way to manage something that you want to grow and build on imo.

[laptop]

My initial thought was "if you know enough about CSS to be able to comprehend all those options and what they mean, why would you be using an automated utility - you'd just write the rules yourself".

It's dead cool and all, but that was my thought too.

And it'd make the form impossibly cluttered to generate really useful CSS things like:



P {font-family: "Gill Sans", "GillSans", "Humnst666 BT", sans-serif}

[Buddy Bradley]

Just had another play with it - it doesn't output CSS that is compatible in all browsers, so anyone trying to use it to create useful stylesheets would then have to hack them to pieces to get them to work in IE.

Either that or a novice would end up with CSS that looks fine on their Firefox, and upload it to their site not realising that the 95% of surfers using IE are seeing something totally different.

[miss minnie]

try the 'view css' button, copy the css then use the w3 link to go to the validator and paste the css in. it outputs w3 compatible css.

if i write the same css in notepad and link it to some html the css still wouldn't work in all browsers. you know a tool that will frig your css to work in all browsers? i use a javascript to get my css to behave for ie.

if you look at the link in the first post it explains the ie 'gutter tweak'. am working on a version that will allow a dynamic number of divs that might help with that.

[miss minnie]

My initial thought was "if you know enough about CSS to be able to comprehend all those options and what they mean, why would you be using an automated utility - you'd just write the rules yourself".

Who do you think are your target audience?

I would think that if it is for people who don't know a great deal about CSS, then it would be better to word the style rules in plain english rather than just list the actual CSS names - so instead of having to specify "text-indent, text-decoration, font-variant" and so on, it explains a little bit more what those rules mean.

List-o-matic (http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp) is a usable type of CSS generator.
i guess it must be for people like myself who aren't newbies to css but don't spend much of their time doing it. i could download some tutorial code and tweak it - i learned from zengarden - but it was a pretty tedious process. i thought it would be nice if there was a site that had some cool samples that could be easily tweaked and previewed immediately. so i thought why don't i write one?

maybe my target audience is only me. oh, well - at least it will save my bandwidth. :p :)

[Buddy Bradley]

try the 'view css' button, copy the css then use the w3 link to go to the validator and paste the css in. it outputs w3 compatible css.

if i write the same css in notepad and link it to some html the css still wouldn't work in all browsers. you know a tool that will frig your css to work in all browsers? i use a javascript to get my css to behave for ie.
I wasn't implying that it generated invalid code (although it could be a lot cleaner, for example combining multiple margin, padding and border values into one declaration instead of four) - just that because it is generating "perfect" CSS, no two browsers will render it exactly the same, and some will f**k it up quite badly.

I would think that at the very least you should put in a fix for the IE broken box model - should be pretty easy. Some of the other stuff - like the different ways browsers interpret floats and margins - will be a bit harder. :)