Ultimately, I like to code my own CSS. I hate it when I have to conform to someone else's naming conventions... especially when they have no real meaning. However, I am attracted to the fact that a mobile site is pretty much ready to go with a framework.
Now, I've seen several comparisons between 960.gs and Blueprint, but LESS is never involved in those debates. Why not? Am I missing something? To me, it seems that LESS does pretty much the same basic things.
http://lessframework.com/
Anyone care to discuss?
LESSFramework is a css grid system that supports responsive webdesign principles. Thats the area of webdesign that strives to make one website design to support all browsers from mobile to large screen. The lessframework grid system adapts it's layout to the available screen real estate.
That's where it really differs from classic grid systems like 960.gs or blueprint.
LESS Framework is fairly new too, that's probably why you don't see it that much in reviews or comparisons.
If you want to compare them you'll have to figure out what you really need from a css framework.
960.gs is a pure grid layout system, nothing more ... but the most widely used one.
Blueprint is a grid system that goes a little further, it also offers typography and form styling
LESSFramework is a grid system that's only really usefull if you are aiming to create a responsive layout. If you are not you'll probably be better off with 960.gs
960.gs and Blueprint are grid systems.
LESS is a CSS pre-processor (aka LESScss).
Comparing it to them makes no sense, they do totally different things.
Update:
You seem to be talking about something different from LESScss, a grid system called LESSFramework.
I am leaving this answer here so people reading this question will see the different projects and what they are.
Related
We have found a few online, but they all appear a bit dated.
Curious what people consider the best resources for creating and managing CSS/DIV layouts (i.e., layouts done purely in CSS with DIVs -- no tables)?
Thanks!
I'm a huge fan of http://compass-style.org/
Not only does it make creating layouts easily, but it also changes the way you think about coding css.
http://www.apple.com/safari/
http://www.mozilla.com/en-US/firefox/
http://www.google.com/chrome/intl/en/more/index.html
These are the homepages for some modern browsers. View source, there is alot to learn.
The Less Framework is a CSS/HTML framework for websites designed to display properly on a variety of displays - mobile, tablet, webpage etc.
Less Framework is a CSS grid system
for designing adaptive websites. It
contains 4 layouts and 3 sets of
typography presets, all based on a
single grid
Basically use this framework as a basis for a new, clean site and then add in your styles.
I always considered http://www.csszengarden.com/ to be a good example for div and css design.
I think I know what you mean — there are lots of books that teach CSS the language, but not a lot that purely discuss using it to lay out web pages, starting from the layouts you might want to achieve.
I think that’s partially due to IE’s dodgy float support up until 8 and 9. Any discussion of layouts rapidly descends into murky, complex discussions of IE’s various bugs.
Hopefully the situation will improve as older versions of IE die out. Until then, although I’ve not read it myself, I think ‘Bulletproof Web Design’ by Dan Cederholm has a couple of good chapters focused on layout.
Since I new with CSS, I just started to work with CSS Grid system. I would like to know if are there any technical issues in use CSS grids? I mean, which are the reasons for you to not use grid?
Thanks
Flexibility
Once you start using the grid, you are stuck with it. Any other issues you might wind up finding you will have to conform to.
In my opinion (and every other designer I've talked to) it is far easier to simply define your own columns and default sizes as classes and apply them as-needed. A custom grid if you will. Then changing the styling is as easy as changing a line or two of CSS, instead of either re-generating the grid system or redesigning the site and sacrificing in order to use the grid.
I'm a fan resets and some minor love from Blueprint (especially the Typography), but that's about it.
I've just started using object oriented CSS (OOCSS). I'm really enjoying it because it provides a very basic and minimalistic grid system. It allows you to create relative sized grids by dividing an element into halves, thirds, fourths, or fifths. The divided elements are infinitely nestable.
OOCSS is more of a philosophy than a framework. It's all about how you extend a very basic foundation.
Check out these links:
http://oocss.org/
http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html
http://www.youtube.com/watch?v=j6sAm7CLoCQ
The only real reason is that they can lead to bloated markup, sometimes you have to do some serious nesting depending on the layout and desired effects+flexibilty.
They also lead to excessive class name lists on elements. However, you can avoid this at least if you move the CSS to semantic classes/ids before deploying... but thats can be alot of extra work. Blueprint is the excpetion here because it has acommand line tool to allow you to apply the rules from its framework classes to semantic selectors.
Overall i generally use them because its alot easier to teach a designer how to use a grid template. That why im not do alot of production art tasks when i go to slice things down. It jsut makes the whole process smoother IMO.
If your site has a column layout AND repeatable design patterns throughout the site... then there aren't any reasons not to include a grid. A grid adds: organization, proportion and alignment to your page. So why not keep that consistent? There is no reason.
Just don't Overuse A Grid
Some people say a grid is inflexible? That's not totally true - you can use it where you need it. You can always remove it or adjust. Just don't overuse it.
It depends on the grid system. Most grids have a fixed amount of columns, which restrict you in how you create your layout. For example, they don't allow you to combine 30%/30%/40%, 50%/50%, 25%/75% and whatever other combinations you can think of.
Some grid systems also don't allow nesting. That means you can't use a grid element as a grid for child elements in those grid systems, which makes it a lot more difficult for many layouts to be coded to HTML.
Also, some grid systems use techniques that don't work in older browsers. Before you use a grid system, you should always make sure it supports the browsers you need to support with your project.
There are frameworks out there without such restrictions, though. Cascade Framework, in fact, has a grid system far more flexible than that of any other framework out there and works fine in both IE6-8 and modern browsers alike.
What are cons to use Grid based approach? Where everything is in proportions?
Does it all make some restrictness? I'm not talking about non-sematic classes, unneeded css code, table- feel structure.
My question is about to work with fix proportions. in grid based system everything increase and decrease in proportions?
I think we can only use grid based framework if we are doing both thing PSD design and XHTML css coding?
If you are not designing the site, I highly suggest not using a grid or any other tools that would alter the design (proportionately or otherwise). Leave the design to the designer, and handle development, trying to get your finished design as close as possible to the finished mockup from the designer.
Nother irritates me more than when I have handed off a design to a developer, and he "adjusts" it because of some improvement he thought relevant.
If your designer doesn't use a grid, talk to him about it. If he prefers to continue without a grid, then don't force a grid on his design.
Grids don't increase/decrease things proportionally. They merely allow you to layout things in a nice and orderly fashion. I can't think of any cons to grid-based CSS frameworks. Perhaps they are overkill for some projects, but other than that they are terrific and should be favored by veteran designers.
I have seen all these 'grid' type css frameworks and I'm still a tad confused as to what they do.
I understand that they help you quickly create a page since the layout is already defined for you, but do these frameworks make certain things MORE difficult?
It depends on how you typically use CSS to set up your pages. They wind up using less semantic classes ("indent-12" vs. "rail-content") if that's important to you, but they also solve a lot of layout issues people tend to run into.
They take care of the need (mostly) for floats, which can break designs faster than... well, something fast.
What they make harder, however, is customization. If you don't take the time to learn just what those classes mean, it can be hard to make things look just the way you want because your CSS rules might clash with something you didn't know about.
They are great as a way to switch from tables to CSS-based design, and they also really help implement the "grid" theory of design, where things line up and are in horizontal and vertical rhythm.
Take 'em or leave 'em (I left them, but sure played with them a bit)
EDIT: I used both 960 and blueprint, about 8 months ago or so. Unclear if significant changes have taken place since then.
Grid 960 is a CSS framework. Mainly, it can help you develop faster the mock-up of your page.
You can learn more about it in this tutorial.
Enjoy!
The idea is to stop thinking in terms of %s or pixels and start thinking in terms of columns. Grid systems automate the implementation of column-based positioning. My favorite is Fluid 960 - a grid system that stretches its columns to entire available width.
I have looked into various CSS frameworks in the past and I think they are aimed at removing a lot of the nitty CSS bugs that come across between browsers, if you ever tried to hand roll your own CSS you will know the issues that come up. If you have your own template that you have developed I would stick with it, that is what I ended up doing. I am familiar with it and it is very lightweight.
A 960 grid is a framework that should be implemented from the initial design stage. It helps both the designer and developer create clean organised UIs. In my experience the 960 grid system (http://www.960.gs) has helped a lot as it will allow me to create a formatted page quickly without re-writing any css files no matter what a client asks for. Typically I implement CSS styles like the following
.marginLeft20 { margin-left: 20px; }
.oneColumn {
float: left;
width: 60px;
}
This means I can make a div with the above classes applied
<div class="oneColumn marginLeft20">This is a oneColumn example</div>
If you need anymore info on grids I would recommend http://www.960.gs
Grid systems/frameworks are sort of like a sandbox with all the shovels, pails, sand and shapers ready made, so that all you have to do is pick up a tool and start making your castle.
Burt makes a great point about rolling your own CSS and all of the browser issues you run into. It can make for a very frustrating experience depending on the project you're working on!
While the framework you're using may have some limitations, it alleviates some headaches also.
My one of web designer friend still making sites with table but he use css very nicely and I also use css nicely but with <div> and i face cross browser problem in layout more than my friend.
and i given some reason to my friend about cons of <table>. read my whole discussion with friend?
I - you site will be problematic with screen reader
My friend - OK, but i never got any call from any client regarding this.
I - you will devote more time to make any changes in layout, if changes comes from client
My friend - I don't think so, but if it is then show me how can i save time with <div>?
I - your sites will not work well with search engine.
My friend - it's not true. I've made many site and no problem with any site or client regarding this
I - layout is old way, non w3c and non standard way.
My friend - what is old and what is new, Who is W3C i don't know, What is standard? Whatever i make works in all browsers, it's enough for me and my client will not pay for standard and W3C guidelines rules
I - Your site will not work in mobile browsers
My friend - No problem for me, my client don't care about mobile phone
I - Your sites are not accessible?
My Friend - What do u mean not accessible? Whatever i make works in all browsers. my any client never asked about accessibility
I - You will not get more work in future, with table?
My friend - OK, no problem when clients will not accept site with table then i will learn about div based layouts in future.
My questions?
Is it still true, to make cross
browser layouts for desktop browsers
using table+css is easier then
div+css?
What is the benefit for developer to
use DIV+CSS layout in place of
<table> layouts if client would not
mind if i use ?
Personally I find it much easier to think about the layout in terms of independent chunks rather than a table where the cells are tightly coupled to each other and dependent on each other. Having used both methods extensively, divs are easier when you've learnt about them.
Tables are a nightmare to maintain, too. If you want to add a column you need to make sure other rows aren't affected. Even with CSS, the HTML for tables is still very bloated and difficult to understand "at a glance" (particularly with nested tables).
I'd be surprised if tables really are a huge problem with screen readers (one would hope the software is smart enough to deal with all types of web pages). However, you should take all reasonable steps to make sure the site is accessibility to all, since it's the law.
Mobile phones can display tables fine. The only problem here is if you want to create a separate mobile stylesheet it's virtually impossible to remove the column format.
Finally for SEO, it makes no difference. SEs say time and again that the validity of code makes no difference.
Laying web pages out with tables is probably a bit more intuitive for most people than CSS.
Depends on the layout though. Deeply nested tables can get pretty hairy. CSS layout options (basically float, at the moment) are a different way of thinking about page layout. I find it easier than tables nowadays, as I’m used to thinking about layouts in terms of CSS floats.
IE has a few float-related bugs. I think they’re the main source of cross-browser issues with CSS layouts.
Using a CSS framework makes creating layouts with DIV's a cinch!
I personally use 960 Grid System, but theres plenty of others out there too.
CSS is more flexible and cleaner. Period. I personlly think that 3 nested divs with meaninglful names is much more readable than 3 table tr td s right? There is a reason it's the new accepted standard. I use tables. But only when displaying tabular data. Once you learn the tricks in CSS you can write super clean div structures that are completely cross browser compatible.
I remeber a time I felt like your friend. It was mainly based out of fear. Don't be afraid. And remember it's us developers that determine the future of code and browsers. Agree with all the other answers on here too. No matter how you do it (from scratch) or grid layouts, you'll be much happier with a tableless layout. And to agree with the above, thinking of the site as blocks helps a TON. Good luck!
As nobody mentioned this: HTML aims for semantic markup. That means, the tags you use have a semantic meaning.
So using table for tabular data is fine and the only way to do it.
But using table for layout contradicts the semantic meaning.
And the relevance of semantic should not be underrated as semantic is what the WWW is striving for now (Semantic Web). I know that Semantic Web and HTML are not necessarily connected, but I guess using HTML the right way can only help.
Creating appealing layouts with divs might be more difficult. This comes with the advantage of greater flexibility.
And as already mentioned, maintainability can be a pain with tables.
I personally try to keep my HTML files as semantically correct as possible, i.e. using the right tags for the right purpose. The look (which a layout belongs to) is a matter of CSS.
Btw. if you are searching for CSS vs tables get a lot nice comparisons (most in favor of CSS).
table layouts results in more html, more html results in more code to write and maintain, and less clarity for dom manipulations via js. the amount of css code will remain almost the same (I'm not talking about 2004 inlinestyle markups, that surely will dramatically reduce the amount of css). and there is always the better seo factor that speaks against table layouts. so it can't be easier if you fully understand css. maybe you need to clarify what browsers do you include in your "cross broswer" statement, since its not even self-evident to support ie6 and ie7 nowadays.