there might some minor glitch on Ipad, main banner on zurb's website doesn't fit properly into viewport.
Zurb Launches Foundation 4
51–60 of 80 posts
Re: Zurb Launches Foundation 4
#52I couldn't find any examples on the site of using "the magic of Scss, you can now remove almost all of the presentational classes from your markup." Could someone provide an example, or provide a pointer to an example of html markup which removes all presentational classes? I did look at their templates site: http://foundation.zurb.com/templates.php and I still see presentational markup. EDIT: I'd also like to see a…
Agreed, the templates are not exhibiting how to avoid presentational classes. This may be a case where small-scope examples are poorly suited to real-world implementation, but I'll take a quick stab at moving to more descriptive (dare I say semantic) class names. ------ EXAMPLE: http://foundation.zurb.com/page-templates4/blog.html Line 45: CSS: .row .large-9 { position: relative; width: 75%; } .row .columns { positio…
The quick answer is (feel free to disagree!), this is a great way to style a blog or microsite, but quickly gets out of hand. Using presentational classes bloats your markup but the size of your CSS assets will remain relatively constant, while using semantic class names requires writing new CSS for each new piece of content. The return you get on sacrificing some legibility in your markup increases with the size of your site. Large applications (or multiple applications that share the same CSS codebase) can also quickly run into the 4095 selector limit in (older versions of?) internet explorer. Using presentational classes has the added benefit of not requiring back end developers to write CSS (nobody likes writing CSS). It's mostly a matter of taste, but I can tell you from personal experience that CSS bloat in a large web application is easy to avoid and a nightmare to fix.
Re: Zurb Launches Foundation 4
#53I don't understand the whole mobile first thing? Isn't Foundation already responsive? Don't most websites built with Foundation's grid system automatically fit nicely on mobile devices? Am I missing something?
The idea is that not all browsers support media queries, javascript, etc. (the things that are required to make responsive design work). So if the responsive design isn't going to work, what is it that you want the client to see as the default/base style? "Mobile First" says that the default/base style should be the simplest one, which is generally the mobile design (single column, not as many "moving parts", etc.).
Re: Zurb Launches Foundation 4
#54What's the advantage of using Foundation over Bootstrap?
I've been using both of them a lot lately. I'll give you some answers:
Bootstrap is more like a theme to me, if you don't want to bother buying one and you don't mind having a "bootstrap" look go for it. I love doing quick mockup with it. But as soon as you have to design something, it's a trap, it makes you lazy and want to use their styles for everything.
Foundation has a better reset in my opinion (I like box-sizing:border-box). The rows act like a container (size depending of your configs) whereas you can play with row and row-fluid in bootstrap (which might not be a good idea on a project). Also Compass + Sass. Forms look better. Orbit looks better than Carousel...
These past weeks I've been using both since I can't really make up my mind on one. I'm going to dig into Foundation 4 to see if it's going to change the situation.
EDIT : I'm looking at it right now, it does look pretty awesome. It seems they're taking a very different direction from bootstrap: - you now have to stylize elements through CSS (or SCSS) like it's supposed to be! They provide a long list of example, it seems like their stuff is entirely and easily customizable (which was always the shortcoming of Bootstrap). - I taught a friend who didn't know HTML nor CSS how to make websites a few day ago. I taught him Bootstrap. He's loving it since then. Looking through Foundation 4 the idea that it would be way too difficult to teach him Foundation 4 has stroke me.
Re: Zurb Launches Foundation 4
#55http://foundation.zurb.com/sass.html is broken
Re: Zurb Launches Foundation 4
#56Earlier quoted context omitted.
That doesn't really affect the developer using it though. GP's argument that Foundation is more flexible and Bootstrap is more opinionated seems unrelated to the semicolon debate.
I disagree, I found the Bootstrap JS code hard to read and follow because of the lack of semicolons. For a framework that is supposed to help people 'bootstrap' it would seem to me that making their code understandable and accessible is something important.
I don't see how the lack of semicolons disturbed you, I actually noticed it earlier today for the first time. If you're having trouble with that you won't be able to read Python very efficiently.
Re: Zurb Launches Foundation 4
#57Earlier quoted context omitted.
Not looking bootstrappy sounds like a good reason to use it for some projects. Is there a 'stock foundation' looking site you can link to, I'm curious if I'd recognize it.
If you're not digging through the source you'd probably think it was a lightly styled Bootstrap site as many of the same tells are present (black top navbar, etc). However, I think there is some massive confirmation bias at work. If a site customizes Bootstrap and it looks nice nobody credits it as a 'Bootstrap Looking' site, so as a result it is only when the defaults are used that people really pick up on it. That…
I don't think it's an unfair reputation. Looks and feeling of a website is heavily influenced by its button (I've read a great article somewhere analyzing the internet big guys' buttons). Bootstrap's buttons are not easily customizable, thus people feel like they're running into bootstrap-like websites a lot.
Re: Zurb Launches Foundation 4
#58http://foundation.zurb.com/sass.html is broken
http://foundation.zurb.com/docs/sass.html is working
Re: Zurb Launches Foundation 4
#59I couldn't find any examples on the site of using "the magic of Scss, you can now remove almost all of the presentational classes from your markup." Could someone provide an example, or provide a pointer to an example of html markup which removes all presentational classes? I did look at their templates site: http://foundation.zurb.com/templates.php and I still see presentational markup. EDIT: I'd also like to see a…
I'm a big fan of presentation-free markup and IMHO, SASS offers a good way to achieve it with mixins. Look at this article, it pretty much covers that topic.
http://chriseppstein.github.com/blog/2009/09/20/why-styleshe...
The idea is to get something like this :
@mixin three-column {
.container { @include container; }
.header,
.footer { @include column(24); }
.sidebar { @include column(6); }
article { @include column(10); }
.rightbar { @include column(8); }
}
body#article,
body#snippet,
body#blog-post { @include three-column; }
Re: Zurb Launches Foundation 4
#60seems kinda of a problem that "The Grid, Layout/UI and JS", aren't compatible with IE8 and bellow no?.