LightCSS - an Easy CSS Framework - any Interest?
I wanted something where I could pick from a set of common conventions (with/without topbar, sidebar, rightbar, etc.) that supported pods within content areas, and that meant someone who knew very little CSS could still create tableless websites for the vast majority of simple sites in a short period of time using a standard approach.
I've been working with a very smart developer (Thomas Turnbull - expect to hear more about him in the future) to develop a CSS framework that makes it easy to create site templates in under an hour from a JPEG and that I could wrap with a CMS and generator to allow non-technical users to manage their CSS using a nice administrative wizard (that won't be done until early next year) . . .
So far the project is going really well, and I'm going to include this as part of the LightBase project as well as setting up a separate LightCSS project that Thomas will run and that will provide this to people who don't want to use LightBase (or even ColdFusion).
I KNOW there are a lot of CSS frameworks out there, but I just never found one that seemed to fit what we were trying to do this well - select from a list of standard structural templates, customize a few bits and then move on. They were either too prescriptive in terms of "pick a look and feel" which didn't work as we need to work from JPEGs or not prescriptive enough meaning it took over an hour to go from JPEG to working CSS which is just too slow for the business we are in.
Very early stages, but this is starting to look interesting. would anyone be interested in finding out more about this/playing with this/getting involved? We never really wanted to build a CSS framework, but this just fitted what I think is a common requirement - very quick development of completely custom layouts - with the understanding that 99% of the time those layouts fit within one of a number of common structural patterns even though they look graphically very different.
Any interest at all?
Perfect. Was wondering if this would just get completely shot down as I know there are bunch of CSS frameworks out there, but I REALLY couldn't find anything for this use case. Let me get the wheels in motion and I'll be in touch shortly!
Why use MXML's container tags to "lay out" regions on a page, and then write an interpreter that distills an MXML file to CSS and DIVs? You could go as far as background images, colors, behavior, etc. You could also write plug-ins for additional MXML tags, like mx:Accordian, to create accordian divs/js.
However, not everything technically possible is a good idea.
Either way it'll be fun to try out whatever you come up with.
Coming back to 2006 for a moment, I think there is a place for components within the UI (such as a proper data grid), but I'm not yet convinced that a component only specification is sufficiently flexible for all the little snippets of junk that real world applications tend to require, but this is definitely the direction I am thinking about long term along with a WYSIWYG GUI deployment technology agnostic screen builder for building views and screens and pages. In practice though I don't know if it would ever work and I am sure it would take a while to get it solid (I'm thinking late 2007, but I could be wrong!).
@Andy, Thanks - will play with that one and see what it looks like and let everyone know.
@Adam I find the complexity of the Yahoo! library too high. The generic support for nesting allows you to do everything, but it makes the handful of real world layouts we usually have to deal with more complex than they need to be.
@Matt, Cool, thanks! I'll check out Andy's link to see if this solves the problem well enough. If so I'll direct everyone there. If not I'll explain why it doesn't work for me and for anyone else who prefers LightCSS we'll get this show on the road!
Thanks for the link. I get what they have done, but they haven't solved the problem for me. I need pod support, I need the ability to define things like a content footer (under the content area) and a full width footer (across the whole width of the bottom), and I also need a set of best practices for navigation and content area based tags with support for setting tags as a site level (perhaps the general bodytext div is consistent site wide) and overriding at a pane level (where I want to not have underlines on my sidebar links but to have them throughout the rest of the site) and it should make all of that really easy. I also wanted to define an appropriate subset of standard ad advanced properties for each class of div (distinguishing between image, text and container based properties) and to clarify which were standard and which were advanced so it would be easy to write a generator for managing it.
So, I think still enough value in LightCSS to be worth doing. From there I'll then work on the generator.
Mollio might be a start
http://www.mollio.org/
Thanks. I've not played with Farcry (although I keep meaning to), but I knew they were involved with Mollio so I did check it out. It does some of the things I wanted in terms of the containers but not some of the other things and in the end it was as easy to just work up a new framework with a slightly different approach. I don't believe it is the complete solution, but it is definitely an alternative people should consider to LightCSS and has a Google groups with a few postings most months so there is some usage.
I'm still going to get LightCSS finished out, as it seems to have a place, but I agree Mollio is about as close as I've seen to a solution so far for what I'm looking for and I like their nice clear style guide (although think it could have been done in jpg's - I don't love downloading PDFs!
Just thinking out loud here (I know I shouldn't but no one is here to stop me) but carrying on from what Joe said. If you defined the xml could the interpreter not be XLST to create the HTML and CSS?? (sorry if thats what you meant Joe).
Honestly I need to play with Flex as I don't know enough about MXML container tags and their expressiveness. If they were sufficiently expressive this would be a really interesting approach as it would allow you to use a single language for layouts irrespective of deployment technology which would be cool from a syntax PoV even if you chose to implement different skins for rich vs. traditional displays (which is likely). I'm concerned as to whether the MXML would be sufficiently expressive, but will have to find out when I get a chance!
FWIW, I don't love XSLT so I'd probably just treat the XML as a domain specific language to drive the generation of the appropriate HTML/CSS, but the XSLT approach probably makes more sense if you're comfortable with the approach and syntax.
"However, not everything technically possible is a good idea."
Why introduce an unrelated language for anyone using this framework to learn.
To solve the problem you are trying to solve, just make the position/layout and css customization easier and you solve your problem. Very few CF developers know mxml, plus it is so verbose. I personally don't care for flex and don't really want to have to learn mxml just to layout an HTML/CF app.
In other words make the difficult part easier (layout & positioning) through your framework as most CF or HTML developers are familuar with style property names and what they do.
Your blog rocks!
I loved learning about http://www.code-sucks.com
thanx
Thanks for the comment. Since I wrote the article, I've actually changed my position on handling CSS (sometimes you just need to try different things and they don't all work out as you'd expect!). I'm now more focused on creating a framework for a set of use cases that focused on the semantics of the content rather than presentational markup. When I get something stable enough to share, I'll definitely release it.
The closest to LightCSS that I've found would be YUI grids or Blueprint. They are definitely different, but Blueprint in particular is a quick and easy way of creating CSS for sites if you're not too concerned about keeping presentational information out of your markup.