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 am looking for a bells and whistles CSS framework. I have found a number online that deal with "grids", and some that deal with "typography" and others that deal with "resetting".
What I have not found is something that will give my web applications a consistent reusable style or theme.
I guess it would have to have a number of predefined elements that do things, for example:
div.boxed {...}
And then a number of themes or plugins that provide these in a consistent way. Javascript toolkits like ExtJS, YUI, and also GWT have their own skinability, and I guess this is the featureset that I want, but independent of any Javascript library.
(Open source would be best, but we don't mind paying)
Edit: 5 good answers, but I have seen all those frameworks, and they are not enough of what I am looking for. Perhaps what I am looking for doesn't exist. Or I haven't explained properly. I will give them a good going over and see.
Compass really changes things for you.
In addition to providing everything from grids to mixins like horizontal-list, it's built on top of SASS so you get stuff like reuse and variables and other such things.
It makes things you don't even realize are painful pain-free. Definitely worth looking over.
I am a fan of Blue Print CSS, their reset and grids styles are a very good starting point. Especially if you care about having clean html and css.
960gs is good for layouts.
Just use YUI Grids, it's as good as it gets :P
One of the long term plans for compass is to create tools for designers to share designs for things like shiny buttons or even whole pages. It's actually possible right now but the mechanims are not well documented yet. But I'm glad you like it, please feel free to bug us on the mailing list.
I'm a huge fan of BlueTrip which bills itself as, "A full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija's print stylesheet, 960.gs's simplicity, and Elements' icons, and has now found a life of its own."
I second YAML. It's highly versatile, well-documented, has a builder tool etc. The forms component does some annoying hover effects which I always disable but otherwise YAML gives you a good basis to build your own framework, possibly with the help of LESS, a tool that you'll soon find indispensable.
I found YAML (Yet Another Multi-columned Layout) to be an excellent, comprehensive, highly adaptable all-rounder.
Emastic lightweight, em based, fluid and fixed columns.
There is also LESS - LEaner cSS.
Provides the following features:
Mixins
Variables
Nested selectors
Operations
Related
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.
Recently i read the http://css-tricks.com/sass-vs-less/ post and one paragraph call my attention, related to CSS3 Helping
So what this comes down to is: Sass has Compass and LESS does not. But
it goes deeper than that. The attempts at creating a real robust
project like Compass for LESS haven't succeeded because the LESS
language isn't robust enough to do it properly. Winner: Sass
One of the robustness explanations says:
Sass has actual logical and looping operators in the language.
if/then/else statements, for loops, while loops, and each loops. No
tricks, just proper programming. While guarded mixins are a pretty
cool, natural concept, language robustness goes to Sass. This language
robustness is what makes Compass possible.
I feel uncomfortable with such kind of affirmation and have my doubts. This days almost everything is possible with Javascript (LESS compiler).
Question:
It's possible to build a Compass like tool on top of LESS or the language (JS) isn't robust enough like the post says ??
Note:
The answer should be focus in the fact that LESS is or isn't robust enough to build a Compass like tool rather than your personal preference in the subject.
Focus on why (language facts) you do that kind of affirmation.
LESS has it (robustness) too
lolmaus's answer implies LESS does not have the same things as SASS, so to pattern off his answer, let me simply respond as follows:
LESS has at least one Compass like work in progress through compless, as well as semantic grid systems (lessframework, semantic grid, fractionless), media query manipulation tools (less media query solutions), various built in math and color tools, styling libraries (Bootstrap, 3L, less elements, LESS hat, Clearless), etc.
In short, robustness has nothing to do with it. Both are robust enough. SASS with Compass has perhaps had more attention paid to it (more developments done), but both SASS and LESS have plenty of supporters, and nearly parallel capabilities.
It is the ecosystem of numerous Compass extensions for all possible purposes that makes SASS really shine.
We have semantic grid systems (Singularity, Susy, Neat, Zen Grids...), media query manipulation tools (Breakpoint, Breakpoint Slicer...), various math and color tools (Toolkit, Modular Scale, Responsive Calculator, Color Schemer, Blend Modes...), styling libraries (Compass, Bourbon, Foundation, Sassy Buttons...), etc.
With SASS, you don't have to build scaffolding or reinvent the wheel over and over again.
Here's an example of a responsive gallery grid: http://sassbin.com/gist/5670191/ Can you solve the task with that little code in LESS?
> It's possible to build a Compass like tool on top of LESS or the language isn't robust enough like the post says ??
Theoretically, there are no limits to do that. Practically, no one would bother because there's the Compass ecosystem already.
I did some reading on blogs and things that I believe to be reliable resources and ultimately decided on SASS. The bottom line is whether or not the language that the compiler/interpreter is based on is robust and powerful only means that the capability to make a better compiler/interpreter which can process a more robust input language may be there, but it in no way indicates that this is the case. I use SASS and I enjoy it. You could debate the merits of apples and oranges for days, but ultimately you need to find the one that works best for you.
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
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 11 years ago.
i have taken over a website that has tons of css files and lots of inline css as well. Is there any tool that can show me a visualization of how this stuff is organized as i have a strong feeling that. Many pages are bringing in more css than necessary
Also, i want to remove all the inline formatting as well into css files. Is there any refactoring tool that does even this by itself?
IE8 dev tools can show you all CSS inheritance tree (including files where this particular style is defined in)
Firefox has tons of plugins that can do the same.
This is not a direct answer to your question - I don't know of a true refactoring tool for CSS. One that I've used to create and preview CSS easily is TopStyle - I'm on v3.5 Pro, and they've got v4 out now. There may be better or less expensive alternatives out there; I'm not an expert.
You might also want to check out Firebug: http://getfirebug.com/
Dreamweaver, it can convert inline css to external css file.
also it can view all css files and its rules in a outline view, and you can easily rename all of it.
The Dust-Me Selectors Firefox extension could help you find CSS that isn't used at all, it's a good first step.
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'm trying to improve the style of a website. I'm looking for some examples of beautifully styled HTML elements (tables, lists, headings, etc.) that I can draw on for inspiration, or just copy and paste verbatim (if that's permitted).
Some explanation of how the styling was achieved would be nice, but is not absolutely necessary, as I can always use Firebug to reverse engineer the design. Ideally the designs should:
Be compatible with all modern browsers (which excludes IE6 IMO)
Use little or no JavaScript
Be valid XHTML transitional/strict
EDIT: Ideally, the site(s) should provide an easy way to view a list of styles for a particular element type (ordered list, table, heading, etc.)
Thanks,
Don
The best recource for specific elements and types is in my opinion by far http://www.patterntap.com.
There you browse categories like lists and tables.
alt text http://img514.imageshack.us/img514/2662/afbeelding1eu.png
For lists, Listamatic immediately comes to mind.
For everything else, I can only think of CSS Zen Garden.
Open Source Web Design has a lot of stuff available. You can see it at: oswd.org
CSS Play, by Stu Nicholls, and, of course, A List Apart are two of my own favourites.
The folks at Zen Garden think they're pretty hot. There's a large collection of different designs of the same HTML text to be admired there. Maybe you can learn something from the masters!
http://www.dynamicdrive.com/style/
http://css-tricks.com/
http://www.css-website.com/
http://cssmania.com/
http://cssline.com/
http://webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php#gradients
http://www.webcreme.com/
http://css-warfare.com/
http://www.cssbeauty.com/
http://www.boxedcss.com/
http://css.maxdesign.com.au/index.htm
http://www.csselite.com/
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS
http://www.designmeltdown.com/default.aspx
http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/
http://inspectelement.com/articles/the-ultimate-a-z-of-the-best-design-and-development-related-sites/
For the inspirational sites, I use Firefox + Firebug. 95% of the sites listed comply to web standards, so I can peek at the code and know it's OK to use.
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've been using Nicole Sullivan's "Object Oriented" CSS grid for a while now (hate the term, though) and have found it to be quite good. However, as I get more experience with grids, I'm noticing a lot of other frameworks out there; in particular the 960 Grid System and the Yahoo! UI Library.
I'm looking for other peoples' experiences with these alternatives (or others) so I can make a more well-founded decision on whether to change or not.
I think Blueprint is the best.
Also review comments posted at: https://stackoverflow.com/questions/589184/help-me-choose-a-css-framework-960-vs-blueprint-vs
I found the noupe site has great comparisons for CSS frameworks and helped me choose: http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html
If you are using rails framework, you should consider using compass which is layer over these frameworks (As suggested by Alan below).
I would recommend Blueprint used from within Compass. Compass reduces redundant CSS styles and has variables and classes. Apart from that, I have found Blueprint to be easy to use.
What about the twitter bootstrap framework. It good for me