designr inspectsCSS styles and savessnapshots ofweb components anddesigns
designr is anopen-sourcebrowser extension designed to inspect and save CSS styling on web pages. designr provides information aboutelement styles and save the styles into a palette for later use. designr is a simple and intuitive way for designers and web developers tosave CSS references.
To get started with development,fork or clone the repository. Once the repository is installed, go to the extensions page in your brower. For example, the extension manager page for Chrome ischrome://extensions which will let you edit and upload the extension package. On the extension manager page, toggleDeveloper Mode on, clickLoad unpacked, and select thefolder of the downloaded extension.
The code for designr adheres to the following structure:
| |
|---|
assets/ | includes all assets for the extension |
css/designr.css | CSS file for the designr element inspector view |
css/styles.css | CSS file for the designr popup view |
js/libs | contains all JS code for libraries |
js/background.js | background JS code for designr |
js/designr.js | JS code for the designr element inspector view |
js/script.js | JS code for the designr popup view |
index.html | HTML code for the designr popup view |
If you would like to contibute new features, bug fixes, or have any recommendations on how the extension can be improved, feel free to contribute byforking this repository, contributing a change that either resolve an issue or adds a new feature, and submitting a PR for review.
