Foundation ZURB -> Code Review

HTML & CSS
1

Hello, I have just started using the Foundation framework from Zurb. It’s my first time using a CSS framework/Grid Framework and it just seems like there is a TON of extra divs I’m having to type to get the desired layout.

If any of you have a spare 10 mins I would appreciate it if you could look perform a quick code review of my site at

http://dopeartifacts.com/m_a_temp/proto1/HTML/

If you want me to post the HTML file here I can. The site is only 1 page for now and the CSS I’ve written is in custom.css

Mainly I want to know

If I’m making any critical errors that is causing me to write many many extra lines of HTML to get what I desire.

From my use of ZURB Foundation, it takes many nested row- column - row column combos to have a stable easy to control layout…
Also You’ll see my own divs between rows and column divs that are divs required by ZURB… This is because adding styles to the row class div itself will cause for the responsive features to get screwed up… like padding on a row will cause the layout to be offset from the left when scaled down, and not centered like it should be.

Let me know and thanks.

2

Also, as I look over my code. These are questions to people experienced with ZURB Foundation obviously,

Am I relying on the grid to layout my content to much and should I just make basic row column measures and then rely more on my own custom divs to layout things within the site?

3

It’s illegal to do reviews in this part of the forum, code or otherwise. Please use the Reviews forum to do so.

To get started, please read this thread.

I’m going to ask for a thread closing. Nothing personal :).

4

I believe I’m in the right place. It’s really a specific thing I’m after. Not a whole site design review. It’s more a question of how to properly use the column and row classes of the ZURB Foundation framework…

I can word it differently if that would please you.

5

What attracted you to the ZURB framework as opposed to straight HTML and CSS?

The reason I ask is that CSS frameworks are pretty much frowned upon here for the exact the reason you mentioned – extra, none-semantic mark-up. Most frameworks that use grids promote terrible mark-up with very little in return. So I’m just wondering what the advantages of ZURB are to you that make the sacrifice(s) worth while. What has been shown is really not that complex of a layout at all and can be created without relying on a CSS framework using proper, semantic mark-up. Unless there is some reason which ZURB must be used or something.

Grids are a great design tool for alignment and consistency but they do not need to have a physical presence in the mark-up. Especially true considering doing so requires extra, none-semantic, presentational mark-up. That is a disadvantage inherit to any CSS framework with grids. Which is why a significant majority here recommends avoiding them. The advantages just aren’t really worth the disadvantages unless you have some specific reason for using ZURB which balances that out.

6

oddz is being polite, either that or I’m a real {expletive omitted}

What you have there top to bottom are bad choices in terms of techniques, methodologies and site-building… from the HTML 5 for nothing (which I actively campaign against the use of), Paul Irishs’ idiotic “lets bloat the markup with browser sniffing”, to hordes of “scripting for nothing” in the markup, to endless IE conditionals for Christmas only knows what, to the broken/nonsensical use of heading tags, to the massive background that sucks down ram and takes forever to render, to – and that’s BEFORE talking the CSS framework nonsense.

Everything you’re noticing about that framework being why I consider CSS frameworks, Javascript frameworks, and frameworks in general be it HTML, CSS, Javascript or server side, to be useless pointless bloated rubbish I pity anyone duped into using. At best they are a crutch, at worst, a sleazy attempt at a shortcut that just makes more work in the long run.

Which is how you ended up with 9k of HTML for 1.2k of plaintext and maybe a dozen content images; two or three times as much HTML as should be used… much of that thanks to the bloated nonsensical and outright idiotic ‘framework’.

Do yourself a favor, throw it out and start over. Without the HTML 5 idiocy, without the javascript crap, without the endless/pointless browser detecting nonsense, and without any CSS ‘framework’ that basically defeats the entire POINT of using CSS in the first place.

You should also make sure you’re using VALID HTML – since you can’t do things like put a DIV inside a UL like the menu has it.

7

There is a lot of work to be done in the sense of optimizing the framework to my needs. There are some bad practices/mistakes in the markup, but I’m not aiming to be perfect out of the gate or I would never make any progress towards finishing a project and having the chance to go back and better myself/code.

My main concern is the use of the ZURB Foundation Columns and Rows

