Split CSS into a Design and Layout file?

How many authors split their CSS file into layout (width, height, margin, padding, float, etc..) and design (color, background-image, etc..) files? To make it easier to update the layout if you have multiple color options in a theme?

I just created a basic “splitter” tool that will take a single CSS file and spit out two CSS files. One with all your layout in it, one with all your design colors/images in it.

Hopefully someone finds it useful, I certainly find it easier in the long run to have a layout.css file then separate green.css, blue.css, red.css etc… stylesheets.

Enjoy!

This could be very useful. I’ll be giving it a whirl.

Hey, Yeah we do this for our work, so will defo give this a try, could save us a few hours of mind numbing work Cheers dtbaker

Awesome! Perfect tool for skinning Thanks, man!

Awesome! I always do it manually. These could save me a lot of time!

Awesome, just what I needed, thank you dtbaker.

Any chance of improving output formatting?

EDIT : it depends on a file, sorry

dtbaker said
Please let me know if a particular “design” element is missed (eg: border color).

-moz-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); -webkit-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085);

Great work man! This is bookmarked!

rvision_ said

dtbaker said
Please let me know if a particular “design” element is missed (eg: border color).

-moz-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); -webkit-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085);

thanks. forgot about rgba colors and shadows I’ll try to add these in.

I would love to see a textarea where I can simple paste my style from the editor cause the file is always deep down in my file jungle