Here you can find the documentation for CSS - Shack
The main menu is located at the top of the application. It contains the following buttons ( left to right ):
The viewport contains the actual layers. It is an infinite canvas that can:
Layers can be selected by clicking on them, the current layer is surronded by guides and it's size is displayed at the bottom right corner.
Layers are basically DOM elements like a div, which you can style with a selector which is like a CSS Rule. They are the main elements of the application. There are a few things about layers:
There are many types of controls in the application, but the main ones are: input (usually represent pixel value), color ( #FFF or red ) and select ( solid, nowrap or hidden).
This input handles numeric values. It is a mix of a standard input and a range input. The value can be adjusted by dragging staring from the sides. It allows direct text input by clinking into the middle part. They are currently locked to a unit type, and cannot be changed.
They optionally have an upper and / or lower limit based on what they represent, a table of these are available later in this documentation.
Some has a lightning icon at the right part which switches the value from user editable to auto / inherit.
This input handles colors. The color can be set by standard text input. It allows the colors the be in many different formats ( rgb(a), hsl(a), hex, keyword ).
Clicking inside the input will open a color picker which sets the color as hex or as rgba (if the aplha is not 1). There is a ligthness / saturation rectange, hue a rectange and an alpha rectange:
The input field can be edited directly and it accepts CSS keyword values as well.
The select input handles properties that can have a single value out of many. It is just a simple select element, containing all possible values for that property.
Available CSS properties that can be set are grouped into panels and tabs.
Tabs contain panels that are related in some manner. For example the padding, margin and position panels are in the Box Model tab because they are usually used together. Blue background indicates which panel is active ( visible ).
These are the currently available panels ( top to bottom ):
A panel contains controls that relate to each other in some way. Panels can be reset with the undo icon in ( top right corner ) to their default state if the icon is present.
Some panels have an plus icon ( top right corner ), which indicates that that panel can have multiple items (such as the backgrounds or shadows), clicking on it a new item can be added.
All panels have a info icon ( top left corner ), which takes you to that panels documentation.
You can create, rename and delete selectors and it's variants here by clicking on the relevant icon.
Selecting a selector / variant will set it to the selected layers selector / variant.
This is the list of available shortcuts:
|delete||Delete layer||ctrl+a||Create new layer|
|ctrl+shift+a||Create new sub layer||ctrl+d||Duplicate layer|
|e||Basic Properties||w||Box Model|
|r||Transform||b||Border / Border Radius|
|t||Font / Text||c||Content|