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

Question

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

Unseasonable

Answer 1

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

Anzac

Great post. I will straightaway have a look at the links. Thx – Unseasonable

BTW, the web application framework is already chosen : it is Grails – Unseasonable

To answer your question 2, I am building a highly interactive community website with back-end administration as well – Unseasonable

@Dave What do you think of Compass CSS? Do you recommend it? – Unseasonable

@Unseasonable - love the look of Sass (downloaded awhile ago in a gem-frenzy but not tried yet), and Compass will make the CSS work swifter and easier to manage. One CSS bugbear is a lack of variables (say to change a colour globally) - Sass fixes that. The Compass screencast on the GitHub page is good (wiki.github.com/chriseppstein/compass), and for a TextMate-like Win text editor see: (e-texteditor.com). I'd also recommend the CSS/HTML stuff (be selective, though) on Net Tuts+ (net.tutsplus.com/category/tutorials/html-css-techniques) – Anzac

@Rakesh - thanks... was worth taking the time to type up, then :-) – Anzac

@Unseasonable - I note there's lots of redundancy (WET not DRY?) in the Blueprint reset CSS, you could optimise by combining common rules. – Anzac

After taking a look at Blueprint (shares a developer with Sass) it handles multiple CSS files throughout a site and more - handy. But you might consider learning (the slightly more low-level skill of) CSS, as raw CSS (with SASS if yu like) would be a more transferrable skill, but that would be your choice. – Anzac

@Unseasonable - late entry: '960 Grid System' (960.gs) is simpler than Blueprint and might be handy, but Sass is enough for me. – Anzac

Answer 2

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

Doridoria

Thx. I have already installed it and I definitely agree with you. But is that the only tool you are using for building your web graphical design?? – Unseasonable

Like you I'm not, and don't want to be, a web front-end designer. Therefore I just modify other people's CSS most of the time. For this I use Firebug and an IDE that has auto-completion for CSS (Eclipse or Netbeans). If the whole site's CSS is my responsibility I use a free CSS template and again modify it as necessary (ofcourse this only works for simple sites). – Doridoria

Answer 3

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)

Ir

CssRese seems to be non-intrusive (for HTML) and required for cross-browser CSS implementation. So definitely I will use it. But thereafter not sure about YUI Grids, BluePrint, 960 gs, no CSS framework, Compass... – Unseasonable

Answer 4

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

Hypocycloid

Thank you very much for your answer. Unfortunately, I am developing on Windows so I won't be able to use many of these tools. I will try to find the Windows-equivalence. – Unseasonable

You can manage .htaccess (and other invisible) files in Coda: View > Show/Hide Invisible Files – Anzac

Answer 5

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

Gauguin