Jump to content

Things to read about css frameworks


pwired
 Share

Recommended Posts

There are a few other topics floating around regarding css frameworks, etc.

I believe that before any one uses a prebuild framework, that they should first build their own. Knowing how it's done goes a long way into understanding the logic used in other frameworks.

I have built a few myself. Some were using em for widths, another used hard-coded percentages, yet another used LESS to auto generate the percentages with varying column widths.

After learning all I could on how grids work, I tackled some of the better known models and have settled on Zurb Foundation. It is as bloated as many other big frameworks, but I always end up removing the fluff I don't need :) 

Link to comment
Share on other sites

So then, would be interesting to know, who is using what css framework and why - - - - ?

and who is coding his own responsive css layout and how - - - - ? Example would be nice.

Currently using Foundation 4.2.1. Fully responsive, mobile first, easy to generate complex layouts, nestable grids.

I've been using Foundation since it was on version 2. They've made some great strides improving the framework.

Since mid version 3, I stopped coding my own. Simply because browser testing became cumbersome and tedious. While I greatly enjoyed building my own css framework, the "wars/debates" between Skeleton, HTML Kickstart, Twitters Bootstrap and other popular titles, was becoming tougher to choose an alternative to a DIY method. I just got tired of reinventing the wheel.

  • Like 1
Link to comment
Share on other sites

hmm, the most links in the first post are really old? Think today it's mandatory to build a site responsive.

Made my first two (small) responsive projects with Kube. Easy to understand and use. Nice documentation.

Not so bloated like the big ones. Also there are two demo site to learn from.

Locally I'm just playing around with Pure. Also a nice slim framework.

For me a small framework like Kube or Pure is really helpful. Like OF said: no need to reinvent the wheel.

BTW: this thread should be better placed under 'Dev Talk' (no PW topic..)?

  • Like 2
Link to comment
Share on other sites

Greetings everyone,

Thanks for this discussion -- especially the parts about skipping Photoshop! I can't tell you how many times I have done work for agencies where the Photoshop mockup doesn't actually look the way the live site will look. Unless you are doing a "sketchy" mockup in something like Balsamic, the whole point of a mockup is to closely represent the site. Otherwise, it's just a nice bit of impractical artwork, and then you have to explain to the client, "Well, that was just a mockup..." I never understood that.

I've always favored building live sites as "mockups" or "test sites."

Regarding CSS/JS frameworks: I still don't use any of them. But every discussion like this makes me feel that I need to start.

And here we have another advantage of using ProcessWire! Because it is so easy to create whatever designs you want with ProcessWire, it's pretty easy to mockup a few versions of the site you're working on.

Thanks,

Matthew

  • Like 1
Link to comment
Share on other sites

Only problem with foundation: It is not tolerant at all to older browsers.

From our stats still more than 20% of the users come from IE 8 and older.

This is why I'm currently working on a Processwire site profile based on unsemantic grid system. It claims itself the successor to the 960 grid system and promises backwards compatibility down to IE 7. My site profile still needs a little polishing but I'll than make it public on Github. Hope to have it ready by the end of this week. You can see a preview here.

  • Like 3
Link to comment
Share on other sites

Is this only for frontend or you are doing Admin theme as well?

Thanks kongondo. In the moment it's only meant as a basic starting point for frontend development. I have no plans for an admin theme.

Link to comment
Share on other sites

Made my first two (small) responsive projects with Kube. Easy to understand and use. Nice documentation.

Not so bloated like the big ones. Also there are two demo site to learn from.

After some playing around, Kube seems to be a good one to start with for my coding level, thanks.

Link to comment
Share on other sites

At dragan

http://37signals.com/svn/posts/1061-why-we-skip-photoshop

Use illustrator to make quick mockups then either stay in illustrator or export parts to photoshop.

Or create in photoshop and import in illustrator.

Many try photoshop simulations with the latest css and js but it always looks a bit dull and blurred

when compared with photoshop. Same story with adobe flash that always looked so damn crispy

clear and shiny. Todays html5 and css still don't come close to adobe flash. But hey Big Apple

banned adobe flash and a new hype was born.

Also photoshop graphics are 100 % browser compatible and need much less database calls

compared with the database calls needed for all that mathematical css and js.

check this out

http://www.photoshopwireframingkit.com/

Link to comment
Share on other sites

960.gs was the one that really kicked in then back in the days - for me and many others. I liked it so much that when I decided that we need to build our own fluid grid system, it had to be based on 960 syntax and be fully compatible with ancestor. BFluid was born. Since then it's been my one and only choise for css grid.

Why to build own css grid when world is full of them? Simple - they don't bend the way you want. Most are based on fixed column count and don't support gutter + padding in cells. I also hate to have axtra markup for every row or extra class names for first/last items.

BFluid is build on LESS so you can create custom grids on the fly. And have as many or as little of columns as you need - with gutter and padding. Nesting, multiple grids, fixed grid, semantic markup - it's all there. All we would need is some spare time to build cool site for it - or at least decent documentation. Maybe this summer..

  • Like 1
Link to comment
Share on other sites

Finally a css framework that doesn't søck

http://gridiculo.us/index.html

  • Based on a twelve columns grid
  • Max site set widths of 1280px, 960px, 640px, 320px and full width
  • Allows for nested columns
  • Spacer columns available
  • Fully responsive images
  • Responsive typography
  • Works on desktops, tablets and smart phones
  • Optimized for iPads and iPhones
  • Includes Normalize.css by Nicolas Gallagher and Jonathan Neal

https://github.com/cbavota/Gridiculous

Link to comment
Share on other sites

I've been using Susy for some small personal projects and once you get the hang of it every other framework feels like a bloat.

Their adagium is: Your markup. Your design. Our math. Sound familiair?

  • Like 1
Link to comment
Share on other sites

This is why I'm currently working on a Processwire site profile based on unsemantic grid system. It claims itself the successor to the 960 grid system and promises backwards compatibility down to IE 7. My site profile still needs a little polishing but I'll than make it public on Github. Hope to have it ready by the end of this week. You can see a preview here.

 

Hi totoff, it looks very good. Why do you haven't done it last month?  00008514.gif

 

Now I had to build my new site on a basic html5 boilerplate.

(und durchwandere im Moment ein Tal der Tränen beim Versuch all die hinzugefügten jQuery slider-, slideshow-, und 'was nich alles' -styles miteinander zu vereinen)

 

When starting with it, it should be IE7+ compatible, but if it is so, after I'm done? Who knows. ;)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...