When you're coding you can either define CSS style individually for each html element, or predefine it for multiple elements with a selector. You surely know, that the second variant saves you both clutter and size of your code.
But how can you know for certain that the design has some repetitive styles which can be used as types, IDs or classes? Without a style guide? No eye-balling?
With Avocode it's fairly easy. I'd like to show you on two basic examples:
The STYLES panel will show you that you have selected an intersection of 2 layers. (You can obviously choose as many layers as you want like this.)
NOTE: By holding the SHIFT key you can selects as many layers as you want.
If the styles of all layers in the layer intersection are the same, the STYLES panel will show something like this:
NOTE: The little red exclamation mark is there to tell us that the given style (such as “Position: Inside”) cannot be represented in code. If you want to include this style in the output, export the layer as an image.
However, if you select two and more different layers that are different in every aspect - like text and a button rectangle, the STYLES panel will let you know that there are “No layer styles in common”.
Checking layer styles with Avocode is helpful also when it comes to font styles. Again hit SHIFT and select multiple text layers. If they have the same style (or at least a same font-family) Avocode will show you.
When you see that both headlines carry the same values, you can create a class style for both of them. Either copy each value from the STYLES panel or again switch to the Code pane and export this code:
I'm sure that you know what to do next, but just for the sake of finishing this example… Next create as many <div> element that should use the class we predefined earlier and include it in your html structure.
As long as the layer have at least one style in common, Avocode will show you. For example, when you select a piktogram and a rectangle that carry the same color.
You can either click on the blue square and the color code will be copied to your clipboard, or you can switch to the CODE panel and Avocode will generate the entire style code for you:
However, if this color occurs more often in the design, perhaps you'd like to regard to it by something memorable than #3cafe1. How about something like "sky-blue"?
In that case, click on the color tile with the right mouse button and select "Add as a variable." A window, like the one below, will show up.
Name your variable anything you want. For this tutorial, I chose "sky-blue".
Note: You can use a variable for more than colors. Define any value from the exported code - such as font, gradient or a dimension. You can also use the REPLACE tab and create a rule for replacing certain code parts. For example you can decide to replace font-weight: 400; with font-weight: normal;.
Anytime you will generate code that contains this color, it will show a variable instead of the color code. You can edit the name of the variable or delete it at any time.
NOTE: If you don't delete your variable, it will stay there saved until the next time you open and inspect the design.
How do you proceed when it comes to creating style sheets and classes with Avocode? Let me know in the comments below.