The new style panel is packed full of great features: many more than we can cover here. Lets take a look at the highlights.
You can now easily see every property that is set for the selected element without having to open panels or endlessly scroll. We removed the clutter but kept the most used properties front and center.
Each section expands to show you the full list of available styles.
We added a search feature so you can easily find any style property. This is great for new users who are learning to navigate the style panel, and for experienced users who want to work even faster.
We have a brand new window for working with backgrounds. Set a color, image, or use the new gradient editor.
We believe that your tools should not hold you back, so we also let you control all the different properties of your backgrounds like background-position, background-size, and background-repeat.
For every property you can see exactly what CSS will be set:
or you can see the complete CSS for an element with the CSS view:
You can now rearrange or duplicate elements directly inside the canvas using drag and drop.
Building a Drag and Drop feature for something as complex as a web app is actually quite a complex task because there are a lot of strange edge-cases, and deeply nested elements. To help make sure you are dragging to the right location we added a separate mode that gives you complete freedom to place the element exactly where you want. Just hold down ⌘ or CTRL while dragging.
For more information, check out the documentation on drag and drop, and view the new keyboard shortcuts.
We are not done! We still have a ton of new features and improvements coming to the style panel that will make building UI in Nordcraft even more enjoyable.
We are also working on an Animation editor that lets you create keyframe animations right inside the editor. Stay tuned!
.jpeg/public)