I'm thinking of using Nathan Smith's 960 Grid System for layout in the ASP.NET MVC site that I'm writing.
I've noticed that all examples of 960.gs usage show HTML that looks like this:
<div class="container_12">
<div class="grid_12">
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_1">
</div>
<!-- ... -->
</div>
I don't particularly like putting all those grid values inside the HTML itself - it creates clutter and with a lot of content, that can become hard to manage.
Is it possible to somehow put those container and grid values inside an external file that applies grid values based on the id or class attributes of certain tags?
You can't externalize those values. While it would be possible to merge the names into the file such that the names that you designate to the divs are multiple CSS selectors with the grid (i.e.: .sidebar, .grid_3 {...}), this is impractical and makes it nearly impossible to manage and maintain the code. The readability and maintainability that you'd be sacrificing is much more valuable than the semantic goodness that you'd be gaining.
The 960 grid system is pretty ugly on the back end. What you give up in niceness, you gain in simplicity and efficiency of development. Perhaps a different column-based gird system would be better. Consider something like Frame: http://frame.serverboy.net/ (</shameless_plug>) or Blueprint CSS.
Hope this helps.
Related
I want to present dynamically generated (PHP, XML) questionnaires to the user in the browser like this:
requirements:
1. The left column will will always be a number, the middle and the right column may swap position in some questionnaires.
2. There will be questionnaires with 200 items or so over multiple pages.
3. The width of the container (rounded corners) is fixed at 800px at this time, BUT
4. it has to be flexible / fluid in the near future for being displayed on mobile devices like iPad and iPhone
what I've tried
I experimented both with a <table> based and a <div> based layout:
The <table> was clean and simple, but with lots of overhead and not very flexible, e.g. if I swapped middle and right column for item #2 only...
The <div> based layout was sleeker, I let the containers float, but have to set the divs to a fixed width in order to get them align in columns. In a fluid design, I do not know the widths in advance, which will be a mess then...
questions to the pros:
1. <table> or <div>, regarding my requirements above, what would you prefer?
2. is there some magic tool to make this nice and easy?
3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?
Here's a code example: http://codepen.io/anon/pen/inmwD
Either use a wrapping div or a list element
<div class="parent">
<div class="row">
<div class="col1">1</div>
<div class="col2">Content</div>
<div class="col3"><input type="radio"/></div>
</div>
</div>
In my opinion <table> is for tables <div> is for layout.
Yes there are some style templates usually named grid system or css grid take a look at this stack : https://stackoverflow.com/questions/76996/what-is-the-best-css-grid-framework
I wont arrange elements around with JavaScript unless it can't be done with css or is a special requirement from the marketing guys. The con about this is that you increase the page render time.
Take a look at this fiddle made with a custom 960 grid system that have 6 columns with the width 150px
Fixed width: http://jsfiddle.net/UjXPR/
Fluid width: http://jsfiddle.net/UjXPR/1/
960 gs customizer: http://grids.heroku.com/
Checkout bootstrap grid system
1. <table> or <div>, regarding my requirements above, what would you prefer?
div is specially used for layout of the page and table is specially used for placing tabular data. so in your condition I would choose the table layout for the questionnaire.
2. is there some magic tool to make this nice and easy?
First dream to design how should this row data look then only accomplish for the site.
3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?
This is not good idea but if the clients need so you could do that.
And one more thing, you are not asking for your problem with SO but asking what we like, this is not good practice for SO users.
I've been working with jQuery and HTML for a long while but don't have a ton of CSS experience. I have been searching around and have found that with CSS you can make a lot better layouts than with the old school Table layout methods.
However, everything i've been finding appears to be a lot more work and sometimes doesn't seem to be as compatible.
I want to make a layout with a
header/sidebar/ and main detail area.
I have to agree with you, creating a layout using CSS is very difficult. However, there is a library similar to jQuery is to JavaScript call Twitter Bootstrap that makes your goal extremely easy. I highly recommend looking into it.
Twitter Bootstrap - Scaffolding
<div class="row-fluid">
Header
</div>
<div class="row-fluid">
<div class="span2">Side Bar</div>
<div class="span10">Detail Area</div>
</div>
[Note: for those who may be confusing this question with "why not use tables for HTML layout", I am not asking that question. The question I'm asking is why is a grid layout fundamentally different from a table layout.]
I'm researching CSS libraries (in particular Bootstrap) for a project. I am a programmer rather than a web designer and I feel I could benefit from a library that encapsulates good design.
We all know that it's bad practice to use HTML tables to accomplish basic site layout because it mixes presentation with content. One of the benefits provided by CSS libraries like Bootstrap is that they offer the ability to create "grid" layouts without using tables. I'm having a little trouble, however, understanding how their grid layouts differ in any meaningful way from the equivalent table layout.
In other words, what is the fundamental difference between these two examples of HTML? Am I wrong in thinking that the grid layout is simply a table with another name?
<div class="row">
<div class="span16"></div>
</div>
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
and
<table>
<tr>
<td colspan=4></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The difference is that the first example is semantically marked up, assuming the data being marked up is not actually tabular. <table> should only be used for tabular data, not for any data which happens to be displayed in a layout similar to a table.
It is correct though that using CSS packages like Bootstrap, which require you to assign classes to HTML elements which are not semantic but presentational, reduces the separation of content and presentation, making the difference somewhat moot. You should be assigning semantically meaningful classes to your elements and use lesscss mixins (or similar technology) to assign presentational behavior defined in the CSS framework to these classes, instead of assigning the presentational classes to the elements directly.
Say:
<div class="products">
<div class="product"></div>
</div>
.products {
.row;
}
.products > .product {
.span16;
}
Note that I say should. In practice this is not necessarily always the more workable option, but it should be the theoretical goal.
I believe that CBroe comment is the best option, so I chose to clarify it.
Avoid div's. A div should be your last resort, not your first option. Instead, try to use Bootstrap classes on the actual elements. For instance:
<form class="container">
<fieldset class="row">
<label class="span4" for"search">Type your search</label>
<input class="span6" type="text" id="search" />
</fieldset>
</form>
It is a shame to use fieldset to contain a single field, but it is semantically best than using a div for the same thing. The HTML5 standard defines many new container elements, such as article, section, header, footer and many more. In some cases you will have to use div's, but if you minimize it's use then your code will be way more semantic.
The fundamental difference is that you can "reflow" the layout with Bootstrap for different display sizes simply using media queries without needing to change your markup. For example, I can decide that on desktops, I want your 4 divs to be on same row because user has high resolution wide display but on phones I want 2 dives on one row and next divs on next rows. So this way I can adapt my column count in each row using media queries. If you use hard coded HTML tables then it is very difficult to do this.
Having said that, I don't really like bootstrap implementation for the following reasons:
It has breakpoints hard coded in pixels. This means, as phones and tables advance in display resolution, your website may start showing unexpected layouts on those devices. Pixel count is poor proxy for display size.
It limits maximum used display area to 1170px which is again a bummer for users with nice wide displays they can actually use to see more content in your app.
Bootstrap's layout is not source independent, i.e., you can't change column order that is set in HTML. This is however more of a pedantic point.
The default layout is for very small resolution and higher resolution layouts trigger only when media queries fire, which IMO, is a poor choice considering phones will continue to have better resolution and sooner than later your website would have default layout set for outdated mobile devices.
Bootstrap layouts are not truly "worry free" in the sense that you have to read their fine print to see all the bugs and browsers they didn't see worthy of supporting but which you may care about. If you are targeting users in South Korea or China, you would be in for surprise, for example.
So, not everything is gold in bootstrap and their approach is not necessarily always the best possible (as an aside, one other thing I despise in bootstrap is their obsession with so called "jumbotrones" - those real estate wasting inconvenient in-your-face headers - which I hope community doesn't start taking as "new standard"). Personally I use CSS table layout (display:table) these days which has similar benefits as bootstrap without hardcoding <table> in my markup. I can still use media queries to rearrange rows depending on portrait or landscape orientation, for example. However the most important benefit is that my layouts are truly pixel or even percentage independent. For example, in 3 column layout, I let content to decide how much space first and last columns should take. There is no pixel or even percentage width. The center column grabs up all the remaining space (which is good thing for my app, but it may not be for others). In addition, I use ems in media query break points which bootstrap surprisingly doesn't.
I use the Bootstrap grid for page layout, tables for tabular data.
I think of the grid in Bootstrap, not as a grid in the developer sense, like a gridview control, but more in the design page-layout sense - as a grid to contain the page contents. And even though the Bootstrap grid could be also used to create a conventional grid containing tabular data, as deceze pointed out, this kind of grid is better suited for HTML tables - which are still acceptable to use in this scenario.
if you just use tables i think you will miss out on alot of flexibility in re-sizing your document for mobile/tablets without having to make a separate page for each device. once your table structure is defined all you can really do is zoom in and out.
While there's not necessarily much semantic difference between the two sets of markup (since the classes used by Bootstrap's grid system are indeed purely presentational), one very important distinction is that the grid system is much more flexible.
It would be very difficult, for example, to make your table-based layout respond to different screen sizes. There's no way to tell the browser to display one td element below another td in the same row. Whereas with the div example, that's easy to do, and the same markup can be presented in different ways even when the classes are "presentational" in the sense that they define the relative proportions and positioning of the elements on the page.
If I may, I'd like to summarize what I gathered from the other comments and the link explosion I experienced from this page:
The problem with using tables isn't the grid layout, it is the attempt to express it with HTML instead of CSS.
Bootstrap allows grid layouts through (mostly) pure CSS, which is why it is OK. The 'mostly' part comes because your HTML will still be contaminated by your layout data, but more subtly:
<nav class="span4"> ... </nav>
<article class="span8"> ... </article>
This is surely significantly more semantic and maintainable than the old tabular designs, but the 'span4' and 'span8' are still display-data embedded into our HTML. However, since design can never be truly be decoupled from our data (e.g., nested divs), this is a reasonable price to pay.
That being said, even this coupling can be broken, if you use some more modern CSS features provided by a pre-processed language such as LESS. The same example:
<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>
Coupled with the following LESS:
#secondary-nav{
.span4;
// More styling (padding, etc) if needed
}
#main-content{
.span8;
}
This creates fully decoupled HTML and Stylesheet, which is ideal, because the HTML is cleaner and more readable, and redesigns can be made with less HTML modification. However this only works if you use LESS or some other CSS pre-processor, because CSS currently does not support mixins (AFAIK).
We already use LESS in my workplace, so I know I'll be pushing towards using this type of solution. I'm a very strong believer in semantic HTML and data-design decoupling. :)
Basically DIVs are DIVs & Table elements are simply table elements. The problem with tables is often just keeping track of all of the columns & the rows because it is ultimately a strict data construct. DIVs are far more flexible & forgiving.
For example, if you wanted to to take the four DIVs with the class that equals "span4" and just change them to a 2 column width, all you would need to do is adjust a wee bit of CSS for the outer class "row" and maybe the class "span4". In fact when doing DIVs like this I would avoid calling individual DIVs "span4" or some other number.
My approach would be to create a parent wrapper DIV that is called "rowspan" and the inner DIVs would have some generic ID like maybe "cell".
<div class="rowspan">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
Each "cell" class could have a width of 100 pixels for example, and then the parent "rowspan" could be 400 pixels. That would equate to 4 columns in a row. Want to make it 2 columns? No problem! Just change "rowspan" to be 200 pixels wide. At this point it is all in CSS so it's easy to do without rejiggering page structure in the DOM.
But with tables? Not easy. You would have to basically re-render the table with </tr><tr> tags to create new rows.
Version with table, tr, td depends on browser algorithms - wrapping, dynamic width, margins, centering etc.
Version with div can be more easily tuned by css and scripts.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have been reading around about best practices when doing developing a website. But I am still curious because the answers are found are mostly various, depend on a project's scope and many other considerations.
But just to cut it short, basically I wanted to ask about a proper formatting for 3 main elements in a website.
Header
Main/Body
Footer
How is the structure should be build? Are those three should be wrapped in a container like this:
<div class="wrap">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
And how is the styling should be done? I saw some people advised to use position:absolute for the CSS, while some others use relative instead. Sorry for the very basic question, but I am really confused about this at this current point of my learning.
The only reason a pseudo-standard like having a lot of wrappers exist is because it has proven useful when creating layouts. Basically it's all there for a reason. If you can design the page you want without having a <div id="mainwrapper"> around it - then you don't need a main wrapper like that. :)
My tip would be to simply start creating a site and try to get it to look like you want using simple elements and CSS styling. If you can't make it work - for example you don't understand how to create a flowing column layout - then just search the web for something like "HTML flow column layout" and go from there.
Edit: "Making it work" usually means not having to result to using tables, a lot of magic numbers and loads of elements to create something simple.
A rule of thumb: Don't cut and paste code/solutions if you don't understand 1) what they do 2) why you need them. It's better to try building it yourself and then, as you work with it, realise why some patterns (clearfix, avoiding tables, floating layouts and so on) are so common. It might not save you time right now, but it definitely will make you a better developer in the long run.
HTML layouts are very subjective and it depends on your requirements / preference as a developer. The two main layouts are static (using absolute positioning etc) and floating (using floated divs for a liquid layout).
This is a good article that covers these principles in more depth
Basically, you should be using block level elements i.e. div tags to structure your page. In cases where you have tabular data tables are perfectly fine, but don't use them for your layout as they're slow to render and can make things difficult when you need full control on your page layout.
Best practice for styling suggests that you use CSS to position and style your elements via class attributes and not inline. This will then allow you to minify your CSS scripts and reduce the overhead of your page. CSS has evolved very well, and there are a lot of selectors available to you to reduce the number of classes in your markup. See CSS selectors at W3C for more information on them.
HTML 5 example. Now a days best Layout width is 960. .content{ width:960px }
<!-- Outer Div -->
<div id="content">
<!-- Inner Content -->
<div id="content-inner">
<!-- header -->
<header>
<div class="header">
<div id="header_wrapper"></div>
</div>
</header>
<!-- body -->
<div id="content-body">
<section></section>
<section></section>
</div>
</div>
<!-- footer -->
<footer>
<div class="footer">
<div id="footer_wrapper"></div>
</div>
</footer>
</div>
When writing HMTL you need to bear in mind readabillity of the markup and the ease with which it can be altered in the future.
Try and bear in mind seperation of concerns. Which parts of your site are related to others in a structural sense and which are not reliant on others. Try and group the reliant elements together (using div's etc.) and keep the unrelated ones apart.
Try and structure your CSS in a similar way, if 2 elements position is reliant on the other, but the other isn't, group the related elements under a single class and then use inheritance to structure the differences. where as the unrelated one should probably be in a separate css class altogether.
Also try and structure your CSS so it can be re-used.
Bit general those points but hopefully it'll help?
There are plenty of sites which offer various SEO friendly layouts and they all provide the css
http://www.searchenginefriendlylayouts.com/
http://www.davidjrush.com/blog/2011/02/seo-friendly-two-column-layout/
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I'm an engineer. All my designer friends keep telling me to use a grid whatever that means.
I want to create a layout similar to facebook (3 column, with a fat center column. How do I do that while using a grid? Where to even start? Thanks
960.gs is a good system to use.
And, SmashingMagazine has a good round-up of examples, articles, tutorials, tools, etc., about grids.
You can use a CSS framework (I use http://960.gs ) to create a grid. If you were using 960, you would do something like the following:
<div class="container_12">
<div class="grid_3>
Leftmost
</div>
<div class="grid_6>
Middle
</div>
<div class="grid_3>
Rightmost
</div>
</div>
There are other grid systems, this is just one I like the best due to it's lack of learning curve.