This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
What is the best CSS Framework and are they worth the effort?
Would you recommend using a CSS framework for ASP.NET like the Blueprint CSS Framework vs building your own css styles? What are the benefits of using such a framework?
Abstraction is the keyword.
Like every framework it delivers you a code basis you can build on. You don't have to "reinvent the wheel".
Ever considered using CSS resets? They're much simpler and allow you to start from the ground up.
I have heard of CSS frameworks but don't really understand the level of complexity they introduce.
That said, I do tend to write standard CSS and expect browsers to conform to it. If not perfectly, then similarly across them all.
I think the benefits are:
1.Easier to follow web standards.
2.You code will be consistent across the projects, and for that reason much easier for maintenance.
And definatelly give a look to reset and fonts-reset
I don't see why using CSS Frameworks.
I always do my CSS from scratch, sometimes to remember sometimes i go back to my older CSS styles and look around. And sometimes i just do some testing until I've obtained what i wanted.
EDIT: Just read some of the web standards guidelines and do some experiment and you will get the hand of it..
I did the same and at my first times.. I had some cross-browser issues and other small stuff.
now i'm pretty happy to say that i do cross-browser css, with no big problem.
But if you just need CSS for a project, and you wont be needing CSS again, using a Framework might not be a bad idea.
In my opinion a CSS framework:
PROS
Aims at cutting down development
time.
Standardization and consistency.
Solid foundation to build upon.
Guidance\guidelines to follow. Avoid white screen of death effect.
Proven "good looking" UI.
CONS
Extra complexity
Steep learning curve
...
PROS: Anyone can take it and produce a result
CONS: Not everybody will be able to fix what comes out of it...
I would defenitely use a CSS framework, simply because you can assume it has been tested in a lot of browsers. I you use something like 960.gs and it looks correct in one browser, you can be quite sure it will do so in all the others.
And like Omega notes I would at least use a CSS reset file, like YUI Reset CSS.
I like to use CSS frameworks because it ensures that it looks (quite) the same in many different browsers. e.g. I'm sick of writing hacks for internet explorer 6. The framework take this part for me.
The con is that you have to learn how to use the framework of your choise, but once learned it makes fun to write new sites.
I'm using YAML btw.
Related
After a long time i got a new project, where i'm going to implement the RWD. Before getting project i was talking a lot the RWD, but when it comes to writing the code, i see lot of confusion. I really need your suggestions and ideas for proceeding further.
Here are my questions:
How to support support media queries stuff to the older versions of browser(ie6 ie7 ie8 etc) or what is the alternative way to do it.
Do i need to use the flexible layout within the fixed main layout (like percentage based widths)
What about using the Boilerplate or bootstrap etc which supports for fallback version also
What about using modernizer?
i recommend if you are stuck please look at conditionizr http://conditionizr.com/
for more information on media queries go here http://css-tricks.com/css-media-queries/
CSS style sheets have a habit of growing big and chaotic over time.
There are a lot of rules, hints, and schools of thought that help achieving cleaner CSS. (For example here) However, all those require constant alertness, activity and a lot of discipline on the maintainer's end, with mixed real-world success. As Nicole Sullivan so nicely puts it:
In fact, in most cases, the things we considered best practices were leading to the bad outcomes we sought to avoid. I realized (unpopular though it might be), that we couldn’t make it work out well by trying harder. Each time we start a new project, we think “this time, I’m going to keep the code clean. This time the project will be a shining example of what can be done with CSS.” And without fail, over time, as more content and features are added to the site, the code becomes a spaghetti tangle of duplication and unpredictability.
Are there any efforts to create a language of some sort, with strict structural rules and a merciless compiler, that enforces strict rules that prevent style sheets from becoming spaghetti? The compiled end result would be CSS.
I have no idea what such a language would look like and whether, given the vast amount of possibilities and combinations, this is a solvable problem at all.
Is there any research in this field? Anything to try out?
One very interesting related tool is CSS Lint, but what I'm asking about goes even farther than that.
Edit: LESS and SASS absolutely go into the right direction, but they are not what I am looking for. They introduce some very nice features and are a godsend for the CSS developer, but what I'm, asking about goes even further and more into defined, enforced structures.
You could very easily write spaghetti code in any interpreted language, so really what you are looking for is a CSS compiler. This is sort of what Google GWT does for JavaScript by generating it from Java code.
However, CSS doesn't have flow control, functions, variables etcetera, which means it doesn't make sense to have a higher-level language around CSS. At the root of it, it's just name-value pairs with cascading logic.
If you want to reign in your CSS code, you need to reign in your DOM as well. If you are defining columns with IDs left and right then you are semantically restricting the designer from moving them anywhere else. On the flip side, if you are smart about things you can do a lot more.
Lastly, the cascading part is what most new designers have the highest tendency to get wrong. If you pay close attention to the DOM and cascading logic, make use some good resets or grid-based frameworks and incorporate tools like LESS (Ruby) or LessPHP, you'll end up CSS that's far more pleasing to work with. I like LESS because It empowers you with quasi-functions, variables and nested properties which really helps clean up your CSS.
Are there any efforts to create a language of some sort ... The compiled end result would be CSS.
There are two efforts that I know of to do exactly this:
Less
SASS
Both aim to provide an improved version of CSS which allows you to write with more structure.
In addition, Google have demonstrated a development version of Chrome which incorporates a number of additions to CSS along similar lines. This is interesting because it indicates the future direction of CSS, but in the short to medium term you will need to use Less or Sass, as even the work in Chrome is very much experimental and will not be released for some time to come (and even when it is, you'll need to wait for the other browsers to follow suit).
[EDIT] Here's a link which details Google's experimental CSS features in Chrome: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/
[UPDATE 18 April 2012] There has been some progress in this area since I wrote this answer. Slow progress, but progress nonetheless. The good news is that CSS Variables has just been published as a First Draft specification by the W3C.
See http://lists.w3.org/Archives/Public/www-style/2012Apr/0228.html for the official announcement of the specification.
So that's goodnews. Of course, how long it takes to get into the browsers and the end user base is anyone's guess, but at least there are signs of progress.
There is Stylus, something like LESS and SASS, but with transparent mixins.
That means that you can hide away complexity by bundling it into new key/value pairs. Example from the site:
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
form input
padding 5px
border 1px solid
border-radius 5px
Maybe this kind of syntax is what you want?
PS: you can still type braces and semicolons, if you prefer ;)
Well you seem to know about Nicole Sullivan, so if you know about OOCSS already, I apologize, but no one seems to have brought it up. If you don't, it's her own project to do this very thing, I believe. It's only in Alpha testing right now, but you asked about efforts and not finished languages, so maybe this will be just what you're looking for. It definitely claims to be be for solving the problems you describe, but I haven't used it myself.
https://github.com/stubbornella/oocss/wiki
Have you checked out Compass? Compass is a framework built around Sass. I think it mostly adds features and boilerplate code to add a library of predefined mixins and whatnot. However, Compass might be even closer to what you want. Compass is based around Blueprint which is a straight up CSS framework (which may also be worth looking in to).
To me the best approach would be to take Compass and Sass (or CSS and Blueprint/LESS and something comparable) and to write a very concise and detailed style guidelines which you could develop overtime as you figure out what works best: your first thoughts on the matter, regardless of experience, may be wrong. Once you have these guidelines down you could talk to the people at Sass, Compass, LESS, Blueprint, whatever, about working in some of your well thought out and "researched" guidelines. OR you could start contributing to these wonderful projects which I believe are all under an open source license (Sass is under MIT, LESS is under Apache and I think Compass and Blueprint also under some form of open source license). Fork it and have fun :D
Is there a way to make sure your CSS is cross-browser capable?
I tend to work with strict doctypes, which solves a lot of problems.
Study http://www.quirksmode.org/ by Peter-Paul Koch
I refer to this site all the time.
However, as Ernest Friedman-Hill wisely pointed out, testing...
No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
Here are a few tips:
Try not to use CSS3 (yet).
Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Use a CSS reset, like http://meyerweb.com/eric/tools/css/reset/
There are a few ways to do that.
First you will want to check on a few browsers when you are done with your website. Some good options to do that is Adobe Browser application, another is browsershots.com and you can find others.
Another great rule of thumb is to use an established framework that is already cross-browser (my favorite being 52framework at http://52framework.com ).
And honestly after years of writing CSS it seems that you will just get use to writing the best possible CSS and you will have cross-browser code of the get go.
There really is no sure way to write perfect CSS first time around (there are validators out there that can help a little, Dreamweaver has a specific tool that will validate code and CSS and let you know if its capable or not.
Good luck!
Your best option is to test in each of the browsers you want to support. If you don't have access to all the browsers there are for-pay web sites that will take screen shots of your site using different browsers:
http://browsershots.org/
Did you mean "capable" or "compatible"?
Anyway, I always use the W3C CSS Validation Service. It checks your CSS to make sure it is valid. After passing this validator, chances are your CSS is cross-browser compatible. But I would recommend also manually inspecting your CSS in different browsers. Do check out http://www.css3.info/ for details on how different browsers implement different features of CSS 3.
I would also recommend you install the Web Developer Toolbar if you're planning on doing heavy web development. Great tool for Firefox and Chrome.
Ok, so Less.js has come along, and it seems that my dreams of creating a CSS framework (especially a 'grid' system), with an 'abstracted' CSS language might be about to come true.
That is, 960 and Blueprint are great and all... but it so irked me to put style information in HTML markup, such as:
class="article grid_4 pull_2"
or whatever the syntax was :)
So, now it seems that we can do it this way:
.article {
.grid_container();
.grid_four();
.pull_two();
.last();
}
Weeeeeee!
So, I'm about to get stuck into developing this for myself -- but I'm sure there are some brainiacs out there that have already done it -- so before I get into any heavy lifting...?
Any leads?
Kindly
Daryl.
This is the CSS framework you're looking for - http://semantic.gs/
The Semantic Grid System - Page layout for tomorrow.
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive?
Brought to you by LESS.js and the creator of 1KB Grid.
I checked out less , it was a push between that and the new sass (scss) syntax, but what made me choose sass is that it has a way to turn css into scss code.
The round trip was something I definitely wanted. Once that happened, then Compass presented itself. I was going to try using something to code everything in python, but it makes perfect sense to me to preprocess the css, especially since I'd like to use HTML5, and if the spec changes, then I can tweak the generation.
BTW folks, I've started that framework I was talking about.
http://github.com/DarylAntony/lesser
I'm having fun with it.
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 9 years ago.
If yes, which one? Why?
If no, why? How do you fix cross browser CSS rendering?
I currently use blueprint css, and I wonder if it's a good choice. Thanks!
:)
No, I'm not using any framework, just a well thought out naming system that I reuse over and over and a basic css with a few resets and some base styles.
Why am I not using a css framework?
The use of a framework usually assumes that the designer is familiar with its conventions which is quite often not the case - you're not the one designing the page or the client has his own designer. And even if this is not the case, there will always be designs that won't fit into 960 pixels or simply have an even size so you can't use your magical .span-4 class.
Which leads me to the next point. The naming is not semantic. In theory you would expect a framework to ease maintaining a large site. However, suppose you have to make a slight design change. This basically means changing the html across all the template views involved. This is hard and risky even with a versioning system, because it's one thing having to rollback to a single css file, and another to 100 views. All because input.span-19 should have 5pixels less. CSS frameworks - the new inline css.
What about cross browser issues? Either you're using a framework or not this is not going to change. There are browsers or operating systems that have certain particularities. Bottom line - Internet Explorer will still suck as much.
CSS Frameworks stand out for discipline and I have to give them credit for that, but in the end it's all about the one writing the code.
I've noticed two major misconceptions about css frameworks.
Firstly, there tends to a lot of confusion between the concept of a framework used in software development, as a tool and a type of a framework such as 960gs.
Wikipedia defines a framework as "an abstraction in which software providing generic functionality can be selectively changed by user code, thus providing application specific software".
#vise says "I'm not using any framework, just a well thought out naming system that I reuse over and over and a basic css with a few resets and some base styles." This is akin to saying "I'm not using any framework, just a framework." This is probably some kind of semantic irony. No offence intended :)
Blueprint, 960, compass etc are all types of frameworks. Because some css frameworks may not be semantic or are lacking certain desirable qualities, this does not mean css frameworks are a bad idea.
The second misconception is that css and css frameworks are mutually exclusive. You either code css by hand or you use a framework (with some custom stuff). But... wait a minute... isn't CSS a set of default elements that we can alter or extend to suit our specific requirements? CSS looks suspiciously like a framework according to Wikipedia's definition.
Of course, this second point is debatable. But often I find that people are using some kind of framework without knowing it.
To answer your question, I tend to use something like sass and make my own framework. On my latest project, I am using a combination of this and Bourbon which is looking good so far. The main reason I use frameworks is because I'm tired of the redundancy in CSS. It's really boring having to repeat the same values over and over. There are other concepts in design that CSS doesn't do very well which I won't go into here (see here). But by using a framework, it's possible to abstract all your problems away and just work on getting things done.
I hope this helps!
I like the yui css tools. Those guys have definitely spent more time dealing with cross browser css than I would care to. I haven't tried others.
I use yahoo's yui-css framework. That's the first one I came across and it was easy to understand. I just saw the video and cheatsheet and got it working.Also, Yahoo uses it on some of their sites.
I use Blueprint along with the Compass framework. Coding CSS has become enjoyable again. :-)
The Compass/Sass combination is fantastic, and offers several plugins for using the framework of your choice without the non-semantic class names. Outside of Compass, I always found frameworks to be too restrictive and use too much markup.
I'm not a fan of the Blueprint, 960gs and YUI plugins for Compass either: they were originally built for use with extra markup and don't take full advantage of Compass/Sass for extra flexibility. So I built 'Susy' - a flexible framework built native to Compass/Sass.
Whatever plugin you use (or write your own), I highly recommend Compass/Sass as a better option than extra markup.
I created my own subset of classes from which i found myself use very frequently, this makes me work faster and create html layouts much easier, without repeating same properties under a lot of classes.
For example for inline divs i have fl and fr classes to represent float right and left, for fluid widths i have 20 width classes. Here are some classes from my generic stylesheet i mentioned. It works out for me.
.fl { display:inline; float:left;}
.fll { display:inline!important; float:left!important;}
.fr { display:inline; float:right}
.frr { display:inline!important; float:right!important;}
.ib { display: -moz-inline-block; display:inline-block;}
.clear { clear: both}
.none {display:none;}
.noni {display: none!important;}
.block {display:block;}
.blocki {display: block!important;}
.pointer {cursor: pointer !important;}
...
.w10 { width: 10% !important; }
.w15 { width: 15% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
...
So this technique can't be a framework replacement of course, but this works well enough if you don't want to have any other thing in between your styles and you:)
Sinan.
P.S. In IE6 and below multiple classes work buggy this is to use in modern browsers. see the table at Quirksmode
I have used Blueprint-css at some places and found it quite useful.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
I prefer fluid version of 960.gs: Fluid 960 Grid System
Just started a project using 960 grid. The designer bought into this early on, and let it guide his designs.
I must say, it's much much faster. Spend much less time measuring pixels on mockups, asking the designer the intent, and futzing with CSS to build "page templates". Spend much more time just implementing the designs.
I use a few on a regular basis and I would recommend checking them out.
heymuscle is a responsive css framework that fits 1140px/960px/ipad/iphone similar to 960gs
960 grid is one of the most popular grid's out there and provides easy to use classes for laying out your page
1140 grid is a fluid layout
Hope this helps