Discuss: CSS Frameworks

**Nick** · 01-21-2010, 09:24 AM

The current default theme for Hotaru is loosely based on the YUI CSS Grids from Yahoo! But YUI is just one of many frameworks out there that people use. I know 960 is popular, and I've started playing with Blueprint.

For Hotaru themes, it's easy to apply such frameworks to the skeleton of your theme, i.e. the index.php template, but because plugin templates are inherited, you can't apply your chosen framework's class names to the HTML in those templates unless you move them into your theme folder and edit them there. That could dramatically increase the number of templates in your theme.

So which frameworks do you like, and what are your thoughts on applying them to Hotaru?

**newbieone** · 01-21-2010, 09:41 AM

Ok lets get the ball rolling then:

Obviously if your a member here you are interested in Hotaru that much is certain and the scope for it is excellent.

Currently I have just about sorted my WAMP server (6 hours last night, am now v.tired) and have installed HCMS to get cracking on a new theme, toying with 960.gs and as Nick just pointed out Blueprint (new one to me! Cheers Nick)

The main thing we need to get right obviously is aesthetics, Nick has very kindly created an excellent platform for us to build upon to create a template/theme for HCMS.

Lets all muck in together and post our themes for others to critique!

P.s. I am going to document my exploits with the CSS framework I chose on a blog right here on Hotaru, as I believe any tips we can give each other will not only benefit HCMS but all of us as well as individuals. Lets make Hotaru THE platform of choice for social bookmarking!!!

**rushnp774** · 01-22-2010, 03:07 PM

I'm at work right now so I didn't have too much time to do thorough research on the topic, but I found an AWESOME article about this subject that might help. It's called 5 Popular CSS Frameworks Tutorials & Tools for Getting Started. It talks a bit about some of the top frameworks, shows pictures, and links to demos & articles about them. The five frameworks are:

YUI Grid
960
Blueprint
jQuery
YAML

In my opinion, jQuery and YAML look VERY promising (my vote goes to jQuery), and they both come with very comprehensive AJAX-based builders to create your base structure & colors. I used some of jQuery UI for another project I worked on a while ago, and absolutely loved it. The base UI components (buttons, sliders, panels, tabs, accordions, etc) look slick, and with their ThemeRoller, you can customize the colors of each control to match your site. Best of all, they're stored in a different CSS file, so you can change with ease!

Hopefully this helps all you pro designers out there. I'd be happy to do some more research once I'm off work. Probably should be looking at Hotaru stuff when I'm at work. Oops

**Nick** · 01-22-2010, 04:04 PM

jQuery is a JavaScript library, not a CSS framework. It's damn good at what it does and is included in Hotaru by default (/libs/extensions/jQuery/), but it's not a CSS framework

I'm not terribly satisfied with Blueprint. I had a three column design in Firefox, but one look in IE8 and all three columns were stacked on top of each other! It was quickly fixed with IE's "Compatibility view" button, but I doubt many IE users even know what that button is for!

**rushnp774** · 01-22-2010, 05:18 PM

Fair enough. Either way, I think that using jQuery for the base UI components (for the sleek look and easy color changing to match any site) combined with a CSS framework could be the best option. But what do I know?

**Nick** · 01-23-2010, 10:06 AM

Originally Posted by rushnp774

But what do I know?

More than me by the looks of it

The jQuery UI CSS Framework: http://jqueryui.com/docs/Theming/API

**rushnp774** · 01-24-2010, 05:25 AM

LOL, they must have added the CSS framework quite recently then. I know nothing about the behind the scenes of what makes jQuery so awesome, I just think their UI components, and ability to easily add rounded corners/drop shadows/etc to elements is fantastic! I'll try to look into it more.

**baadier** · 01-28-2010, 08:01 PM

Was a framework used on the keep it simple theme or was it a straightforward port of the css over to hotaru?

**rushnp774** · 01-28-2010, 09:31 PM

Originally Posted by baadier

Was a framework used on the keep it simple theme or was it a straightforward port of the css over to hotaru?

Not sure about that one, but it appears like Jason just used a straight CSS port for his version for the new base Hotaru theme. It looks slick: [link removed].