I often inspect sites using firebug and have noticed quite a range of complexity in the way developers wrap their content. Looking especially at centered aligned layouts:
At the simplest end are sites like 99designs.com which simply apply a margin: 0 auto to the body element.
Body -> Header/Content/...
Next along the scale are most other sites, with stackoverflow being a prime example. These sites have some kind of main container, within which the header and the content for example reside
Body -> Container -> Header/Content/...
Further than this are sites which have multiple wrappers. Normally there is a large outer wrapper which consumes the entire page just like body, and within that they have the central container as in the example above.
Body -> Wrapper -> Container -> Header/Content/...
Sometimes columns divs are defined, within which there's a left and a right column. Othertimes people achieve the same left and right column without the need for any surroundnig column or content div.
So my question is, why isn't everyone doing it the most simple way, such as in 99designs. Is it to manage their styling, handle ie6 or what?
Any thoughts?
Because no one design fits everybody's application.
Developers are going to go with what they're comfortable with and what works. If I can get my page done in two days using what I know (and get it to work cross-browser) then I'm not going to waste my time (and my client's money) by trying to do things the 99designs.com way and taking a week.
The reason you may find additional DIVS like wrapper and container and the like has to do with CSS. The CSS box model is powerful, but to achieve certain layouts, sometimes you need additional boxes to work with. It is all highly subjective, and you can't predetermine what divs you will need for a site design until you sit down to build it. There is no one way or right way to use divs in a site design. The more visually complex, often the more complex the markup is. You generally want to keep it as simple as possible...but you can't just keep things absolutely simple just because.
Related
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
I have a design I want to accomplish and found 2 ways to achieve it using the 960gs framework. Although I don't know which one is better and there's not so much information about best practices in CSS as there is in, say, PHP. So I applied what I learned from vanilla HTML/CSS and PHP OO to find out none of them is actually "good".
This is [the important part of] my design:
The two ways of obtaining it based on the 960gs framework and the disadvantages I find are:
Modify the CSS to add margins to the text. Then, inside that div, apply a pure 960gs system with 12 columns. This works, but it makes the whole width wider than optimal (1000 px, not good for 1024x768, 9% of browsers).
Use the 24 column model and leave the first and last column empty, so they become the margin. The problem with this is that then I'm using structure elements purely for visuals, plus having to write them in every single part of every page (not very DRY).
Example for the second:
<div class='grid_22 prefix_1'>
<p>
The theory of relativity transformed theoretical physics and astronomy during the 20th century. When first published, relativity superseded a 200-year-old theory of mechanics created primarily by Isaac Newton.
</p>
</div>
What I want is to apply the 960gs framework in my page with some extra personalized margins.
So, how would you avoid these problems I said for achieving what I want?
PS, due to a bug in 960gs framework, it's not easy to find
Your column is 960px wide and it seems fine. Both box-shadow and the left/right extra width of heading outside your column can be made without declaring a different width so it won't create an horizontal scrollbar.
Working example: http://jsfiddle.net/q8brv/ using absolute positioning for left and right part of decoration of the heading (compatibility IE8+. IE7- can live without box-shadow and this decorations imo ;) )
The upper limit with a resolution of 1024px is 1004px, though it's for maximized browser window.
Are there any existing plugins/extensions/methods to maintain vertical rhythm for Twitter's Bootstrap project?
It is quite a laborious task to create good vertical rhythm templates, I would rather use a pre-baked solution. I am open to creative suggestions, I just want my pages nicely aligned in the end.
Edit: To clarify what I am after...
Vertical rhythm is a technique used to ensure that every element on a page lines up according to a horizontal grid. This is achieved by setting the height, padding and margin of every item to conform to a standard unit line size. If a line of text in a paragraph is 20px high (including margin and padding) then maybe a heading 4 will also be 20px high, and a heading 1 might be 40px high. This maintains the rhythm of the text across columns.
I want to use this technique in combination with bootstrap (from twitter), but it would be quite a lot of work to get everything looking nice. For example, all the buttons would need to conform to the same vertical height definition as paragraph text etc... There are other standard controls used in bootstrap which would also all need rules to define their height appropriately.
I could start with a generic solution for vertical rhythm, which would go a long way to achieving what I want, but I wanted to know if anyone else has started this, or has any idea of another way to achieve this.
Edit: Assuming there is nothing like what I want...
Maybe just a good vertical-rhythm based css template would be a good starting point. Preferably something that is continuing to be developed, is already usable, well thought out, and adaptable.
Since no one has linked to an actual vertical rhythm boilerplate as you suggested, I took the one I use, commented it, and created a github repo for it here https://github.com/jonschlinkert/vertical-rhythm
As it says in the readme, this is a starting point for your own project.
I think what you're going after is understood. Problem is: you're looking for a grid schema in one dimension (a "vertical rhythm" set in accordance with, for example, proportional line heights...which, in a manner of speaking, measures and aligns things along a given page's Y axis)...but doing things in that manner might potentially be at odds with Bootstrap's pre-existing 12-column grid system (which, in contrast, measures and aligns things along the page's X axis). You want to "proportionalize" the height of each "row" in the framework. BUT: keep in mind, Bootstrap's design is intended to promote not just proportionality via columns solely for the sake of looking nice, but to also make pages responsive--i.e., to allow page elements to "flow" around one another vertically, and to nest fluidly. And, in that sense, issues pertaining to the height of elements measured along the Y axis may already be accounted for... I recall that most of the typographic elements in the base CSS file have proportional em sizes, and/or likewise proportional top and bottom padding, etc. Generally speaking, things are not so arbitrary that the framework screams a need for additional styling in the manner you're considering.
Even so: Bootstrap's base CSS file isn't so intolerably extensive that it'd be impossible for you to tweak the height of various element classes and IDs yourself without too much trouble. In any case, it's highly unlikely you're really going to need to do that with every styled element, right? In fact, as a framework, Bootstrap includes styling for many elements which may not even be in the app for which you're designing the front end. (EXAMPLE: Does your app have drop down menus? Great. You can style the "vertical rhythm" of drop down menus. BUT: are you also using pills or tabs in your nav bar? No pills, you say? Well, you can just delete a couple hundred lines of code in the stylesheet and save yourself the effort of having to apply your "vertical rhythm" to those unneeded elements.) Elsewise, for the elements that remain and that you do in fact need, just use a text editor to find-replace the values for line height, top and bottom padding, margins, font-size, etc...and test it out. As a CSS framework, it's pretty clear how Bootstrap is laid out; relevant elements are well sorted, and grouped together within the stylesheet's code for the most part. Once you do complete tweaking of the base CSS file, just minify your revised stylesheet...to replace the pre-existing minified version...or, perhaps, just serve it up from CloudFront if you want to optimize.
The Compass CSS Authoring Framework has explicit support for vertical rhythm based typography. For starters you can check out this short video tutorial.
Have you looked at the Square Grid CSS framework?
http://thesquaregrid.com/
A simple CSS framework for designers and developers, based on 35
equal-width columns. It aims to cut down on development time and help
you create beautiful-structured websites.
Square Grid provides a standard horizontal grid, but it also maintains a vertical grid, using a standard "square" of 28px. It is really just a grid, not a full CSS library like Bootstrap (i.e. no buttons, menus, etc).
I used to for one project and found it to be pretty intuitive, though I ultimately decided that it was too hard for me to keep track of both the vertical and horizontal grid, especially when thinking about responsive design.
You may be able to combine the two, or at least take a look at the square grid source code which is pretty simple CSS to get some ideas on how to adapt Bootstrap to meet your needs.
I am working on a website frontend and found myself constantly nesting divs for layout purposes. Without using tables for layout it seems like the natural option to layout boxes within boxes. However looking at my completed source code its not unusual to see 3 or 4 layers deep of nested divs...
Is this a problem and should I bother spending time trying to optimize my layout to reduce the amount of divs I am using? Is it bad for search engine indexing (or does it not make any difference at all)?
Edit: I think my confusion arises from the fact that I am ignorant as to how search engines handle divs. What do they look for in divs (are the id's important..should the divs somehow be descriptive of the title...or do the search engines simply parse out the divs)?
I don't think theres any empirical evidence that it is bad for search engines, but its definitively bad practice. It even has its own nickname -> divitis
Generally it arises from ignorance of what one can accomplish through CSS. Of course sometimes with complicated layouts you may need to nest divs and thats ok, you can't have perfectly semantical websites all the time. But I find that no matter how complicated any layout I do is, I've never had to go more than 2 or 3 deep.
Actually the most common nesting you'll see is the whole body container in order to center the layout - this is common because if, for example, you have 3 divs in the root and all three are centered, because of rounding errors they might be a pixel off each other on different window sizes.
Hope this helps.
I don't think it's bad for search indexing, but too many nested DIVs often crops up if you aren't using the CSS box model correctly. For example, if you have two img tags side by side in a containing DIV, you probably don't need div's around the img tags -- you can set the img's to display:block, and they'll behave just like a DIV.
Then again, I don't know what your code really looks like, so I can't say that it smells like anything, really...
It shouldn't bother search engines, and divs are what you might call semantically transparent - they have no meaning in and of themselves. That's why they're suited to defining blocks of content.
It's accepted practice to use divs as hooks for CSS styling and layout, but it's very easy to let the nesting run away from you. If you want to try to reduce the nested divs, see if any of them can be replaced by semantically meaningful tags. Careful attention to inheritance in the document might also help you cut some out by letting you apply specific styling without extra tags.
All that said: it can't be judged without seeing your markup, but if it's even a semi-complex layout then 3 or 4 layers of div might not be remarkable or problematic.
It is certainly no worse for search engine indexing than using tables, however divs themselves are not descriptive. You may want to look at the new HTML5 elements such as <section> <header> <footer> and <article> to more accurately describe what the div is for. These are good for search engine rankings.
One of the arguments I've heard about blueprint css is that it lets you think of your layout in terms of a grid rather than in terms of floats. This seems like a big advantage to me because I always get confused about where my floats are going to end up - sometimes a float will unexpectedly drop down below some other floats and I have a hard time figuring out how to reposition everything. Does this make blueprint css a good choice for me - or should I just put the time in to learn how to use floats properly and do all of my layouts manually?
Yes, absolutely it lets you use a grid - see this example page, which makes the grid visible by striping the background according to the grid columns.
(But I have to say, a little time spent learning how CSS layout really works would pay big dividends - better to understand it than to give up and try to work around it. And you'll then have the option of creating flexible layouts that work well on all sorts of different devices.)
One of the biggest issued with anything that is absolutely positioned is that items that are not absolutely positioned do not know that the absolutely positioned items exist.
Of course this is a debate that will go on forever about which is better but you will probably be better off using elements that can be scaled depending on the browser size and resolution.
Under the hood, Blueprint still uses floats.
Here's a novel approach to creating "float-less" layouts that are semantic and accessble,
http://www.tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp
As stated, BluePrint is a grid system, but is based on CSS floats. So understanding CSS Floats is somewhat important to really grasp what BluePrint does.
I rarely use floats over absolute positioning for a variety of reasons.