What CSS Tools (Framework,Grids System, Ide,..) Do I Need for Starting Web Design

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

Free tools to speed up web development

I second Brandon's suggestion to use a CSS framework. It won't give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.

Suggestions Updated July 2013:

• Twitter Bootstrap http://twitter.github.io/bootstrap/ - complete grid, typo, UI widget prototyping framework
• ZURB Foundation http://foundation.zurb.com/ - responsive grid, type, UI widget prototyping framework (similar in scope to Twitter Bootstrap, but feels 'cleaner' in some ways)
• 960 http://960.gs/ - grid layout system
• Tripoli http://devkick.com/lab/tripoli/ - really good typography, but no grid system
• YUI Grids http://developer.yahoo.com/yui/grids/ - very customizable (to the point of overkill) grid system
• Blueprint http://www.blueprintcss.org/ - grid system and basic typography
• BlueTrip http://www.bluetrip.org - a hybrid system, mixing the best of the Blueprint grid with the best of the Tripoli typography

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

CSS framework used by Vue.js website

From what I can see in their style.css they are NOT using any framework. It's 100% their code.

The only 3rd party libraries they use are:

• Font Awesome
• Google Fonts
• styles for Algolia's search

What is the best CSS Framework and are they 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.

Best Liquid Layout CSS Framework?

see this http://www.designinfluences.com/fluid960gs/

Can someone recommend a bells and whistles CSS framework?

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.

Is YUI grids.css really that flexible?

You can change the gutter by overriding the margin attribute. You can do this across the board by overriding a selector like .yui-gb { }, etc or whichever layouts you are using. If you just want to do one specific set of columns you can add another class and use that, just make sure you have more specificity than the YUI rules (or make the same and your rule is lower in the CSS files).

I don't think the templates are nestable as they were designed to be a quickie throw up thing to do a whole page.

The way grids was created was specifically to cater for the sizes of page we get which are regimented by our own UED guidelines and our Ad formats. There is nothing to stop you using the framework as a basic and overriding the exact widths/gutters, etc.

Disclaimer: I work for Y!

Without pro-knowledge of HTML/CSS, what can I use to create a web 2.0-like website for free?

Squarespace is the one I most hear mentioned by web professionals. If you go to their site you can see that they're big on the web 2.0 aesthetic. It's probably the service I'd recommend as well.

Otherwise Weebly is also popular and I'm sure a Google search could bring up plenty more.

---

Related Topics