Fort the sake of discussion tho:
Main reason I’m using the framework is because of a 3 week time constraint to build a responsive WordPress Site. This site isn’t going to go live. I know how to use media queries and I’ve read Ethan Marcotte book on Responsive Design cover to cover, but I simply don’t have the time to go through all of those steps. So this is more of a “prototype” which is what the framework describes itself at being good at “prototyping” sites very quickly.

8

What DeathShadow said. I don’t find the enormous code bloat worth the “benefits” of using the frameworks.

9

The reason I specified grids is because that is normally where the code bloat and extra mark-up occurs. For instance, bootstrap besides for the grid stuff is very light weight and only requires classes be added to existing elements. Though it does seem more oriented towards administrative UIs than front-ends. The nice thing about bootstrap though for admin UIs is when used properly the design is handled my the framework itself and seems to be pretty acceptable. I can’t really talk for ZURB though. I have never even heard of it before this point. The only reason I looked into bootstrap was personal project I have been working on and didn’t want to deal with the design/look and feel but wanted something more than default browser styling. Still I would echo what others have said and avoid them here.

10

I definitely see the value in your reasoning for being against frameworks, and especially css/html frameworks because the techs are just so easy to learn given the time.

But from the level of a novice (myself) you should be able to see the great value in these frameworks. While I do plan to take more responsibility in the products I produce, using frameworks (and I mean downright abusing them) gives me the power to create websites and templates that execute on all the buzzword technologies.

I use a grid from teehan+lax in photoshop to layout my design, ZURB Foundation to make that layout into html and CSS, and I’m currently templating using the wordpress framework where I’ll hopefully duct tape together the rest of the functionality of the homepage. And in just 1-2 weeks a novice such as myself will have prototyped up a responsive site backed with a CMS. While being bloated, it’ll probably be pretty stable too.

I think frameworks are good for this “rapid prototyping” type of deal where you can get a workable product up damn quick and then trim the fat, code things better, and add features iteration after iteration (and for a beginner become a better coder/designer faster, and not spending so much time spinning wheels in the mud).

It sounds really shallow. But being only 1 person starting out in the web design and dev world, frameworks are invaluable. It does come with bloat, but at the end of the day it’s really not that bad unless you get into enterprise level products.

I’ have books like Definitive Guide to JavaScript, Books on PHP, CSS3, etc etc, but trying to piece a project from scratch with all those diff. technologies is a dummy mission for someone like me. I’d rather use these frameworks and rely on my knowledge of the underlying technologies to solve problems and make improvements where ever I can figure one.

You guys may be able to write your own sliders, wip up your own grids, make your own twitter widgets, make your own little javascript library toolkit, and the such and I envy you for it, but It would be a years worth of work to produce all these basic things, and they wouldn’t be near the quality these frameworks provide.

11

I disagree entirely – since the ONLY thing you can learn from them is how NOT to build it, you are basically talking about writing it twice; you’re basically having to learn the framework and not the language, so that’s twice as much to go through before you’ve even laid down a line of code; since you’re not writing it yourself when something breaks (and it will) you have no idea how/what/why without wasting time digging into it… all that extra wasted time could just as easily have been put towards just writing it properly in the first place or learning to do so.

It screws yourself, your client, and on the whole is a sleazy shortcut that typically bites everyone on the backside in the long run.

Hey look, all the garbage I’d never put on a website in the first place. :smiley:

12

The framework is dead simple to learn. It’s just a column, inside a row, inside a container. It does have quirks when trying to style it and place content inside of it, but everything has its quirks.

I’m not saying don’t learn any of the underlying technology that makes it work (CSS3, JavaScript, HTML5, etc), because that would just cause endless pain and suffering. But I’m saying starting out and wanting to make a complete project from wireframe to launch, frameworks are invaluable. Also for someone who doesn’t have the time/resources/wits (whatever it maybe) to do straight up software engineering; tweaking frameworks/plugins/etc. on a regular basis to make it their own is the best way to learn (design patterns, best practices, creative syntax) and be productive at the same time. Keyword being productive! Writing everything from scratch is hardly productive in “production” cases (writing a slider, writing a full blown responsive framework, writing a twitter widget). You may not use sliders and widgets but the fact is they are in demand and need to be produced.

13

Yeah. You’re messing with the laawwww.