Designer Use Guide

1. Decorations

Transform Html elements into branded interface elements using backgrounds, borders, and shadows.

Backgrounds

• Solid Colors: Apply a clean, uniform fill to any element.
• Gradients: Blend multiple colors together. Use the Angle setting to create modern, dynamic looks.
• Optimized Images: Fliddo automatically converts and compresses background images for speed.
  • Size (Cover): Stretches the image to fill the entire area.
  • Size (Contain): Ensures the full image is visible without cropping.
  • Fixed Attachment: Creates a parallax effect where the background stays still as you scroll.

Borders & Radius

Borders define the edges of your elements, while radius curves them.

• Style: Choose between solid, dashed, or dotted lines.
• Radius: This controls curve of the corners.

  Tip: Use a value of 2px or 4px for a soft UI look, or 50px+ to create perfectly circular profile images or pill-shaped buttons.

2. Spacing

Understanding the difference between Padding and Margin is essential for clean layouts.

3. Effects

Apply advanced visual polish directly in the browser.

• Opacity: Controls transparency (1 is solid, 0 is invisible).
• Blur: Softens the element and is great for background glass effects.
• Grayscale: Instantly turns any element or image black and white for a minimalist feel.
• Brightness/Contrast: Quick adjustments to images without needing an external editor.

1. Font Selection

Choosing the right typeface sets the mood for your entire design.

Font Family

This setting lets you choose the specific look of your letters. In the Fliddo Designer, we typically group these into two categories:

• Sans-Serif: Modern, clean fonts (e.g., Arial, Roboto). These are highly recommended for digital screens.
• Serif: Traditional fonts with small strokes at the ends of characters (e.g., Times New Roman, Georgia). Great for a classic or formal feel.

Font Weight

Controls the thickness of the characters. While some fonts only offer "Normal" and "Bold," professional web fonts often provide a range from 100 (Thin) to 900 (Black).

2. Layout & Spacing

Good typography isn't just about the letters; it's about the space between them.

Font Size

The scale of your text.

The Fliddo Standard: We recommend a base size of 16px for body text to ensure maximum readability on mobile devices.

Line Height (Leading)

This controls the vertical space between lines of text in a paragraph.

• Tight (1.0 - 1.2): Good for large, impactful headings.
• Breathable (1.5 - 1.6): Great for body text as it prevents lines from blurring together while reading.

Letter Spacing (Tracking)

The horizontal space between characters.

• Tip: Adding a tiny amount of extra spacing to ALL CAPS headings can make them look significantly more premium.

3. Alignment & Transformation

Final touches to give your text structure and emphasis.

• Text Align: Choose between Left, Center, Right, or Justified. (Note: Left-aligned text is generally the easiest for users to read on the web.)
• Text Transform: Instantly switch text to UPPERCASE, lowercase, or Capitalize (Every Word Starts With A Capital).
• Text Decoration: Add an Underline, Overline, or a Strikethrough for deleted content.

1. The Container (The Parent)

When you set an element to Display: Flex, it becomes a Container. It now has the power to tell the items inside it how to sit.

Direction: Row vs. Column

• Row (Default): Items sit side-by-side like a shelf.
• Column: Items stack on top of each other like a tower.

Justify Content (Horizontal Alignment)

This defines how space is distributed along the main axis:

• Start/End: Push all items to the left or right.
• Center: Perfect horizontal centering.
• Space Between: Pushes the first item to the far left and the last to the far right, with equal gaps in between (ideal for navigation bars).

Align Items (Vertical Alignment)

This controls how items sit vertically within the row. Use Center here to make sure a small icon and a large piece of text are perfectly aligned in the middle.

2. Flex Items (The Children)

Once a container is set to Flex, you can select the individual items inside it to give them specific behaviours.

• Flex Grow: If set to 1, this item will stretch to fill any empty space in the container. If set to 0, it stays as small as its content.
• Flex Shrink: Defines if the item should get smaller if the screen gets too narrow.
• Order: Want the "Contact" button to appear first on mobile but last on desktop? Use the Order field to rearrange items visually without changing the Html.

3. Flex Wrap

By default, Flex items will try to stay on one single line. If you have too many items (like a gallery of photos), enable Wrap. This allows items to drop to the next line when they run out of room.

1. Transitions (Hover & State Changes)

