CSS / Template Framework.

[Biorn]

Hi all..

I was wondering, Is there a nice css/template framework out there?

I have been playing around with Twitters Bootstrap, but It has its limitations..

Let me hear your 2 cents..

[SiNNuT]

It depends on what you need. Curious as to what limitations you encounter in Bootstrap.

Also, responsive is all the rage nowadays but not everything needs to be responsive.

Anyways, some nice ones:

http://foundation.zurb.com/

http://www.getskeleton.com/

http://www.gumbyframework.com/

http://www.yaml.de/

[joshuag]

Hi, I have a small framework called HTML Kickstart. http://www.99lime.com

[yellowled]

Personally, I don't use CSS frameworks (any more). I base all my projects on the HTML5 Boilerplate, but that's mainly because it gives me a solid starting point, mostly in terms of CSS normalization and .htaccess defaults. I really love it's build script since it takes care of a lot of small optimization tasks.

I also have a set of CSS files (actually SCSS) to "enhance" it, i.e. stuff I often or almost always need, but I wouldn't call them a framework, especially because they're very much tailored to the way I work, which might not work for everyone. Those include basic styles for forms, a sensible typographic baseline, some Sass/Compass mixins for some common CSS "tricks" and a very basic fluid grid system. It's really more of a toolbox.

The "market" on CSS frameworks has become insanely huge and crowded with a lot of so-called frameworks which cover only a fracture of what a framework should cover as well a some which try to cover everything. (And that back to IE 5.5.) It's really hard to give a recommendation since what they actually cover is so different. Are you looking for "just a grid system"? Do you want something which covers everything one might need in building a site? Do you need support for Sass or Less? Do you want just a CSS Framework or some JS/jQuery widgets included as well?

Twitter Bootstrap is very popular these days, unfortunately, a lot of sites built with it tend to look very much alike. Zurb Foundation is pretty similar. YAML is always a nice alternative if you need support for older browser; unfortunately, it's rather big because of the browser support.

[Pete]

Joshua's HTML Kickstart is excellent if you want some neat stuff out of the box and the files are split up nicely if you only need a few things as well. I've got some things I'd like to use that for.

At the other end of the scale, I'd quite like to use Skeleton for a project I'm starting soon as it doesn't make too many assumptions and gives you a bit of a head start whilst doing some of the boring stuff for you (setting up base classes etc). I think though that like ryan has done on the ProcessWire blog profile that I'll tweak it to scale a bit wider than its default.

As yellowled quite correctly points out though, it all depends what you're after.

[DaveP]

I've used Skeleton, Foundation and Bootstrap, and they all have their strengths and weaknesses. (Converting a site from CodeIgniter to PW and from Bootstrap 1.4 to 2.0 at the moment.)

Probably, yellowled's approach of gathering together a suite of components and tools that works for you is a good solution if you are organised enough, which I ain't.

[arjen]

Not much of a framework, but you might want to look at gridset by Mark Boulton Design. It's a tool to create grids and generate css only for your own grid. It is very flexible. You basicly have to build your own grid. Perhaps it's the equivalent of ProcessWire in the grid world.

[yellowled]

Not much of a framework, but you might want to look at gridset by Mark Boulton Design.

