NON-BETA / Feature Request / Colorize CS

Beta
#1

Every time i’m using CS i’m thinking how nice it would be if i can colorize elements in layout pane. It’s something like audio editor do, so you can add green color to group of elements and violet to another group (just like FL Studio do or adobe audition). I thought about it because there is not enough of space to give names to sections like “bla bla bla - Mobile” and “bla bla bla Desktop”. It would be nice if i just can give a mobile sections one color and desktop sections another color.

Here is my example )

Surely same for row and columns. Just maybe someday in a future )

#2

Hi @Georgich!

I actually do something similar for some time now. :slight_smile:

I have Stylus addon installed both in Firefox and Chrome. Among other things, I have also removed the large undock shadow:

.is-undocked {
    box-shadow: none!important;
}

Moved the Breadcrumbs to the left:

.cs-navigation-bar {
flex-flow:row-reverse nowrap !important;
}
.cs-navigation-bar .cs-breadcrumbs {
border-right:1px solid #484848 !important;
}

Created a true 360px preview in Cornerstone (Can be toggled on/off):

.cs-preview-frame-container {
    max-width: 360px!important
}

etc. :slight_smile:

Various colorization are possible thanks to very organized classes.

2 Likes
#3

Thanks, Misho! Nice one! Never heard about Sylus. Now using it :slight_smile:

1 Like
#4

Really liking this, Thank you @Misho

1 Like
#5

Cool idea! I don’t think this is something we would ever make part of the UI. However, we have talked about adding a place in preferences where you can store these snippets in your site instead of having to rely on browser settings. This would allow for more inspiration and ideas like this.

Keep an eye out for it in the next cycle.

2 Likes