5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 7 Years of Membership
+20 more
dtbaker
Moderator
says

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.

http://dtbaker.com.au/css_splitter/

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!

407 posts
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
+8 more
EugeneO
says

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

501 posts
  • Affiliate Level 7
  • Author Level 10
  • Collector Level 2
  • Top Monthly Author
+10 more
pixelentity
says

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 :D Cheers dtbaker

332 posts
  • Affiliate Level 1
  • Author Level 4
  • Beta Tester
  • Collector Level 1
+3 more
dekciw
says

Awesome! Perfect tool for skinning ;) Thanks, man!

1142 posts It's in the pipeline!
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • Author Level 11
+9 more
purethemes
says

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

815 posts
  • Affiliate Level 1
  • Author Level 5
  • Collector Level 1
  • Freebie
+3 more
rvision_
says

Awesome, just what I needed, thank you dtbaker.

Any chance of improving output formatting?

EDIT : it depends on a file, sorry

815 posts
  • Affiliate Level 1
  • Author Level 5
  • Collector Level 1
  • Freebie
+3 more
rvision_
says

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

2280 posts
  • Top Monthly Author
  • Weekly Top Seller
  • Community Superstar
  • Industrious API Inventor
+16 more
revaxarts
says

Great work man! This is bookmarked!

5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 7 Years of Membership
+20 more
dtbaker
Moderator
says


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.

2280 posts
  • Top Monthly Author
  • Weekly Top Seller
  • Community Superstar
  • Industrious API Inventor
+16 more
revaxarts
says

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

by
by
by
by
by
by