Client side design frameworks

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Client side design frameworks

Post by JAB Creations »

I'm not entirely opposed to using frameworks, I'm entirely opposed to using them without knowing how everything goes together correctly. The quote you used was out of context though you certainly could have pushed your point with the later part of the first sentence of my initial reply. This is an analogy to when I had difficulty explaining how I understand logic (visually) when others nor I understood my learning style.

Alex, tables? Seriously? CSS isn't difficult.

Code: Select all

<div class="width_50">1</div><div class="width_50">2</div>  <div class="width_60">3</div><div class="width_40">4</div>

Code: Select all

div.width_50 {float:left; width: 50%;}

Code: Select all

<div id="parent"><div id="child"></div></div>
First give your divisible elements some background-color so you can visually see what you're doing. You'll need some placeholder text or they won't appear at all as well.

To correctly do CSS 1.0 (basic to intermediate layouts) the key is to not apply anything other then width on parent-most divisible elements.

So if you want padding on the parents what you have to do (if you want to do this correctly) is set the margins on the child of the parent you want to add padding to.

The key is to add another divisible element and think dynamically. Static will only box you in.

You should know the box model for block-level elements, it's not difficult.

Image

This stuff will all work in IE4 and Opera 4 until you get in to advanced margins and then CSS 2 with positioning.

Remember, border, padding, margin, and width are all added up together. If the screen is 1024 pixels wide and you have two divs, 50% wide each with 1px border then that's four sides (two sides each, four altogether) so that's 4px on top of 100% width making the grand total of 1028px thus creating a horizontal scrollbar...hence why you use the child for border, margin, and padding.

In regards to float and width...

If the divisible element is floating (left || right) and does not have a set width then it's width will collapse to the total width of the child elements within it.

If the divisible element is or is not floating and it's width is declared it will be the width that is declared (e.g. the top-level layout approach).

If the divisible element is not floating and it's width is not declared it will automatically take up 100% of all the available width of it's parent element.

Also you never wants to put content directly in to a parent width/float divisible element as doing so will quickly complicate your CSS and layout as it gains complexity.

Divisible elements (div) are the generic block-level elements while span's are the generic inline elements.

When constructing a page's layout consider the major components of the page, head, footer, content, sidebar, and or whatever else you'll need as "major" parts of the page layout. Give those parent most divisible elements id's.

Code: Select all

<div id="content"></div><div id="side"></div><div id="head"><div id="menu"></div></div>
Then in your CSS you can keep track of what is what by keeping your CSS organized.

Code: Select all

#content div {}#content div.date#side div.item {background-color: #ddd; margin: 4px;}#head {height: 120px; position: absolute; top: 0px; left: 0px; right: 0px;}#menu {/* menu stuff here */}
In regards to CSS 2 if you position an element without setting it's width though set both it's left and right position (either as pixels or percentage) it will dynamically stretch across the screen. This is what I use for my site's #body that contains #content and #side while all other major page components appear in my site's XHTML afterwards as this is good for readability, accessibility, and SEO purposes.

CSS 2's positioning lets you take advantage of using CSS 1's layout but dictating what appears in what order in the (X)HTML code.

Those are the key things you'll need to know when you learn CSS to use it effectively, everything else is frosting cover cake and not the kind you don't like that everyone always buys anyway. Remember, if you don't see it then it needs some content (put some letters or numbers inside the element to make it appear).

All browsers should handle everything I've mentioned except for some issues with IE7 and a considerable though not non-fixable issues with IE6.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Client side design frameworks

Post by josh »

Sounds to me like you just wrote a framework in psuedo-code :D

That's the great part about some of the frameworks though, everything just falls into place and you don't need to worry about all that crap. But the class="width_50" thing (which is what they all do) is a little crazy. Previously it was shunned to use jquery to change a class name, I actually think that is a great way to use these frameworks. You can use semantic class names like header and body, and have a .js file that switches out the class names with jquery to their non-semantic versions. This also "decouples" your CSS which is a concern, its probably a good idea to wrap a CSS framework in the same way you'd wrap any other code, if it is at all feasible.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Client side design frameworks

Post by JAB Creations »

...all that crap? 8O Dude! That's CSS 101! You can't framework CSS, it's not even close to difficult if you understand and practice what I wrote above. Though I suppose if you like being at the mercy of depending on other people or frameworks for something that is silly easy then you're probably not aiming very high in life. Some say it's all about the client, some would say it's all about the server, and I would say it's all about both. Keep the load on the server minimal and make your (X)HTML the sweetest sugar any search engine has ever tasted! :mrgreen:

Using jQuery to change a class is like sending five thousand people to take a lolly pop away from a kid too stupid to put it in their mouth to begin with. Now when you want to do something that really does take an asinine amount of time such as doing DHTML animations, sure it's worth it then. Besides I'm going beyond what most people do with my own work and there is no way I'd use a framework for my CSS or JavaScript beyond DHTML and actually now that I think of it CSS is going to have it's own animations module in CSS3 so yeah, there goes the entire need for jQuery right there! :P Okay, maybe not for relic browsers that look like five thousand year old decomposed mummies *cough* IE *cough* but that is the direction the web is moving towards. So when my visitors download 40KB it won't be a perfect solution for everything by someone else that hasn't done anything yet because nothing else has downloaded, it'll my solution that already got the job done.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Client side design frameworks

Post by daedalus__ »

