Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oslego/chrome-css-shapes-editor

CSS Shapes Editor extension for Google Chrome DevTools
https://github.com/oslego/chrome-css-shapes-editor

Last synced: 2 months ago
JSON representation

CSS Shapes Editor extension for Google Chrome DevTools

Host: GitHub
URL: https://github.com/oslego/chrome-css-shapes-editor
Owner: oslego
License: other
Created: 2014-06-27T11:09:55.000Z (over 10 years ago)
Default Branch: master
Last Pushed: 2020-10-04T12:20:31.000Z (about 4 years ago)
Last Synced: 2024-10-14T12:48:54.496Z (3 months ago)
Language: JavaScript
Size: 2.27 MB
Stars: 177
Watchers: 16
Forks: 28
Open Issues: 9
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        ## CSS Shapes Editor for Chrome DevTools

Chrome DevTools extension for live on-screen editing of CSS Shapes property values.

Uses the [CSS Shape Editor library](https://github.com/adobe-webplatform/css-shapes-editor).

![Screenshot](./screenshot.jpg)

### Demo

https://www.youtube.com/watch?v=zdWsBZiGiZc

### How to install

__Simple__

*Google Chrome*

 1. Open Google Chrome (min version 37, check `chrome://version/`)

 2. [Install extension from Chrome Web Store](https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp)

*Opera browser*

 1. Open Opera (min version 24, check `opera://about`)

 2. [Install extension from Opera add-ons](https://addons.opera.com/en/extensions/details/css-shapes-editor/) registry.

__From source__

 1. Clone this repository.

 2. Open Google Chrome (min version 37, check `chrome://version/` or [download Canary](https://www.google.co.uk/intl/en/chrome/browser/canary.html))

   - Navigate to `chrome://extensions`

   - Toggle on "Developer mode" checkbox

   - Click "Load unpacked extension"

   - Select the cloned repository folder

### How to use

- Launch DevTools (_View > Develop > Developer Tools_)

- Switch to _Elements_ panel

- Look for the new _Shapes_ sidebar next to _Styles_, _Event Listeners_, etc.

- In the _Shapes_ sidebar:

  - click "create" and select a shape type to add

    - an interactive editor appears on top of the selected element

  - click "edit" to turn on editor and adjust an existing shape

  - click "edit" again to remove the editor

  - **tip**: hold the _Shift_ key and click "edit" to convert the shape coordinate units

### Sample content

Use with the [CSS Shapes Espresso demo](https://oslego.github.io/css-shapes-espresso) ([source](https://github.com/oslego/css-shapes-espresso)), or learn [how to create](http://alistapart.com/article/css-shapes-101) your own sample.

### Known limitations

- Manually editing code in the _Shapes_ sidebar, like in _Styles_, is not yet available.

- There is no interactive editor for `inset()` shape function. Only `polygon()`, `circle()` and `ellipse()` are supported.

### Credits

- [CSS Shapes Editor library](https://github.com/adobe-webplatform/css-shapes-editor)

- [Underscore](https://github.com/jashkenas/underscore)

- helpers & insight from [TodoMVC](https://github.com/tastejs/todomvc)

- Icons:

  - [Cursor](http://thenounproject.com/term/cursor/39925/) by Danny Sturgess from The Noun Project

  - [Plus](http://thenounproject.com/term/plus/2876/) by P.J. Onori from The Noun Project