I've been using Foundation for everything lately, and I'm really impressed with it. This new medium grid size thing is a great upgrade.
What I never liked about the Bootstrap/Foundation CSS frameworks was having to mark up my HTML with those damn "small-4 large-8 columns" attributes. It felt to me like that purely-visual stuff should be kept in the CSS, not the HTML.
So I was thrilled when I found I didn't have to put any of that in the HTML - that it could all go in the SCSS, which then parses/compiles it into the final public CSS.
... and that's it! It adds those selectors to the final CSS file and your semantic HTML will have the layout/look you want.
To me, that changed everything, and I've been a fan since.
This has been covered other places, but I don't think it's been covered enough, and I think it was another HN commenter that turned me onto it like this, so just paying it forward in case someone else didn't know yet.
@extend itself is awesome and you should use it extensively, especially when using a framework. For instance, if you're using Bootstrap, when version 3 rolls around and removes a ton of old class names, you won't have to hunt through all your view code to replace classes. You can look through your SASS files and just update @extend's where appropriate.
Using SASS placeholders and @extend'ing your framework's classes are a great way to reduce code duplication and complexity. I recently redid our entire frontend using these techniques and it reduced our SASS code by about 30-40%, got rid of plenty of gnarly nested classes, and made it drastically easier to start adding new features.
You also might want to check out Bourbon Neat for your grid system, which has been doing this for awhile. Rather than extends, it does a lot of this through mixins. Their breakpoint system is also pretty nifty.
In general although I appreciate the larger CSS frameworks from a documentation and organization standpoint I find that their expanded use over the last year to lead to the "Oh, this was built with X" sameyness in a lot of new projects across the web. You even see newer frameworks like purecss.io that are trying to remove the actual styling from the framework itself, concentrating instead on base elements. I'm curious to see how this will all transition over the next couple years.
I'm a frontend designer myself so I'm biased, but I think relying heavily on any of them too much can limit your product once you get past the prototype stage. That said, I've learned so much over the past year just being able to look through their documentation and see proper smacss principles at work on large projects.
I've used both Bootstrap and Foundation extensively, though for my recent work I've been gravitating towards Foundation much more. It's an amazing framework (Bootstrap too :) ), and the new form validation plugin is a great bonus addition.
I second that, SCSS/SASS is awesome. Btw, Bootstrap is available in a SASS version as well, actually multiple conversions by different persons, but this is the most popular and actively maintained https://github.com/thomas-mcdonald/bootstrap-sass .I still prefer Foundation over anything Bootstrap though, or Susy (http://susy.oddbird.net/) if I don't need any of the extras a full framework like Foundation offers.
If you prefer sass, there is a maintained bootstrap-sass port too. It works out fine, less and sass are pretty much feature equivalent these days, it's a simple port.
I've been following and using Foundation since some of it's earliest incarnations and I love it more with every release. It's a great framework and the grid is just comfortable. Also, very nicely done responsiveness (as in responsive design).
The guys behind it are great too. I've had questions answered quickly by the devs, and they even sent me some stickers and this weird wooden puzzle thing that I keep on my desk!
My only gripe with Foundation is the JavaScript components seem rather difficult to manipulate. I write applications with Backbone.js and I'm still not sure how to programmatically change the active tab in an accordion without resorting to $tab.trigger('click'). Also, the tab/accordion component has serious issues with FOUC (flashes of unstyled content).
Hopefully they can focus on improving some of these JavaScript components. I just don't have the resources right now to contribute pull requests when I run into problems - it's usually easier to completely ditch the component or write a bespoke version using a Backbone view.
Agree with you. I think we are not "supposed" to be using foundation.js. Especially in a widget-y environment we are in, it is faster/easier to just use Backbone events/handlers for everything.
I am defensively disposing of everything in DOM when not used and it seems just wrong to keep using UI components that are clueless to their state and everything is done by hiding content in the DOM.
If anyone is interested, I wrote a python package for Django to integrate Zurb Foundation. I just updated it to the latest version. It's not on PyPI yet, but I will put it there in the next couple of days.
I somewhat prefer the Foundation grid system to Bootstrap's equivalent; the way that the classes are namespaced for mobile responsive layouts is pretty handy.
This looks great. I have a feeling that Foundation is going to gain more traction than Bootstrap in the long term. I've seen @mdo and @fat asked several times online when Bootstrap 3 is coming out and they've said soon for the last few months. Very vague. Foundation has the weight of a company, Zurb, pushing it forward.
My issue with Bootstrap and Foundation is namespace pollution. Neither has a prefixed version, meaning neither can be imported into an existing project without serious headache. I believe Sass will implement mechanisms to address this soon, until then, I'm disappointed to see this issue absent from the post.
amazing, the lack of medium grid was what I was recently forced to hack myself, now I'll just upgrade. the form validator is great too. keep up the excelent work.
keep up the good work foundation guys! It is always awesome to use a css framework which has mobile responsiveness enabled by default and just gets better!
What I never liked about the Bootstrap/Foundation CSS frameworks was having to mark up my HTML with those damn "small-4 large-8 columns" attributes. It felt to me like that purely-visual stuff should be kept in the CSS, not the HTML.
So I was thrilled when I found I didn't have to put any of that in the HTML - that it could all go in the SCSS, which then parses/compiles it into the final public CSS.
So you can just have:
... then in your SCSS file, do this: ... and that's it! It adds those selectors to the final CSS file and your semantic HTML will have the layout/look you want.To me, that changed everything, and I've been a fan since.
This has been covered other places, but I don't think it's been covered enough, and I think it was another HN commenter that turned me onto it like this, so just paying it forward in case someone else didn't know yet.