How do you design your CSS?


Tags: css,design

Problem :

Hi all CSS experts, I come from the server side and must say I'm really impressed with all the new css galleries and designs. I picked up a CSS book but I still wonder how you do your design: do you use a whiteboard/white paper and then translate into css and tweak it? do you have wysiwyg editors that let you draw a webpage and then convert it to css?... Thanks a lot for your input



Solution :

I usually start designing my page to be used without CSS. I outline the titles using Hx tags, the paragraphs, links, lists and images.

Then I hand-draw a mockup splitting my page in big blocks and using divs, positioning and floats I create the structure of the layout.

Then I concentrate on each of these big blocks, decomposing them in smaller blocks until I have positioned everything where it should be.

Then I refine the basic elements (lists, links, text) trying to find out common styles to reduce as much as I can the number of selectors.

Finally I open all the available web browsers to test the differences and apply hacks/conditional stylesheets.

I NEVER had good experencies using visual editors, but I have to admit that I quit using them many years ago.


    CSS Howto..

    myFlowPanel has many childFlowPanels, so how to create the same margin for all childFlowPanels without using marginTop on childFlowPanels (GWT)?

    How can I apply my CSS stylesheet to an RSS feed

    How to make transparent corners of borders for a perspective effect?

    How to use several css classes to one element?

    How to make an image appear over another image when mouse hovers with css3?

    How can I apply styles to a label whose checkbox is checked using only CSS?

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    How to find equivalent property in Mozilla of given Webkit CSS property

    How to find out an element with id partially matched, and change its css style?

    How to generate image background that flips with each duplication in css? [duplicate]

    CSS: How to accomplish a div which is blurred at the edges?

    How to read all numeric values from within a file in php?

    HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?

    How to override parent containers width property in CSS [duplicate]

    How can I make a wrapper's css not apply to it's contained elements [closed]

    How to display line items in twos?

    How to add a class to an element with CSS

    How to create cascading menus in rails?

    Getting an class to show when item is clicked

    Yahoo news CSS, how to achieve behavior

    How do I fit text into footer margins

    CSS: How to display image icon before each h3 in CSS?

    How to apply icons to links using css?

    Show icon on containing div hover

    How do you get multiple views in one window like JSFiddle does [closed]

    JavaScript how to get this html to read this css and organise my script into the table

    how to make the file input field wrap?

    How to run multiple css selector classes at once?

    How do I align an item to the right inside a flex container?

    How to add a class to select_tag in Ruby on Rails