Website/Page/Style Ripping

From: CHYRON (DSMITHHFX)26 Oct 2012 10:18
To: ANT_THOMAS 2 of 11

developer tools plugin/firebug

From: 99% of gargoyles look like (MR_BASTARD)26 Oct 2012 10:39
To: ANT_THOMAS 3 of 11

From: 99% of gargoyles look like (MR_BASTARD)26 Oct 2012 10:40
To: ANT_THOMAS 4 of 11
Sorry, I thought you meant the moon on a /pr/ick! :(

From: ANT_THOMAS26 Oct 2012 10:49
To: 99% of gargoyles look like (MR_BASTARD) 5 of 11
(giggle)
From: af (CAER)26 Oct 2012 11:13
To: ANT_THOMAS 6 of 11
The problem there is that a lot of websites will use minified stylesheets, or a stylesheet generated during deployment that is a combination of several smaller ones (particularly if they use SASS or LESS). That makes the resultant CSS file not particularly friendly to human readers, and somewhat difficult to pick apart.

Furthermore, a lot of designs are going to be dependent on a specific HTML structure, so even ripping the entire CSS file won't work when you apply it to your site.

You'd be better off using Chrome's Web Inspector, or Firebug, or Opera Dragonfly, and looking at how the site has achieved a particular effect/result. The Chrome WI Computed Style thing is pretty handy for this, and the Styles bit below that will list all the rules that apply to the selected element (with overridden ones crossed out).
EDITED: 26 Oct 2012 11:15 by CAER
From: ANT_THOMAS26 Oct 2012 11:29
To: af (CAER) 7 of 11
I'll give that idea a go.

I'm not so much wanting to apply their styles to my site, more a case of doing it the other way round and taking their design and layout and making changes to that. 

I basically want to be able to take a page and make a template of some sort out of it.
From: ANT_THOMAS26 Oct 2012 12:29
To: ALL8 of 11
Managed to strip it back and get pretty much what I want out of the page.

Next question, the CSS file has all the styles on a single line with no line breaks (fail)

Is there any software or site that will auto-format a CSS file?
From: ANT_THOMAS26 Oct 2012 12:30
To: ANT_THOMAS 9 of 11
Google it first.... http://www.cleancss.com/
From: CHYRON (DSMITHHFX)26 Oct 2012 12:39
To: ANT_THOMAS 10 of 11
search & replace with regular expressions
From: af (CAER)26 Oct 2012 13:11
To: ANT_THOMAS 11 of 11
Chrome's Sources tab in the Web Inspector has a { } button at the bottom that formats source files nicely - works for JS, CSS and HTML.