How to Use SnipCSS

SnipCSS is a Chrome extension that makes it easy to copy designs.

First step to using the extension is to install the extension from the Chrome Store:

https://chrome.google.com/webstore/detail/snipcss/hbdnoadcmapfbngbodpppofgagiclicf

What's great is that it's free!  You can use SnipCSS on as many websites as you want without paying anything.  

Once you install the extension it's a good idea to pin it so you can easily click it while on a website.  You can do that by clicking the puzzle icon, then pin icon in Chrome.

Next step is to browse the web until you have a design or component you want a snippet.  Once you find a website you want a snippet from click the SnipCSS Kiwi

Then as you hover over items will highlight in blue

Left-click the item you want.  It will select in Red. 

Then the SnipCSS Kiwi walks out on the page and collects all the styles.  After pecking the page you will have the HTML/CSS/Images loaded in the options page (it opens the tab automatically).

Here is the final result:

And that's all it takes to get a SnipCSS snippet.  You can then adjust the HTML/CSS as needed to put in your own images and text before using it on your own website.