Last time I checked (it's been some weeks), this produced huge CSS code, at least for responsive grids. It is still work in progress/beta, so I'm not sure you'd want to use this in production just yet. I am, however, sure that the fine people at Mark Boulton Design have some tricks up their sleeves to make this a powerful tool in the future.

[renobird]

Awesome! I hadn't seen HTML Kickstart before, looks really cool.

I've used Skeleton and Bootstrap quite a bit, both are great.

[ryan]

I've now used Foundation (2 & 3), Skeleton and HTML Kickstart. Skeleton fits its name in that it doesn't really do anything more than provide the skeleton for a responsive site. It's not what I'd use for a rapid prototype because it still assumes you are going to handle most of the front-end development stuff (and this is one reason why I like it). I was pretty pleased with Skeleton when making the Blog profile, and didn't run into any real mysteries or time sinks with it.

Foundation and HTML Kickstart provide a lot more stuff for rapidly prototyping. If you need responsive, then HTML Kickstart is probably out. But if you don't need it, then I would stick with HTML Kickstart. That's because Foundation has a tendency to sometimes fall apart as soon as you throw anything at it. Example: put one too many items in a horizontal nav-bar and it breaks the whole thing. Troubleshooting this stuff sometimes takes longer than if you'd just started from scratch. I don't think that they did much "stress testing" with Foundation. Whereas HTML Kickstart is much more bulletproof and a lot more stuff "just works" without requiring a lot of your time. In addition, it comes with a few more ready-to-use components than Foundation. No doubt that Foundation just plain looks good, but it's kind of fragile. Still, it's got more going for it than not. But out of these 3, if you don't need responsive, I prefer HTML Kickstart.

[arjen]

Last time I checked (it's been some weeks), this produced huge CSS code, at least for responsive grids. It is still work in progress/beta, so I'm not sure you'd want to use this in production just yet. I am, however, sure that the fine people at Mark Boulton Design have some tricks up their sleeves to make this a powerful tool in the future.

I should've mentioned it is still running in beta, but the way you can create your own grid relatively easy and that you are in total control (of the grid) is second to none in other frameworks. Perhaps it still produces huge css, but I think the advantages outweigh the disadvantages. I already really like it. You indeed shouldn't use this is in production yet.

[onjegolders]

Have to say I only really started using these frameworks when responsive design became such a game changer. It's just something that I didn't feel comfortable doing all by myself.

I agree with Ryan though that sometimes debugging someone else's coded ends up being a lot more long-winded than using your own.

Things like modals and form defaults are definitely a reason I've used Bootstrap on my last couple of projects. I certainly understand people's fears that these sites can all end up looking the same but I tend to only use a couple of bits and pieces from the CSS and mainly rely on the responsive grid.

[Biorn]

Thanks for the inputs...

[apeisa]

Out of the interest, I compared few of the most popular/promising responsive frameworks. Gotta say that those big boys (foundation and tw bootstrap) are huge.

Kube 20.4kb

Skeleton 8.8kb + 1.7kb + 9.6kb ~ 20kb

Foundation 85kb

Twitter Bootstrap 115kb

(without minification and gzip)

Then I took a look at few responsive sites we have build from scratch and the amount of css was between 10kb ~ 50kb. Usually less than 20kb. Of course lot of the code from the frameworks can be removed per project basis, but that adds management overhead.

Reason for this "study" was that I am looking for best possible starting point. I am thinking going for simple responsive grid / column system and some very basic typography settings, but pretty much with that. I am not keen adding 100kb CSS just for starters. I am not only worried about loading time, but about performance of mobile browsers to handle that all (specially with older/cheaper devices).

[arjen]

Apeisa, you might want to take a look at the Golden Grid System. It’s not really a framework. It’s more of a starting point and a couple of guidelines. It should save you a couple of lines of css

[SiNNuT]

There is a lot more to (CSS) performance than sheer filesize. In theory, a 20kb css file could perform worse than a 200kb css file. This has to do with the way that you craft your css rules. Some time ago i saw some very interesting videos about modern web app/site performance testing that also detailed some common css pitfalls. Unfortunately those bookmarks are AWOL.

[MatthewSchenker]

Greetings,

Glad to discover this topic.

For a long time, I've been building my own library of CSS elements, and I have a set of UI elements (sliders, tabs, buttons, etc) from various sources. I get a tab element from here and an image slider from over there, button ideas from over there, a particular technique for being responsive, etc. Working this way has helped me learn more about how JQuery works, and to understand responsive design.

At the same time, I like the idea of putting all these parts together into a single toolbox like Bootstrap or Foundation. The downside, it seems, is that it feels like a toolbox is a way of saying that you'll now limit yourself to the tools and techniques included in that system. I know you're not forced to do it, but if you're not using those elements why bother with the toolbox? Still, I definitely see how using a toolbox would speed up my development. I also see how it can be beneficial to get involved in a community of developers who are using it.

In recent years, I've been using Joomla for all my sites. With that CMS, the difficulty of including a framework makes you avoid it. Now that I'm using ProcessWire, including a toolbox seems rather intuitive, so it's become a burning question for me.

After playing with Bootstrap and Foundation... It's a close call, but I like Foundation a bit more. I was looking for a tie-breaker, which for me was the Orbit image slider (http://foundation.zurb.com/docs/orbit.php)!

Thanks,

Matthew

[neildaemond]

I found this thread a bit ago and was like "oh, css framework? whats that? LESS scss? what?..."

I spent the next few days getting blown away with thoughts of being uber productive from then on, after installing and testing the full customizable verisons of bootstrap and foundation. I was conviced that foundation was going to make my life a breeze ( i too favored the orbit script, and the modern style). However, I was doing a very specific and custom design and I jsut couldn't mold it to do what I wanted to. the scss code behind it really is huge, and its only easy to change the basic options. I scrapped the whole thing and rewrote it. plus I was waiting quite long each iteration to let compass recompile.

I think the bulkier tools have their place with utility sites and web applications, but for a site focused on company identity, it seems too cookie-cutter for my liking. I resorted to using LESS with semantic.gs grid system. Its a very basic grid system, but allows me to control thing more with css, instead of too many classes in my xhtml.

I think I like having more control over my tools, and thats why I like PW. Its kind of like the new lego... sure the starwars models look cool but, those giant peices used in a ship will only ever make another ship.

[MatthewSchenker]

Greetings neildaemond,

I'm still investigating the use of these toolkits, and very much on the fence about it. It helps to hear your experiences with Foundation. Sounds like maybe you and I are at the same stage with this?

I'm wondering whether for people who have already built up their own CSS library, if the simpler CSS grid systems (without all the UI elements) are a better way to go?

The one area that I feel is a big benefit is the handling of different viewports. Like everyone else, I've struggled with nailing down a set of responsive elements in my own toolbox. Foundation and Bootstrap do seem to have that pretty well taken care of. But then again, some of the simpler grid systems also have that down.

One of the great things about ProcessWire is that it is easy to experiment with all these toolboxes pretty quickly.

Thanks,

Matthew

[neildaemond]

I took the queries used in skeleton css I also took their base for normalization and to fix the typography.

Their limits seem to be nice but, I still have to figure out how to properly modify the css within them though~ I'm hoping that using LESS I can adjust some variables and that can have the proper effect on the page~ havn't gotten to that point yet though, haha

[ryan]

I'm with Neil on Skeleton -- that's what I used on my last project, after some modifications. Skeleton is not really doing anything other than giving you the responsive grid and typography baseline that's more useful than a reset.css. This is nice if your need calls for a custom design without any influence by the framework. It's also very easy to modify Skeleton because the bulk of the layout customization is in one CSS file that's easy to follow. But it's up to you to provide anything else, so there's no image carousels, lightbox, dialogs, icons or any of that fun stuff you might get in other frameworks. So I've been keeping /site/templates/foundation/ and /site/templates/html-kickstart/ directories that have those frameworks, and selectively including elements from them too. On my most recent project, I used Skeleton as my base but combined it some of the useful widgets in Zurb Foundation and HTML Kickstart. This might sound kind of heavy-weight, but it's a lot lighter weight than using just 1 framework if you do it efficiently and only pull in the elements you want to use.

[OrganizedFellow]

I came across this recently.

Responsive CSS Framework Comparison

Bootstrap vs. Foundation vs. Skeleton

http://responsive.vermilion.com/compare.php

[JeffS]

Andy Clarke release a complete redo of "320 and Up" which is mobile first based off HTML5Boilerplate. No docs but CSS.

[OrganizedFellow]

Andy Clarke release a complete redo of "320 and Up" which is mobile first based off HTML5Boilerplate. No docs but CSS.

AWESOME!

I love his work.

[MatthewSchenker]

Greetings,

After looking into this intensively for the past week or so, testing a few different systems, and reading up I am reaching some personal conclusions...

I like the built-in capabilities that CSS/JS frameworks offer. But I don't like how often I read about people struggling to figure out why a basic CSS action suddenly doesn't work under a certain framework (for example, difficulty in implementing hover effects or a CSS overlay). Also, I have found that I really like to explore and see all the new JQuery plugins available for a given task, which means I am likely to keep wanting to use a slider, carousel, modal, etc., that is not built into the framework.

Still searching. Glad to know that I am in good company here!

Thanks,

Matthew