Understanding Studio

Overview

This guide explains key graphic design and layout concepts relevant to Studio, Rechat's design tool for marketing admins. Understanding these principles will help you create professional, responsive designs for email, print, and web templates.

1. General Display Properties

Display Types

• Inline: Elements stay on the same line as surrounding content, only taking up as much width as necessary.

• Block: Elements take up the full width of their parent container and appear on a new line.

• Inline-Block: Similar to inline but allows width and height adjustments.

• None: Hides the element completely, removing it from the layout.

Float

• Left: Moves the element to the left, allowing content to wrap around the right.

• Right: Moves the element to the right, with content wrapping around the left.

• None: The element stays in its normal position.

Positioning

• Static (Default): Follows normal document flow.

• Relative: Can be moved from its normal position without affecting other elements.

• Absolute: Moves freely inside its closest positioned parent (if none, relative to the tag).

• Fixed: Stays in place even when scrolling (useful for sticky headers or floating buttons).

2. Flexbox for Responsive Design

Flexbox provides greater control over how elements behave inside a flex container.

Key Flex Properties

• Order: Defines the sequence of items in a flex container, overriding HTML order.

• Flex-basis: Sets the initial size of an element before it grows or shrinks.

• Flex-grow: Controls how much an item expands to fill extra space (default: 0, meaning no growth).

• Flex-shrink: Determines how much an item shrinks when space is limited (default: 1, meaning it shrinks proportionally).

• Align-self: Allows individual item alignment within a flex container.

  • auto (default)

  • flex-start (top)

  • flex-end (bottom)

  • center (middle)

  • stretch (expands to fit)

  • baseline (aligns by text baseline)

3. Dimensions and Sizing

Controlling the size of elements ensures a consistent design experience across devices.

Width and Height

• Width: Defines an element’s horizontal size (e.g., px, %, vw, auto).

• Height: Defines an element’s vertical size (e.g., px, %, vh, auto).

• Max-width: Sets the maximum width an element can grow to (useful for responsive design).

• Min-height: Ensures an element doesn’t collapse when content is small.

How Studio Uses These Properties

Studio applies these principles to design templates that marketing admins can create and customize for their agents. Understanding these properties will help you:

• Structure templates efficiently.

• Ensure elements align properly and maintain responsiveness.

• Control spacing and positioning for a professional appearance.

By mastering these concepts, marketing admins can make the most of Studio’s powerful design capabilities, creating visually appealing and effective marketing materials.