We spent the last few months completely redesigning the style panel from the ground up. Styling your application in Nordcraft is now more delightful than ever.
The new style panel is packed full of great features: many more than we can cover here. Lets take a look at the highlights.
Everything at a glance
It is easy to see exactly which properties are set, without extra clicking or scrolling
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.
⌘ + Search
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.
Press ⌘/CTRL + S to highlight the search input.
Backgrounds
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.
You can add multiple backgrounds to the same element to create more interesting effects.
CSS if you want it
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:
One more thing...
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.
What's next?
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!
Top comments (0)