Every element you place onto a Layout must be positioned and styled. This process relies on a fundamental two-part internet standard: one part that defines the element's structure (what it is), and another that defines its appearance (how it looks). Understanding this system—and the rules of Flexbox—is essential for building responsive, visually consistent experiences in Shipcode.

The Two-Part System: Structure and Style

While Components provide the fundamental building blocks, the internet defines their ultimate role using two separate conceptual layers:

Structure (Conceptual HTML)

HTML (HyperText Markup Language) is the foundational language for all web and app interfaces. It is the skeleton or blueprint that provides the basic structure for your content—the boxes, text, images, and other elements. Without this underlying structure, there is no digital screen. Your Shipcode components ultimately become this raw, structural foundation to which all styling is layered on top.

Style (Conceptual CSS)

CSS (Cascading Style Sheets) is like the clothes and decorations for the application. It describes how the HTML elements should be displayed on the screen. CSS is the "paint" and "decorations" for your digital creation, controlling colors, fonts, positioning, and alignment. In Shipcode, you will use visual tools in the Properties Panel that apply these CSS properties behind the scenes, giving you precise control over your design.

CSS Basics: Properties and Values

CSS works by editing properties and specifying values to elements.

• Every visual aspect you want to control has a CSS property (e.g., color, font-size, background-color, width).
• Each property takes a value that defines how that property is applied (e.g., red, 16px, 100%).

In Shipcode's Properties Panel, you will use intuitive controls like color pickers, sliders, and dropdowns that correspond directly to these CSS properties and values, making styling a visual and straightforward experience.

Visual Arrangement with Flexbox

Flexbox (short for Flexible Box Layout) is a tool in CSS that makes it easier to arrange, align, and distribute space among elements within a container.

Flexbox solves the problem of haphazard positioning by letting you control how items align, space out, and resize inside a container. It allows you to define direction, alignment, and spacing of children based on the container they exist in.

For example, with Flexbox you can quickly instruct a container to:

• "Put all buttons in a row and space them evenly."
• "Center this text both vertically and horizontally."
• "Make this element stay small, and the main content fill the rest."

Flexbox Key Properties

Understanding a few key Flexbox properties will give you immense control over your component arrangement.

• display: flex;: This is the magic switch that turns any element into a flex container, making its direct children "flex items".
• flex-direction: row | column;: Controls whether your items arrange horizontally (row) or vertically (column).
• justify-content: (Main Axis Alignment): Controls how items are aligned and spaced along the main direction (row or column). Common values include flex-start, center, and space-between.
• align-items: (Cross Axis Alignment): Controls how items are aligned along the opposite direction. Common values include flex-start, center, and stretch.

Styling in Shipcode: Visual CSS and Flexbox Control

Shipcode's visual design tools in the Properties Panel give you direct control over these CSS and Flexbox properties, allowing you to style and arrange your components intuitively, without writing a single line of code.

• Layout (Flexbox): You will find a dedicated section for Layout controls where you can set flex-direction, justify-content, and align-items using simple dropdowns, icon buttons, and toggles.
• Basic Styling: You will use controls for background-color, text-color, font-size, padding, margin, and border, applying them directly to your selected element.

Shipcode translates your visual selections into the correct CSS and Flexbox rules, empowering you to create beautiful and responsive designs.

Controlling Space: Padding and Margin

You can use two distinct CSS properties for precise visual control over spacing for your components:

• Padding (Space Inside): This is the internal space between a component's content and its border. Padding acts to "push" the content away from the edge of the component itself.
• Margin (Space Outside): This is the external space outside a component's border. Margin acts to "push" the component away from other adjacent components on the Layout.