jquery is an extremely useful library, it is one of the few i use. i dont use all of it but it has worthwhile features. besides how long do you think it will be before browsers support css3 animation? sure jquery is 55k "compressed" but i use images bigger than that. world of warcrafts website is 2.2mb and it loaded in 4 seconds. with the amount of bandwidth going around now a days its okay to use a few treats here and there.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Client side design frameworks

Post by JAB Creations »

So jQuery has gotten bigger! I throw dial-up users a bone and keep a dial-up version of my site available. It generally loads completely in under ten seconds. In the next version of my site I'm actually just dropping one option and warning users that they will enter a high bandwidth section of my site. I keep everything modular and dynamic. By modular a forum and blog don't merge, they're not the same thing though they are well integrated in the sense that they are coded with the same practices that while they are completely independent of each other they dance well together at the same time making it appear as if the site is seamless to the user. By dynamic they take a large array of possible data and return a desirable answer, be it JavaScript or PHP. With jQuery you have a library that eases things yes, however it's over-generalized in my opinion. Not everyone needs every possible tool it has to provide. Honestly I would be much more apt to use it if they modularized jQuery so that you could work with parts B, F, and K in example so instead of having the user download 55KB but effectively use only 12KB you could download 15KB and use 12KB. Again I'm not saying anything bad about the people making it since yes they've got the experience to make it all work though they still need to evolve their frameworks to be much more modular. 20% of UK surfers still have no access to any broadband services, so that's probably a few million people right there. What if you I worked in the UK and targeted UK folks to gain traffic to my site? I wouldn't want to turn away 20% of my potential customers because I was overly reliant on something great yet still bloated for my own needs. There are plenty of other countries even including here in America where there are large percentages of people still surfing with dialup. I'll add that I'm also not a graphic designer and that my paint is CSS3. So really I suppose to each their own though I reserve the right to complain about jQuery fanaticism when people want to force users to download 55KB to do something that can be done with a line of code that's roughly only a hundred bytes long.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Client side design frameworks

Post by josh »

JAB Creations wrote:...all that crap? 8O Dude! That's CSS 101! You can't framework CSS, it's not even close to difficult if you understand and practice what I wrote above. Though I suppose if you like being at the mercy of depending on other people or frameworks for something that is silly easy then you're probably not aiming very high in life.
If its so easy would you would you like to style an enterprise application I need to deliver? I'll pay you $150, it should only take you 3 months. 4 If you run into cross-browser problems :D

I suggest watching this, because despite what you think you CAN create a css framework. http://www.sitepoint.com/blogs/2009/11/ ... ht-choice/#

If these aren't frameworks then what are they? You also straw man the argument. There are pros and cons to any framework, you are focusing on a few "cons". Since you are at the mercy of the PHP developers themselves, and the mysql developers, I guess you Jab, aren't aiming very high in life either (actually frameworks usually solve that problem, not create it like you insinuate, frameworks often decouple you. Jquery decouples you from browser specifics and verbose javascript syntax that will change with the move to EMCA, Zend_Db decouples you from having 1,000 INSERT statements hard coded, etc..), so to me your entire argument is silly because for those reading your argument who actually use these frameworks daily, they see you are being silly because the very "con" you point out is actually a "con" for not coding without the framework in the first place.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Client side design frameworks

Post by Eran »

jquery is 55k "compressed"
jQuery is 19kb compressed. with today's sites, such a download is so insignificant it's not even worth mentioning. As josh said, jQuery creates an abstraction level on the mess known as cross-browser compatability. It must be nice to be able to code as a hobby, but for us professionals who are required to support many an uncooperative browser, and for which time is money, jQuery and other such frameworks are invaluable.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Client side design frameworks

Post by josh »

Well worded, well worded... One thing I should add is even if the framework takes more time to use, it often saves time down the road, 90% of the effort is maintaining it, 10% is creating it... you maintain it forever, so even when the frameworks take more time to initially set up, they can be an investment, and just like there is good investments and bad investments, there are good frameworks and bad frameworks

There are risky overseas investments that have the potential to pay you back large rewards, and there are safe domestic investments that are safer... the same goes with frameworks, you really cant just compare apples and oranges though
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Client side design frameworks

Post by daedalus__ »

huh their website says 19k but but google code says 55
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Client side design frameworks

Post by Eran »

It's 55kb minified, 19kb after Gzip. Every decent server should have a Gzip compression capabilities
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Client side design frameworks

Post by daedalus__ »

i dont know what gzip does. if you send something compressed to the client it still has to compress it right? probably faster than downloading it though.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Client side design frameworks

Post by Eran »

Yes, if you send a compressed file to the client, it has to decompress it. Decompressing a 19kb Gzip file happens so fast on todays machine, so its not something worth considering performance wise. Comparably, download speed is much much slower. Gzipping all text based components (HTML, CSS , Javascript) is very basic step for a performant site. You can check it out on Yahoo's best practices for webpage speed - http://developer.yahoo.com/performance/rules.html
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: Client side design frameworks

Post by Luke »

pytrin wrote:
jquery is 55k "compressed"
jQuery is 19kb compressed. with today's sites, such a download is so insignificant it's not even worth mentioning. As josh said, jQuery creates an abstraction level on the mess known as cross-browser compatability. It must be nice to be able to code as a hobby, but for us professionals who are required to support many an uncooperative browser, and for which time is money, jQuery and other such frameworks are invaluable.
++

JAB, I think you often forget that most of us aren't writing code for our own sites and spending ANY more time than necessary just isn't an option. Clients don't care if you wrote your code from scratch. It doesn't impress them... all they want is their project to be done well and on time.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Client side design frameworks

Post by daedalus__ »

luke seen tool lately :)
Post Reply