CSS Shapes Editor Extension

Article by: Ryan Stewart

CSS Shapes Editor Extension

The CSS Shapes Editor extension for Brackets allows you to edit CSS Shapes values in Live Preview mode. A visual editor is stacked on top of the focused element so you can drag points and handles to change the element’s shape. This makes it very easy to see the shape changes in context. The extension is compatible with Brackets release 38 and above.

Click to view the Polygon Shapes example

What are CSS Shapes?

CSS Shapes represent a new feature, which allows web designers to wrap content inside and around custom paths. This feature opens up a lot of creative layout options because it lets designers break free from creating within the constraints of the block — the current rectangular shape of almost everything on the web.

Work on CSS Shapes is still in progress, but you can enable the feature today in Google Chrome.

Why edit CSS Shapes in the browser?

CSS Shapes are meant to be used in the browser. It makes little sense to use a classic design authoring tool to create them, then export them to CSS, then import them in a code editor, refresh the page in the browser, inspect, sigh, rinse and repeat. Any tweaks become too painful to do.

Authoring CSS Shapes in an external editor makes the workflow too difficult. It’s not easy to see how the shape interacts with the content on the web page, so there’s a lot of back-and-forth.

Installing the CSS Shapes Editor extension for Brackets

In Brackets, open File > Extension Manager and search for “CSS Shapes Editor” to find the extension, then click Install.

Or, if you want to run the bleeding-edge version, you may install from source. To do so, open File > Extension Manager and click “Install from URL”, then use the extension’s GitHub repository URL: https://github.com/adobe-webplatform/brackets-css-shapes-editor/

The bleeding-edge version may be more advanced, but also more error-prone than the stable version you will find searching through the Brackets extension registry as described in the first step.

Turning on support for CSS Shapes in Brackets

CSS Shapes are still under development in Google Chrome. You need to manually enable the feature before you can use the visual editor for shapes.

First, ensure that you have Google Chrome version 34 or above. Check this in Chrome’s settings menu under “About Google Chrome”. You also need to make sure that support for CSS Shapes is turned on in the Chrome instance that Brackets uses for the LivePreview mode.

Here’s what you need to do: open any HTML file in Brackets and launch LivePreview, then follow the instructions to enable CSS Shapes in that browser window. You only need to do this once.

This step is important!

Brackets uses a Chrome instance separate from the main one on your computer. This means that settings will not be inherited from your main Chrome browser, if that is your day-to-day browser. Even if you have already enabled CSS Shapes in your main browser, you still need to do it again in Brackets’s Chrome instance for LivePreview.

Using the CSS Shapes Editor

The CSS Shapes Editor in Brackets turns on automatically when you need it. While editing a CSS shape property, such as `shape-inside` or `shape-outside`, simply focus the cursor on the property value, like `polygon(…)` or `circle(…)`, then turn on the Live Preview mode. A visual editor with draggable points and handles appears on top of the element that is being edited. If no editor appears, make sure that CSS Shapes are enabled in Google Chrome.

Click to view the Circular Shapes example

The in-browser editor is specialized for the shape type. Polygons get an editor where you can drag the points for the polygon vertices to change the shape. Click on the polygon outline to add new points, or double click an existing point to remove it. While editing a polygon, press the T key on your keyboard to toggle controls that scale, move and rotate the polygon shape. Circles, ellipses and rectangles get an overlay of the shape, which can be scaled and moved around.

Any changes to the shape are instantly visible in the context of the page. All actions in the shape editor reflect back to the code editor. When you are done, just turn off the Live Preview mode.

CSS Shapes can be defined with all sorts of CSS units, such as pixels, ems, rems and even percentages for responsive shapes. The CSS Shapes Editor takes care to preserve the unit type for the shape while editing.

What will you build?

Authoring CSS Shapes in the context of the browser is just one way we are making it easier to explore new web platform features. While CSS Shapes are still in development, this editor in Brackets helps you learn about the feature today, experiment, and get ready to use shapes when they will be switched on by default.

If you need a head start, Sara Soueidan has written a great introduction to working with CSS Shapes where she describes in detail how to use the new properties.

We’re eager to see what ideas you bring to life with CSS Shapes now that there is a practical way to create, edit and tweak the shape of content on the web.

Cheers to a less rectangular web!

Leave a Reply

Your email address will not be published. Required fields are marked *