How to Choose a CSS Framework

How do you choose a CSS framework?

First, don't just automatically assume a CSS framework is necessary, or even desirable. Depending on what you're doing and how good you are at markup + CSS, it may not be worth it. The Wikipedia article barely scratches the surface of the debate I've seen online, e.g., this criticism of the YUI Grids framework.

If you've decided that a CSS framework is for you, then you need to decide what problems it will be solving for you. Once you have that list, you can start comparing different ones to see how well they address your problems.

Finally, there are any number of minor factors that may shift the balance for your particular application. Already using YUI on the site? Then the Reset, Base, Fonts, and Grids combo may get a bump, etc.

The two I've seen reference most often are YUI's and BluePrintCSS (here's a comparison).

UPDATE: One thing I haven't seen explicitly addressed by a CSS framework is Setting Type on the Web to a Baseline Grid (see this article on composing to a vertical rhythm for more details).

Which css grid system should I learn?

I've used YUI Grids on several sites and found it, in combination with the Fonts and Reset components, to provide very high quality cross browser compatible sites. It's design satisfies different goals to 960.gs and a quick look at your site's storyboards will indicate which is more appropriate.

YUI Grids can be nested achieve subdivison of elements and generally I find it easy to work with.

I'd say that use of a reset css is crucial, and work with whatever grid system you find most comfortable.

Which css framework to choose for angular 2 at this moment?

It's a personal preference what you are asking.
From my experience, I would go with Bootstrap as it is the most mature of those CSS frameworks you wrote.

Also, Bootstrap already has a lot of great plugins, great documentation, great community and will continue to grow.

I was working with material, and it has a lot of problems since it is still in beta version, and my personal opinion about it that it is not built for the web, but only for mobile. :)

What CSS tools (framework,grids system, IDE,..) do I need for starting web design?

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:

1. 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.

2. 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 :-)

3. 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:

1. 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);

2. 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;

3. 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;

4. learn about CSS positioning, and use 'fixed' sparingly;

5. put all your CSS in one file (for starters), and don't use inline CSS in the HTML;

6. 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 :-)

Porting from one css framework to another

Just replace the CSS/JS files and then do a find/replace in all of your HTML files to swap in the correct classes. For instance, if you were going from Bootstrap to Foundation you would have to change all instances of col-sm-12 to small-12 columns.

Choosing the right front-end framework

Bootstrap and Zurb Foundation are both CSS frameworks, but they have a different purposes.

The primary goal of Bootstrap is fast prototyping of websites or web applications that have a base style. Since the styles are opinionated, that makes it more work to get it to match a custom design. It is heavily supported and a large community. It is built on Less and that can be a plus for some people.

Zurb Foundation 4 takes a different approach. It is more of a base framework for a project that will be customized fully based on project need. The styles are easily overridable. It is a great prototyping tool and it is not opinionated with styles. The grid system is great, and anyone can understand it. If you use Foundation your designer will think differently (they will keep mobile in mind more). It is built on SASS. That makes it easy to incorporate Compass sprite generation. I found the CSS classes in foundation to be easier for beginners to pick up and remember.

You can watch some of the Zurb presentation videos on the internet and they really help you understand why they built it.

I was working on my own framework to realize that everything I needed and more was already built into Foundation. The hardest part is understanding Compass and Sass. After that you will get the hang of Foundation easily.

How do I install and use Groundwork CSS

Groundwork, like Bootstrap, is a web-development framework, not just a set of CSS docs. They both include a set of style-sheets, java-script files, misc icons etc, and one or more HTML docs to bring it all together.Installation is simple; download the framework, rename the folder to "MyCoolNewSite", start editing.

As Michal stated, the "index/html" doc that comes with the framework has lots to look at to help you get started. They also have what looks to be pretty solid documentation on their site, starting here: http://groundwork.sidereel.com/?url=grid

The site has now changed to: http://groundworkcss.github.io/

---

Related Topics