Related
So in class, we've been applying css frameworks like Bootstrap, Foundation, Normalize.css but I do not understand what the point is of using them. Can someone briefly explain WHY they are used? How am I supposed to know which framework to use? For example, let's say I made a basic HTML file for my blog and I want to style it. Would I need to use a framework? How would I know which to use? How is it different from just styling on my own from scratch? I know these seem like stupid, ridiculous questions but I just started learning CSS a month ago and do not understand what frameworks like Bootstrap, Foundation, Normalize, etc. are and the purpose of them. Someone please explain as if how they would explain to a little child so I understand? Thanks.
A bit of an opinion-based question, but in short: developers are lazy and it takes time to code sites that are mobile-ready, consistent across browsers, and are easy to manage as browsers get updated.
With frameworks, developers need not waste time figuring any of this out.
For example, with Bootstrap, using the grid system, it is possible to make mobile-ready sites with minimal media queries and complex CSS rules.
Using other people's code, which has been tested on production environments and is constantly being patched and updated, saves a lot of time and a lot of bugs down the road.
You can think of frameworks (in any language, not just CSS) as a bunch of existing reusable codes you can readily use for your own projects. They essentially make your life easier because you don't have to reinvent the wheel anymore. Simply put, frameworks are a bunch of tested reusable codes for common tasks.
The purpose is to avoid having to make your CSS from scratch. There are a LOT of CSS activities that most people do over and over. If you look at a wide variety of sites, you'll notice similarities in the way information is presented. As a result, if you're going to be presenting information using one of those standard layouts, it's vastly easier to simply use a CSS framework than roll your own version.
Also, different browsers have different default CSS settings. Using a CSS framework will provide a CSS reset as part of what they do. This helps ensure that what you see in one browser is what will be seen in all browsers. This helps you spend more time building your site and less time trying to figure out why the display is different in a particular version of IE, for example.
frameworks comes with lots of features like grid, components, typography along with good browser compatibility so you can simple use them instead of creating them from scratch. It totally based on project requirement that what framework you should use. Apart from bootstrap and Foundation there are more great out there created by few geeks.
I have already built a site using CSS. Now looking back I regret not taking the chance of using Bootstrap. My website is already built and styled. My questions is, is it possible to use bootstrap even though you already have styled you website without having to remove all the CSS?
Bootstrap uses a set of pre-configured classes to implement it's styling rules..
So unless you somehow incorporated the same class names in your site and intended the same styling as was intended by the Bootstrap developers, you are going to have to make the necessary changes on your own.
That said, if your project is intended to be extended in the future, it may still be a good idea do re-work what you did up until now with Bootstrap, in order to save time in the future (I am assuming that the project is not very large in scope).
There are few things you need to know:
Bootstrap uses box-sizing: content-box so if you are not, it will probably impact all your padding/border stuff.
Bootstrap comes with a reset and few helpers with generic names that can interfere with your own style.
That said it's totally ok to add bootstrap to your project and it should be smooth.
There are many grids and framework to choose from. A Google search for CSS frameworks will return a dozen articles that themselves list a number of frameworks to choose from.
When it comes to choosing one, it's easy to be lost without having an intimate knowledge of all of them.
What are the main factors that go into choosing a CSS framework, and how will those choices map to certain frameworks?
More generally, how does one choose a CSS framework?
Note 1: I'm using "grid" and "framework" almost interchangeably here, but there is probably one I should use over the other. Corrections on this are welcome.
Note 2: I am well aware that some choices will depend on taste and accordingly, this question can turn into a "best of" contest/subjective topic. I'm trying to keep it as answerable as possible, as I'm pretty sure many have this problem/question of choosing a framework and an answer to that would benefit the community. As such, improvements to this question are welcome rather than just closing it.
When choosing a framework, consider the following questions :
Language : Some frameworks are written in SASS. Others are written in LESS. Yet others are written in pure CSS. Pick a framework written in a language you're most comfortable working with.
Features : Some frameworks offer just a grid. Others add typography. Yet others add a whole bunch of custom UI elements. Pick a framework that corresponds best with the features you want. You don't want a framework with either too few features or one that's bloated and contains many features you never intend to use.
Modularity : You don't want to overwrite 50% of the framework's output with your own custom code. If you do pick a framework that has many more features than the features you need, make sure it's modular enough to easily get rid of much of the code bloat.
Responsiveness : Pick a responsive grid if you want your page to be responsive.
Cross-browser support : If your project needs to support older browsers, make sure you pick a framework that supports all browsers you need to support.
I built my own framework Cascade Framework because none of the frameworks out there answered those questions the way I wanted them to. Feel free to check it out.
The first thing to start with are the requirements and goals of your web project.
1. Do you target only a mobile audience?
If you want a Web-App, you'll need more than a CSS framework, a mobile framework that combines look and feel for specific target devices' UI with functional elements by means of Javascript. The next decision will be if the framework better supports smaller smartphone screens, tablet screens or both.
If you don't need the more functional Web-App approach the way to go are frameworks that are responsive. You will have to concentrate on how you want to arrange and order certain page elements on different screen resolutions and what page elements can be turned off on the smaller resolutions. (This sometimes leads to political debates with the stakeholders debating around what is (more) important and what not).
2. Do you target both mobile and desktop audience?
You want a framework that supports reponsive or fluid layouts for greatest support of your audiences clients. If the graphic design you have to produce is more static the responsive route suits better as it allows easier planning in the different stages within the breakpoints. Most designers currently follow flexible approaches, lightweight, elegant, presentational, not-so-portal-like that also allow fluid implementations (where certain or all page elements are allowed to stretch or grow according to the client/browser viewports).
3. Do you target only traditional audience?
Then simply choose the framework you're confident it allowes the easiest implementation. Did the designer use a grid? Then maybe the CSS framework fits it. Some CSS frameworks come with a nice variety of design templates for Gimp, Photoshop, Illustrator and others, so maybe the design can be based on the template upfront which allows for the best realization.
Two other considerations:
A. There is no graphic design
If you start without explicit design templates I would choose a framework that allows for easy integration of Typography, offers lots examples, use cases, pre-defined page elements or components (buttons, navigation, thumbs...).
B. Time constraints
No time? Some frameworks come with their own or third party customization scripts or wizards. Choose the elements or components you need, turn on or off certain JS libraries, reset stylesheets, things like that and download the final package. That's it.
Some frameworks are pretty mature and well tested so the absence of a vibrant community may not tell you that much. Depending on your skills a lot of support may not be necessary (and even be a bad sign: The grid/framework should be simple and stay out of your way. The questions that may come up should so be the usual CSS questions that are quite common and can be answered even without details of the underlying framework).
Two examples to illustrate two approaches (more grid <-> more responsive):
http://960.gs/
Definitely take a look. Follow the "view the slides" link to read nice background information. A true grid system. It also links to derivatives that support fluid and elastic looks.
http://twitter.github.com/bootstrap/
Modern, nice hype. Lots of components. Customizable. Responsive.
Web-Apps:
http://jquerymobile.com/ and http://www.sencha.com/products/touch
Most grids are 95% the same: they define the width of columns + include a clearfix.
You can even make your own grid if you like. So therefore, if we understand that most grids are essentially the same, which one is the best to use?
1) Customize Twitter Bootstrap by only downloading the grid. It's a great choice because most people are familiar with the "span1, span2, span3" convention. Also, it's available as fixed width and fluid (ie. responsive).
2) 960.gs is probably the most commonly used fixed width grid.
Unsemantic is the responsive sucessor to 960. Both were developed by Nathan Smith.
One question you can ask right off the bat is:
Do I want the framework to be responsive?
The answer to the question will cross many options off your list.
Another main question I ask is what kind of community support is behind the project. From my experience it is a pain to get invested into a particular project and than have it die and get no support. It is nice to have something that has key backers and a large following.
Considering the UI designers from Twitter made Bootstrap I wouldn't just call it hype surrounding that framework. It's excellent code and the most complete framework. 960.gs is a grid system which boostrap has called scaffolding. Bootstrap is also smartphone friendly. So where someone would have to hack together jquerymobile, jquery, 960.gs, plus all the plugins they need. Bootsrap already comes bundled with plenty to get you started with and works on all browsers and phones/tables.
I am building a new WebSite based on Grails technology.
Concerning the graphical design of my website, I plan to use services from a professional web designer but meanwhile, I need to do some basics graphical design myself in order to have a "user-friendly" beta-version.
I have read through the stackoverflow.com site but couldn't make up my mind. Here is what I have found out:
how-do-you-choose-a-css-framework
what-is-the-best-css-grid-framework
can-someone-recommend-a-bells-and-whistles-css-framework
what-is-the-best-css-framework-and-are-they-worth-the-effort
But unfortunately there are many contradictory answers.
First, some say that using CSS framework is backwards authoring and not a good thing. Others advice YUI Grids, BluePrint, 960 gs, YAML...And many say that Compass allows to develop CSS layouts easily and reusable.
So considering that:
I am new to the CSS world and I do not intend to be a web designer
My layout should be user-friendly (but not necessary awesome L&F)
It should be maintanable and easily improvable (by a professionnal web designer)
Easy to implement (in order to have something quickly)
What do you advice me for getting started with the web design of my site?
Thank you for your advices.
Fabien
First, if you don't intend to be a web designer, I'd suggest outsourcing your CSS. There are several websites where you can supply HTML or a Photoshop design and have it coded up for well under a grand (1k). Or get HTML/CSS designs free.
Then there is one thing you need to know and another two you need to work out:
all HTML should be written in a semantic and valid manner: semantic = properly ordered headings, lists, no excessive divs etc.; valid = will pass WC3 validation tests. None of this is rocket science, but is still a skill that needs to be learned. Andy Clarke's Transcending CSS is a great book on semantic HTML/CSS. For ease of maintenance, the HTML and CSS should be tidy and consistently indented, etc.
you need to determine whether you'll be needing an admin backend and database for managing content, or if you're just building a site consisting of static pages (i.e. html and css files, images and other media etc.). If it's the former, that's a whole other learning curve :-)
what are your best skills? If you're a good designer, get other people to write the HTML/CSS, or use a ready-made template (there are many on the web) and customise it. Here's a good start for multi-column layouts. If you're a programmer, learn to use a framework like Django (Python), Titanium (Perl), something smaller in Ruby (because Ruby on Rails is a bit big to start with) or one in your favourite language.
Good CSS is a craft, and simplicity is the essence, but if you want to learn enough to get started, my advice would be to:
understand inheritance (the 'cascade' in CSS) and the fact that anything can be a 'block', so don't use lots of nested divs just to apply a style. Instead, apply the style to the HTML element itself, or to the element only when it appears in a parent block (like a menu unordered list contained in a sidebar div);
learn about block and inline elements (Web Design from Scratch is a great learning resource and I'd recommend it), and that CSS can change this behaviour;
test in Firefox, then test in Internet Explorer. >= IE7's not so bad (but look out for HasLayout). What you can't tweak to get right in IE, use conditional comments to add CSS that only IE can see - never use CSS hacks - .htc files that add missing IE functionality (e.g. rollover styles on any element) are available;
learn about CSS positioning, and use 'fixed' sparingly;
put all your CSS in one file (for starters), and don't use inline CSS in the HTML;
styling forms and form fields is almost a separate skill :-)
Use background images to add style, but also understand that you can offset and overlap images using positioning. You'll need to use PNGs for nice transparency, though. Oh yes, and opacity looks nice, but requires non-standard CSS for now. although the more flexible rgba (a=alpha) method is widely-supported. As do rounded corners, but both worth using.
I'd avoid CSS frameworks and resets for now - they'll complicate things at this stage by adding yet another DSL to learn (but read the arguments and the pros and cons). To avoid annoying default margins and padding, I always reset everything by doing html *, body * {margin: 0; padding 0;} then build padding and margins back in wherever needed - never been a problem so far :-)
What do you advice me for getting started with the web design of my site?
Get Firebug plugin for Firefox now!
Primary CSS uses:
See which CSS rules apply
Change CSS in real time and see the affect
Inspect other websites to see how they do things
I would not be able to develop CSS (and other web related technologies) without this tool
Take a look at YUI CSS reset/base/font/grid
http://developer.yahoo.com/yui/3/cssreset/
And Grid 960 also has some nice layouts (search for their site in google)
I don't know what OS you are running, but if you are a Mac user, I suggest a great free tool for CSS: Xyle Scope. It's not an editor but a CSS viewer/scanner, it let you browse easily the CSS code of any web page so you can learn better how css works and you can analyze any well done layout on the web.
CSSEdit (Mac Only) is a good solution for writing Cascade sheets, easy to use, not expensive, and reach of features.
Fireworks: I think is a great software to draft your layouts and make some good graphical works!
Dreamweaver: it's an all in one solution for web developing ... it's a really great tool to easily maintain synched your remote version of the website with your local one.
Coda (Mac Only) is a very good alternative to Dreamweaver, even if it don't let you manage and edit the .htaccess files!
For coding your web site I suggest dreamweaver or Coda, but an other good alternative is BBEdit (Mac Only).
Bootstrap, Its the best css framework i can suggest, there is another one called foundation also but i prefer bootstrap more since it is popular among developers and is extendible. There are few more other frameworks, I wrote a blog about that, Here Read it too if you want http://www.andwecode.com/freebies/5-responsive-css-frameworks :)
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
Reading on another forum I've came across the world of CSS Frameworks. The one I've been specifically looking at is BluePrint. I was wondering if anyone else had come across CSS frameworks, suggest which is the best and if they are worth the effort?
CSS 'frameworks' are completely missing the point.
CSS is not like JavaScript, where you can include a base library/framework and then call functions and objects from it to do higher-level work. All a CSS framework can give you is declarative rules: some default browser-rule-reset stuff, some class styles to be forced to author your page to, and layout rules using 'float' and 'clear'. You can write that in a few lines of CSS yourself rather than pulling in the bloat of a hundred framework rules.
The 'grid layout' stuff in particular goes back to the bad old days of mixing your presentation into your markup. 'div class="span-24"' is no better than a table, you'll have to go back in there and change the markup to affect the layout. And all the frameworks I've seen are based around fixed-pixel floated boxes, making it impossible to create a liquid layout accessible on a wide range of window sizes.
It's backwards authoring, of use only for someone too scared to write a CSS rule.
So, nobody's responded to this question yet (although I've seen a few upvotes), so I am going to at least attempt to tackle the second question in this prompt.
CSS Frameworks are great; like any other framework, they reduce development time and let you get working immediately on site-specific design and CSS. They think about hard decisions so you don't have to.
Unfortunately, there are two downsides to using a framework (in general):
The framework dictates the overall structure and mechanics of your CSS code. Now, I'm not talking about a CSS reset (these are useful in their own right, but they are not true frameworks); I'm talking about an honest to good framework, that has already made the decisions about what semantic tags you are going to be using in your document, etc. As such, you are made dependent on the framework, and when there is a bug in the framework, you will most commonly have to fix it yourself.
Frameworks are not an excuse for being oblivious to cross-browser/advanced CSS issues. You will invariably run into them, just as you would working with a PHP or JavaScript framework. And you need to know how to deal with them. There is a common saying that you should write your own framework first, before using someone else's.
Taking a quick peek at Blueprint, I would not really call it a framework; maybe a reset with a few extra goodies on top.
I've looked at BluePrint and a few others and the only CSS 'framework' I'd recommend is YUI Grids
Pros:
Written by one of the best frontend engineers out there (IMO) (Nate Koechley)
Very small. 4KB
Very flexible (1000 different layouts)
Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
Supports easy customization of the width for fixed-width layouts.
Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
Layouts less than 100% are automatically centered.
Somewhat semantic classnames (better than top, left, right, etc)
Cons:
Lots of extra markup compared to hand-written HTML and CSS
Takes some learning to figure out how to do complex layouts
As other have posted, there are no real 'frameworks' for CSS. Reset stylesheets help a lot with layout too. I usually stick with a reset stylesheet and go from there. But if you don't have a lot of CSS experience YUI Grids could save you some time.
Compass is an actual CSS framework in the sense that it gives you not only templates (both YUI and blueprint), but also reusable constructs and higher-level declarations while still giving you familiar CSS syntax.
Take the time to study and understand (really understand!) a few css frameworks such as BluePrint and YUI, and css resets like Eric Meyer's. Then, take the time to put together your own reset and/or framework based on your work methods and the kind of sites you build.
Personally, I use most of the Eric Meyer reset with some classes and resets of my own, plus a few ideas from BluePrint and YUI.
I recently watched Eric Meyer give a presentation on CSS Frameworks in which he asked the question: "so which one is the right one for me?" He then answered the question by showing a blank slide. His point was, that there are certainly some useful concepts built into most resets and frameworks, but the one that will suit you the best is the one that you write for yourself (it's worth the effort).
Why use css 'frameworks'?
If you are pressured for time.
If you do not know css, and don't
know someone who can write it for
you.
If you are not overly precious about
standards etc.
I know programmers who have been really happy to use blueprint or 960, as it allows them to put together a layout on their own, without turning to a front-end developer. This is ideal for personal projects, or startups with limited resources.
If you have decent knowledge of CSS already, then presumably you have a decent library of stock layouts already, so you clearly won't need a framework.
However, if you're a beginner and just need to get something up and running, then you might turn to a framework, as it makes basic layout much simpler, and tackling browser compatibility also.
Having said all that, many frameworks out of the box do make use of some horrible class names etc. I know of some websites that have taken a framework as a starting point and then customised it with their own class and id tags. But clearly there's a bit of work involved in that rewrite too. Using something like Compass, as mentioned above, does help to get around that.
So, CSS frameworks - they can save you time, at the cost of semantics. They might also hurt your knowledge of CSS, but that is more up to how much you invest in learning the subject in general. Whether you make use of them is up to you.
You'd have to ask yourself how effective the available frameworks are at solving your problems. Do they meet your requirements?
By using a framework, you can set some rules or details at the pixel level and devote the rest of your time to implementing and producing. It's a massive productivity boost. If you find yourself spending time adjusting things by a few pixels late in the project (micro managing the design), it's a sign that a framework can be useful.
Tip #17 in The Pragmatic Programmer says: "Program close to the problem domain". Using a layer of abstraction can get you closer to solving the real problems of layout. For example: you might be able to concentrate of enhancing the user experience with the extra time you have rather than minor adjustments of pixels.
This is not to say you must sacrifice quality for quantity. It's about efficiency.
On a recent project, I made my own framework because we had very limited resources and the popular frameworks didn't do what I wanted. Then, I set up the design team's PSDs to snap to the same grid I deployed.
A framework doesn't have to be any particular implementation of CSS. It doesn't have to be something bloated you downloaded from the interweb or something implementing outdated ideas. It's just a technique for getting a job done. I wouldn't be surprised if some coders already have their own frameworks and don't even know it. In fact, if you consider the DOM as a set of default elements you extend with CSS, then that's a framework by definition.
I actually spent a good portion of the last 24 hours investigating this on my own, heh. My conclusion was that a nice reset (I used YUI Reset), and maybe something else to set baseline stuff (YUI fonts was worthwhile in my case; maybe the "extra goodies" of BluePrint would be in yours) is a good idea. But, a "framework"---which is generally something like YUI grids---is too restrictive, forcing you to use their class names, ids, etc. and rarely fitting into your site like hand-made CSS would.
So in short: resets seem pretty nice; it's good to eliminate all the variation in e.g. margin-vs-padding for lists, or paragraph spacing, or whatever. But that's as far as I would take it.
i haven't used it yes, but i think emastic may be a good alternative worth a check. it it is similar to blueprint in scope, but also supports elastic layouts (hence the name) and you can specify values in px, em or %, and even mix them.
Compass I think is amazing. Make sure you see the screencast.
I am using 960.gs for a few websites and find it very simple and easy and worth the effort. Saves me a lot of work on layout. Make sure to check the custom CSS generator which goes away with the fixed width of 960 pixels.
I think that this video presentation by Site Point CEO Kevin Yank will answer your question. I really recommend to watch it.
Compass lets you rename your framework's classes and ids with your own semantic names, so you might want to check it out. It also provides access to stuff you just don't get with plain-vanilla CSS such as mixins.
I'm astounded by so-called "CSS experts" who criticize these tools without really having digged in and used them. Are they essential? No. If you like your own framework (you do have one of your own, right? A CSS framework is just a carefully defined library--everyone should be using one) then by all means, keep on using it. No one is forcing you to use other frameworks and I don't see people who are using frameworks telling CSS purists that they are "doing it wrong."
Criticizing frameworks from such a standpoint just reveals an insecurity as well as an ignorance. For example, the notion is laughable that a person would use a tool like Compass without knowing CSS. You realize, right, that a framework generally doesn't write all your CSS for you? You can still break out and write your own CSS within the context of most frameworks. In fact, if you don't know CSS you might get frustrated quickly.
For myself, I appreciate having a framework because it is already documented, tested by hundreds of other users, and I can apply my own classes and ids via Compass. If I need something that the framework isn't suitable for, then I'll code my own.
Matt Raible of AppFuse fame had a CSS Framework contest a while back to develop CSS Frameworks for AppFuse. The results are published here. There are a few variations and I have used some myself because I use AppFuse and find them very good.
I should add that these CSS Frameworks work well because they are used in themed applications. That is, if you stick to the rules then switching from one to the next is as simple as changing one value in a properties file.
I have used BluePrint with much success on a site (I could mention the site here but I am sure the post would be marked as spam!). I am not sure if I will use it in the future though because one of the ideas of CSS i thought was to not have layout logic hard coded. You shouldn't have css elements called span-24 and span-12 to define the layout but something like searchBox and mainContent. At least thats how I see it.
Good link I found : Top 12 CSS Frameworks and How to Understand Them
Here is my blog post about CSS Frameworks When to use CSS framework?
The only way I know of to use a CSS framework and retain semantic markup is to use a higher-level abstraction. At the moment, Compass is the only one I'm aware of that's mature enough to use, but Nicole Sullivan seems to be doing some interesting stuff with her "Object-Oriented CSS" project.
I find Compass' clever use of Sass mixins to be brilliant, and a big step toward the Holy Grail of maintainable semantic markup. I don't think I'd want to use a framework like Blueprint or YUI without an abstraction such as Compass to keep presentation classes out of the markup.
BTW, there's a nice-looking CSS framework called Elastic that looks good enough that I'm considering adding it to Compass.
I believe CSS is about simplicity. The goal is to have one or two places to check when you're referencing between the HTML and your stylesheet. Adding more lines, and especially lines that you did not write and are probably not that familiar with, will exponentially increase the complexity thereby volatility of the CSS code.
I would suggest your layouts as you write them and develop a generic template system from that. While I love making CSS more modular, often and depending on the design, your CSS may be very case-specific and not modular at all.
I've used Blueprint on a few one-off sites and it definitely saved time, primarily in cross-browser testing.
It definitely sucks adding presentation code to your markup, although on the bright side it's readable. While I love the concept of "you can redesign without touching the markup", if you're producing a site where that really isn't going to happen anyways and you just need it done yesterday, Blueprint is something to look at.
There are also tradeoffs in what types of layouts it can feasibly create though. If you wireframe the site from the start on a strict grid, it will be much easier to transpose into the framework with a minimum of fuss.
I have used BluePrint and YUI but I always get frustrated with some of the names they give their id and classes.
To each their own, but I prefer doing things from scratch, but after a while you develop a process in which you will use your previous work and apply it to new projects and just make some tweaks to make the web site look the way you would like it to.
Be sure to use a good naming convention, just in case someone else down the road comes in to edit the css, then they will have a good idea what each style name is referring to.
Craig,
Compass is what you're looking for: it allows you to rename your Blueprint CSS classes like "span-24" with your own names. It also expands CSS functionality with variables and mixins. Truly, those that prematurely judge frameworks without having checked out Compass are "missing the point." It's sort of like those folks who told us years ago that we are missing the point by using CSS instead of HTML tables for our layouts.
-Matt
check out http://www.ez-css.org/. one of easiest and lightest css framework to work on. :)
Take a look to this demo:
http://www.richstyle.org/demo-web.php
This framework is based on idea that "HTML tags should be enough".
I think re-usability is the most important factor for choosing a software component, including a web framework.
For web frameworks developers, the more you commit to standards, the more you guarantee re-usability.