Creating new responsive theme based on Foundation

[formmailer]

Hi!

I am planning to make my existing site (http://www.zwedenweb.com) responsive, but need some help to get started.

The first question: modify the existing theme or start from scratch? I figured that starting from scratch is probably best. Am I right there?

Second: I think I'll go with Zurb's Foundation, but don't really know where to start. Is there a guide or write up how to create a foundation theme in PW? I searched the forums, but didn't find the stuff to get me started.

//Jasper

[pwired]

Hi

Foundation, Bootstrap, Skeleton, etc. have a lot more features than just responsive, if you are after that then take one of those. If it is just responsive you are after have a look at pocketgrid css

http://arnaudleray.github.io/pocketgrid/docs/ (scroll to section Making it responsive)

It's easy to insert, gives you full control and takes only a few lines of code.

[LostKobrakai]

I'd definitely vote for starting from scratch. If you really want to reuse parts than just copy and merge them into the new templates. This avoids unnecessary clutter from the old templates/styles.

For the Foundation thing. There's nothing special about Foundation, it's just some css/js. If you're unsure about how it works I would suggest just taking the any of your sites and try to rebuild it in a static html with the building block you'll find in the docs of the framework. This way you'll get used to it. It's mostly just some special classes and sometimes specific markup, but you should get started by copy&pasting from their examples. Also Foundation is really baseline from the styling perspective, so you'll need to put your own styles above this baseline. It's more about providing a gridsystem and some responsive components.

[formmailer]

For the Foundation thing. There's nothing special about Foundation, it's just some css/js. If you're unsure about how it works I would suggest just taking the any of your sites and try to rebuild it in a static html with the building block you'll find in the docs of the framework. This way you'll get used to it. It's mostly just some special classes and sometimes specific markup, but you should get started by copy&pasting from their examples. Also Foundation is really baseline from the styling perspective, so you'll need to put your own styles above this baseline. It's more about providing a gridsystem and some responsive components.

This is the "Hack on CSS" option on http://foundation.zurb.com/docs/, right?

The part that confused me was the "Customize with Sass" section, but that might be completely over the top for what I need... 

//Jasper 

[louisstephens]

To answer your question, "the hack on css" is the normal download of Foundation (sans SASS).

I have used both bootstrap and foundation in many projects over the last couple of years and they are both quite easy to implement. The only major differences that I have run into with using the two is bootstrap seems to be a bit more documented and discussed by other users, as well as the class names. 

Bootstrap seems to have a few more resources out there as well if you ever need assistance (ie bootsnipp) where people post snippets of code.

[Juergen]

Bootstrap 4 is coming soon (http://blog.getbootstrap.com/) - the alpha release is out there.

[Peter Knight]

After using both Bootstrap and Foundation for the past 2 -ish years, here's a list of stuff I wish I'd known "back then".

Bootstrap comes with a nicer default styling. It shouldn't really matter as the point here is to put your branding on the top. 

Foundations default aesthetic isn't as pretty IMHO and I have to do more work on top of a Foundation install.

Foundation doesn't have an x-small grid and starts at Small. 

Bootstrap on the other hand does have a =n x-small grid and I miss this when working with Foundation

Foundation has slightly less code in setting up a row/column layout.

Bootstrap has an extra Container class that each row everything needs to be wrapped in

Both are pretty heavy in JS. Dont call all the JS. Just call the JS for the components you need

That's pretty much it for me, I settled on Foundation but miss Bootstrap and am thinking of reverting or trying something much lighter. Heard good things about http://getskeleton.com/

[LostKobrakai]

While I'm using Foundation in a current project I'm still not keen on both of those frameworks. The only thing I always liked is the ready-made form styling, but I found this scss for that a few weeks ago: http://formhack.io/. Otherwise I just use normalize.css and some grid system (haven't found the optimal yet) for my websites. If it just needs to be an internal webapp of sorts I stick to Bootstrap, as it's the prettier one.

[tpr]

What I usually use is Base. It's basically a grid and some useful helpers, nothing special. For elements styling I prefer to start from scratch.

Believe me, Foundation or Bootstrap (and alikes) only makes you lazier

[Juergen]

Believe me, Foundation or Bootstrap (and alikes) only makes you lazier

Thats true, but it saves much time.   What I like on such frameworks is, that all the files are reachable via cdn for free (maxcdn, cdnjs.com,...). This makes the loading of huge amount of data very fast.

[Christophe]

Some interesting alternatives among others: uikit, semantic ui, kraken, pure...

NB: I've just noticed that skeleton has a new website

Edit: I have just found (again?) http://materializecss.com/

Edit 2: apparently materialize is also supported in Pinegrow