Documentation

Here you can find the documentation for CSS - Shack

Main Menu

The main menu is located at the top of the application. It contains the following buttons ( left to right ):

Viewport

Viewport

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

Layers Tab

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:

Controls

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).

Input

Input Control

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.

Color

Color Control

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.

Select

Input Control

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.

Tabs and Panels

Available CSS properties that can be set are grouped into panels and tabs.

Tabs

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 ):

Panel

Panel

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.

Selectors / Variants

Selectors

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.

Shortcuts

This is the list of available shortcuts:

ctrl+c New ctrl+o Open
ctrl+e Export ctrl+s Save
ctrl+z Undo ctrl+y Redo
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
f Flex Properties e Effects
r Transform b Border / Border Radius
t Font / Text c Content