Transitions control how an element moves from its "Normal" state to its "Hover" state. Without a transition, colors or sizes snap instantly; with one, they glide smoothly.

• Property: Select what you want to animate such as Background Color, Opacity, or Transform. Choosing All will animate every change.
• Duration: How long the effect lasts.

  The Standard: Use 0.2s or 0.3s for buttons and links. Anything longer can make the site feel sluggish.

• Easing: This defines the "vibe" of the motion. Ease-in starts slow, while Ease-out finishes with a gentle slow-down, making the interaction feel more natural.

2. Transforms (Scale & Tilt)

Transforms are powerful effects that don't push ( shift ) other elements around. They happen on their own visual layer.

• Scale: Make an element grow or shrink (e.g., a button that gets 5% larger when hovered).
• Rotate: Tilt an element clockwise or counter clockwise.
• Translate: Move an element slightly up, down, left, or right.

3. Entrance Effects

Use these to grab attention when a visitor first sees a section of your page.

• Effect Type: Choose from presets like Fade In, Slide Up, or Zoom.
• Staggering: By adding a slight Delay to different elements, you can make your content cascade onto the screen one by one instead of all at once.

1. Display Types

The Display property is the most fundamental setting in web design. It determines how an element sits next to its neighbors.

• Block: The element takes up the full width available, starting on a new line (like a Heading or Paragraph).
• Inline-Block: The element only takes up as much width as its content, allowing other items to sit next to it (like a Button).
• Flex: Enables the Flexbox engine (see the Flexbox guide for details).
• None: Completely removes the element from the page. It’s still in your project, but it won't be visible to visitors.

2. Positioning

Positioning allows you to move elements out of their natural "automatic" spot and place them elsewhere.

Static (Default)

The element follows the natural order of the page. Top, Left, Right, and Bottom settings will have no effect here.

Relative

The element stays in the normal flow, but you can "nudge" it using coordinates.

Note: Moving a Relative element doesn't affect the space it originally occupied; other elements won't move to fill the gap.

Absolute

The element is removed from the normal flow. It will "float" over other content. It positions itself relative to its nearest Relative parent. This is perfect for placing a "Sale" badge over a product image.

Fixed

The element is locked to the user's screen. It stays in the exact same spot even when the user scrolls (common for "Back to Top" buttons or Sticky Headers).

3. Using Coordinates (Top, Bottom, Left, Right)

Once you have set a position (Relative, Absolute, or Fixed), you use these four values to move the element:

• Top / Bottom: Controls the vertical distance from the edge of the parent container or screen.
• Left / Right: Controls the horizontal distance.

Z-Index (The Stack Order)

When elements overlap, Z-Index decides which one is on top. An element with a Z-Index of 10 will sit above an element with a Z-Index of 5.

1. Effects( Filters)

Apply professional-grade visual adjustments directly in the browser without needing external photo editing software.

• Opacity: Adjust the transparency of an element. A value of 1 is fully solid, while 0 is completely invisible. This is perfect for subtle "watermark" text or overlay effects.
• Blur: Softens the edges of an element and its content.

  Design Tip: Use a slight blur on background images to make text overlays pop and improve readability.

• Brightness & Contrast: Quickly fix dark photos or make colors more vivid.
• Grayscale: Instantly converts any element or image to black and white. This is an excellent way to create a sophisticated, minimalist brand aesthetic.
• Saturate & Hue-rotate: Change the intensity of colors or shift the entire color palette of an image.

2. Extra (Behavior & Cursors)

This sector manages how the user interacts with an element and how the element handles overflowing content.

Overflow Management

When an element contains more content than its width or height can hold, you need to decide how to handle the "spillover":

• Visible: The default setting. Content will simply bleed outside the box.
• Hidden: Any content outside the boundaries of the box is cut off. This is essential for creating rounded corners on images or keeping layouts tidy.
• Scroll: Adds a scrollbar to the individual element so users can see the hidden content without expanding the box.

Cursor Styles

Change what the mouse pointer looks like when a user hovers over an element. While Fliddo handles most of this automatically, you can manually set it to:

• Pointer: The "hand" icon, indicating the item is clickable.
• Not-Allowed: A red circle with a line, indicating a disabled action.
• Crosshair: Often used for selection tools or precise editing areas.