Zurb Foundation 5 Released
foundation.zurb.com
foundation.zurb.com
"Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.”
http://foundation.zurb.com/docs/components/interchange.html
Offcanvas Javascript (Originally bolt-on, not bundled)
http://foundation.zurb.com/docs/components/offcanvas.html
"Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes."
http://foundation.zurb.com/docs/components/abide.html
Zepto support has been removed from Foundation 5.
Docs are continuing to look better, and they still have docs back to Foundation v2.
Thanks Zurb!
The only migration that should have to happen at this point is JS fixes.
http://foundation.zurb.com/docs/upgrading.html
as well as a migration plugin that will allow you to use the f4 style js and get deprecation warnings via the console:
Why not just use Interchange itself?
Hrm. Oh, right. It was angular-ui, which uses Bootstrap.
Angular integration for any of these projects is a BIG win. Because of that, I'm eagerly awaiting an RC for Angular-Semantic[1], so that I can cut over to Semantic-UI, which is, I think, best of breed as far as these frontend aesthetics go.
https://github.com/najlepsiwebdesigner/foundation-datepicker
The Angular-UI implementation, while self-contained, is going to have a different .modal() implementation than Foundation's, so there's always going to be relics in the implementation.
Implementing twice the framework for the same functionality seems a sure fire way to induce headaches.
Your advice isn't wrong, and worked great for a good number of months, but requires ignoring the JS components of Foundation altogether, which somewhat negates the benefits of having a big ol' framework in the first place (IMHO).
It's still a young project, and imho one of the best looking ones, but there are still a lot of quirks to work out.
I'm open to change and debate, but it should be approached carefully.
cACertificate*
Talk about slavish consistency.Citation?
Seriously, does someone need to crawl every Javascript project on Github and compile statistics on naming styles before they can make an obviously true statement like this? The fact that camelCase is the norm in the language and browser environment is obvious to anyone who has written even a modest amount of JS.
notQuantified != falseto avoid type coercion here
You mean... like this? http://sideeffect.kr/popularconvention/#javascript
Unfortuantely there's no stat there for camelCase for Javascript.
hideImage vs hide_image: 424 vs 50
toggleItem vs toggle_item: 1022 vs 52
clickElement vs click_element: 3469 vs 368
Coding conventions by statistics :)
https://github.com/search?q=searchPage+extension%3Ajs&type=C...
Well, it's sure as hell not window.set_timeout, window.clear_interval, window.on_load, etc.
JavaScript.
Constructors use PascalCase; variables and methods use camelCase.
So, it's OK to call it JavaScript! :-)
I have literally never seen a large-scale open source project or JS style guide that uses snake_case.
The DOM is camelCase. jQuery is camelCase. Node APIs are camelCase. Why on earth do Zurb think their library is any different?
Really? Why on earth would you care? What if they were to indent their code with 3 spaces? Would that be "insane", too? What if they don't like putting in unnecessary braces around one line "if" statements? Insane?
It's a (very common) stylistic choice. It's hardly insane.
I don't care what their code looks like internally. I do care about the public interface to it.
Whoa there buddy! Put the gun down...
Whoa buddy! Put down the gun...
On a serious note... is this trolling or are people seriously complaining about camel-case vs snake-case?
I love Foundation, but I had to switch to Boostrap because I found it... ugly. And Bootstrap is great to quickly create "pretty" prototypes. But I've always found Foundation having better... foundations. I've used both on numerous projects and here's my take :
* The grid system now looks like bootstrap, and I don't like that. You have to choose the type of column you want to use (and I don't want to be bothered by that). so no .six anymore, it's .medium-6 or .large-6 or .small-6... They should call the .small-6 just .six so we know its the default one.
* It does look a bit better, although they removed styling of the radiobox in forms? Why?
* Overall I still prefer bootstrap's theme, I wish Foundation would offer an optional theme like bootstrap 3 does.
* OffCanvas menu is great ! I can already see plenty of applications (but for mobile only)
* The CLI is a nice thing to have but I'm gonna stay away from it. I like the easiness of copypasting files to quickly begin a small project.
* Documentation is hard to go through, doesn't allow to glance at what it offers. It's a huge improvement from F4 or F3 though.
* I use sublime text snippets all the time and this might be a huge addition!
* I like the JS that verifies forms. I usually always use this on my projects so it's nice to have it by default.
Overall I don't really know if I should switch back to Foundation. But I'll definitely use it for my next project to see how good it is.
Whenever I see a new app thingy launch with Bootstrap buttons I cringe a little bit. At least Foundation forces you to make some decisions about how you're presenting things to your users rather than just leaving it how it is (although we've all seen default Foundation apps too).
I consider this is a strength, the styling is thinner so it's easier to customise. Bootstrap can feel like a bit of a battle if you want to customise it a lot. I think bootstrap is perfect for admin pages but for something a bit more custom I think foundation strikes a good balance.
But if I need to prototype something quickly, make a beautiful admin etc... I'll use Bootstrap. And I'm so used to use bootstrap that I use it for big projects as well now.
Also Bootstrap 3 is a lot easier to customize.
I use Bootstrap for web apps because I rarely need to write any CSS to get a working beta that looks nice. After I've gotten input back from the initial users I'll go back and customize the look.
Also, the medium/large screen sizes in Interchange don't align with the media query sizes. Interchange says 1024px wide is large, [2] but the media query says 1024px wide is medium. Or is it just a documentation error?
[1] http://foundation.zurb.com/docs/media-queries.html
[2] http://foundation.zurb.com/docs/components/interchange.html#...
http://blog.cloudfour.com/the-ems-have-it-proportional-media...
Here's some boilerplate code:
https://github.com/johannaruiz/propotional-mqs
Make sure you set the viewport correctly:
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-u...
as an incorrect viewport can cause issues with some mobile browsers:
http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the...
http://www.bluejaythemes.com/ http://www.twitter.com/bluejaythemes
Keep double opt-in, it's necessary (and I think required in Mailchimp's case unless you use the API directly).
edit: Apparently it's mostly js fixes for migration: https://news.ycombinator.com/item?id=6776912
Also, a year ago non-IE browsers were split pretty much 50/50 with IE, but now down to about 35/65. (Chrome and Safari were the big risers, Firefox actually dropped from 2nd to 5th)
For basic stuff like the grid, it's quite easy to manually add IE8 support, given that you're never going to be seeing IE8 on a mobile phone or tablet. For some of the more advanced components you could run into issues.
With that being said, traffic from IE 8 or less is down 58% from last year. Windows XP isn't going to die fast enough for me to begin supporting Foundation 4+.
I could push Firefox or Chrome aggressively, but that's an unfriendly half-measure.
It's not a huge deal except for the navbar, which is horribly broken in IE8. There are workarounds though.
Does it not make sense for a front-end framework to handle cross-browser compatibility for us?
There are other implementations available: https://github.com/hcatlin/libsass/wiki/Implementations
Bootstrap has more styles so you can...bootstrap. Foundation is meant to be a foundation to build on.
That being said, of course their functionality is very close, but be aware of the core differences in outlook between the 2.
Can't wait to start playing with version 5.
Of course, one uses SASS and one uses LESS. I knew LESS, so I picked Bootstrap.
But I'm more than willing to switch.
I'll take the semantics of foundation any day. Love this framework.
It's that good.
http://stackoverflow.com/questions/18648307/make-zurb-founda...
https://github.com/jlong/sass-bootstrap/blob/master/lib/_dro...
Thanks to the Zurb team! I'll definitely be ripping off lots of ideas for my company's tortoise-speed Drupal sites.
For example bootstrap 3 is a breaking upgrade and suddenly your just finished bootstrap 2 is using 'unsupported' framework.
I say this as someone who launched a site based on 2.3 as 3.0 entered RC status.
Predictable, simple and quick to iterate - everything I wanted.
I'm going to give this release a try. The interchangable items based on device widths looks fantastic! I'm really excited to give Zurb a try. :)
I'd rather not have to install ruby too just to rebuild the css. When one of these is announced I usually find myself navigating the various poorly-maintained python modules that process the source files, get lost, give up, and go back to plain css.
Perhaps I could just add a bit of css to a static build instead? Are there any shortcomings to that?
However, after taking a look at Foundation 5's plugins, I will definitely try using the framework if I need to undertake a website with more ambitious functionality.
My main platform so far has been extremely buggy too and is not even primarily made to create websites. I've been using Google Web Designer. Take my advice with a grain of salt as I represent hobbyist developers who thought "hey, i'd like to build a site. what tool should I start with?" I would not invest $200 to enroll in your intro course for something that gave me an initial first impression of being flimsy. However, it is equally likely that I am unable to realize the full potential of your product with my limited understanding of web development at first glance.
I'm excited about seeing how Macaw works and am going to begin a new project with Bootstrap soon. While my main focus has been purely static web design I plan to incorporate dynamic applications within my approach very soon.
If it's the latter, a simple Google search for "how to use Bootstrap" turns up a lot of resources, including this one[1], which looks good. You might be able to find Foundation-specific ones, but Bootstrap seems to have the edge in popularity.
[0]: http://foundation.zurb.com/docs/components/grid.html [1]: http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bo...
http://www.webdesign.tutsplus.com/tutorials/htmlcss-tutorial...
http://www.lynda.com/Foundation-training-tutorials/1628-0.ht...
Some pain points from using Foundation (4) in our latest project: * topbar sucks * custom forms are horrible (they seem to have been removed from 5, or maybe justs the docs are missing)
Also, using under_score instead of camelCase in javascript is a questionable choice with no real benefits.
To the foundation team, "makes us to do so much quicker" should probably be "enables us to do so much quicker".
Anyway, looking at it on my laptop now. It looks great!
There's a bug in mobile Safari that I can replicate on other sites. Scrolling on Craigslist's map view when the page is loading also crashes the browser, which leads me to believe it's something related to attaching to events in certain states.
Just for the sake of another data point (albeit an obscure one): The page crashed Chrome on my iPhone 4 running iOS 7.03, both with other pages open and as the only page.
Docs are here: http://foundation.zurb.com/docs/.
That's pretty much it.
ZURB doesn't have a huge consumer product, but they're a pretty big name in design, and they have half a dozen people who regularly work on Foundation/Foundation support.
Problem is - some widgets I depend on - like date-pickers and X-Editable - only support Bootstrap.
[1] http://getbootstrap.com/customize/#less [2] https://github.com/thomas-mcdonald/bootstrap-sass