Jump to content

in between foundation and pw


Recommended Posts

While developing in PW I use foundation. Mostly because it's easier to read.

but i really doubt if they ever succeed in making all what they promote work smoothly:

equalizer - does not work on all elements.

buttons - configured paddings and font-size are really bad.

panels - only work good on <p> tags.

dropdowns - does not adapt itself on small screens right away. Worse is it pushes content down.

font icons - are very limited to what someone would really need.

off canvas - does not go full width and height - unless you hack deep.

block grids or columns work well - unless you specify a ->size(x,y) in pw... had to set min- and max on css sizing...

Abide - used it, but not anymore. It was looking bad making rows expand on focus or error.

so many issues...

I now basically use it for the rows and columns, and if needed set small medium or large. Remove most of the padding and margin on small sized rows and columns and set those in css myself. Buttons and tags I make them myself through css. At least it's easier to control padding, margin and font-size. I use font awesome for icons - it seemed they have everything you need and look even better.

I am pretty sure bootstrap has issues to. And I am curious to see how people develop with those two.

ps. I am really happy with Processwire! It can do almost everything if you really sit down for it. I guess Ryan's next PW implemantation will be:

GetMeaBeer() . lol

Link to comment
Share on other sites

There's a reason it's called "Foundation" :)

There are building blocks and you're supposed to pick and choose and alter to suit your site.

I'll just pick up on a few of those points:

  • buttons - you can change the size and padding - you're supposed to if you want to
  • font icons - that's subjective. Depends what your needs are on any given site, but I tend to lean on FontAwesome a lot or use Fontello if I want a tailored package of icon fonts from a variety of sources
  • off canvas - it's not designed to go full-width. It's for things like sneaking a nav menu on at smaller screen sizes, so it does what it's designed to do

None of these frameworks are likely perfect for what you (or anyone) want out of the box - they're building blocks to give you a head-start. I suspect if you are having to change so much it's taking up a huge amount of time that you might be better off with a very simple responsive grid stylesheet (plenty mentioned in the forums) and build your other styles and hand-pick jQuery widgets yourself.

There has to be a point where you step back and realise it's taking too long and then move on from that with something different or home-brewed and it sounds like you may have arrived at that point :)

I think they have succeeded anyway because there are many thousands of sites using it and when your CSS/JS framework ends up on Themeforest... well... lots of sales based on thousands of people buying pre-made Foundation themes.

Link to comment
Share on other sites

I get what you say - building blocks. It's also easy and the reason I use it. Basic and to be changed when we need. I have not really changed that much, just changed some things for small mobile sizes and don't use what takes to long. Had trouble with sized PW images shrinked by foundation...

I really liked the off canvas - especially the concept Facebook (among others) is using. It's apealling to the eye. Was reading on the off canvas concept and I found out, that content is loaded lazy and placed into focus when needed. It's actually a litle faster then requesting single pages because it is not nescesarry to download header and footer again. Downside is that one has to load yet another jquery for that.

Now I try to focus on tabs were tab content slide in with css only (works about the same as off canvas) but is so much more fast. Just have not found a good tutorial on that. codrops has some nice examples...

  • Like 1
Link to comment
Share on other sites


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...