In this section we will see how to make your designs fluid and assign semantic tags to your design elements.
It is faster to use the keyboard to navigate the elements in the web interface. To begin traversal using the keyboard simply click on any element.
arrow downto move between sibling elements.
arrow rightto descend into children of the group.
arrow leftto return to parent group.
In the design below, you should assign either
Link from the element type dropdown for the
FOLLOW group is then converted to either a
Link based on your choice. Later even if you move the element in your Sketch design, Codegen will remember your earlier assignment.
On the other hand if you copy the
FOLLOW group anywhere in the design, the new group will have to be assigned separately. If the
FOLLOW is a symbol instance, every other instance will be assigned the same tag.
If you horizontally center the layers within the artboard or inside a group layer, the centering will happen in the browser as well. If centering does not work for you verify that the layer is actually aligned to center in Sketch.
In the design below, the text layer on the second row is aligned to center and also spans multiple lines.
After exporting in the web interface but it is displayed as a single line of text. This the default behaviour of a block element in the web browser. A paragraph is a block element. They take up the entire width of their containers. To make it same as the above design you have to set the width property.
For that you have to click on the paragraph element. Then from the side panel you can choose either in
px or in
% . The in
px property will set the width of the paragraph element to the same as the width of the text layer in Sketch. The in
% property will set the width as a percentage of the parent layer. In this case let us pick the in
px property to set the width same as that of the text layer.
The max-width property can be set similar to the width property. You need it for situations when you don’t want to assign a fixed width to the element. The element should never grow beyond the assigned max width, but at the same time it should be flexible that it can grow smaller. This is unlike the width property where the element is not at all flexible.
The value of max-width is set to the original layer size in the design.
This is a useful property in combination with the max-width setting. When the browser is resized to be smaller, the element will not shrink below its min-width.
Unlike width or max-width you can assign a custom min-width value.
Let us revisit the example we used for configuring the grid view for book components. You can see that the grid has a horizontal padding of
After export and configuring the grid, when browser preview is resized you’ll notice that the right padding is not set.
You can turn on right padding by selecting the whole grid container and toggling
Padding Right from the side panel. If you resize the browser preview you’ll see that the right padding is set. The value of right padding will be the same as that in your design.
In the design below, you can see that the horizontal padding of the button text is not symmetrical.
When developers write css they will regularly adjust the value to be symmetrical by picking one of the values. But in a design with several artboard and numerous components, you are bound to miss a few.
A designer implicitly works with scales for spacings, typography, colours etc. From the web interface the designer can save a white list of valid pixel values. When the
Snap to Scale setting is turned on the errant values are changed to their closest value in the design scale. This reduces a ton of error prone manual effort from the developer and ensures that the CSS will always contain clean numerical values.
We already provide a default setting which you can override with your own values from the web interface.
Without snapping the CSS generated will be:
margin-left: 20px; margin-right: 19px;
In the default scale we provide the nearest scale value the above is
16px . So when you turn on
Snap to Scale the CSS generated will be normalised into:
margin-left: 16px; margin-right: 16px;
It is in our roadmap to extend this feature to also cover other custom values like text colours, background colours, font sizes, line heights etc.
Codegen makes transferring the designers scale to the CSS the developer will use and modify an explicit, rather than implicit process. This results in a higher quality always compared to manual effort.