Design & Styling

The design toolbar provides comprehensive CSS controls for visual customization of your website elements. The interface intelligently adapts to show the most relevant styling options based on the selected element type.

CSS Controls Overview

The design toolbar organizes CSS properties into logical categories, making complex styling accessible through an intuitive interface.

Key features:

• Element-specific style options based on common use cases
• Organized categories for efficient workflow
• Advanced controls for detailed customization
• Real-time visual feedback as you make changes

Style Categories

The design toolbar organizes CSS properties into three main categories, each containing the most commonly used controls for efficient styling:

Decorations

Visual appearance and surface styling controls:

• Background Color - Solid colors and gradients
• Text Color - Typography color with gradient support
• Border Controls - Width, style, and color options
• Border Radius - Corner rounding
• Shadows - Box shadows and text shadows
• Opacity - Element transparency
• Text Formatting - Bold, italic, underline, alignment
• Line Height - Text spacing controls

Dimensions

Size, positioning, and spatial controls:

• Width & Height - Element dimensions
• Padding & Margin - Internal and external spacing
• Position - Absolute, relative, fixed positioning
• Size Constraints - Min/max width and height
• Overflow - Content overflow behavior
• Object Controls - Image fit and positioning

Structure

Layout and organizational controls:

• Display - Block, flex, grid, inline options
• Flex Controls - Direction, wrap, alignment, gap
• Grid Controls - Template columns, rows, gap
• Z-Index - Layer stacking order
• Transform - Rotation, scale, translation
• General Layout - Float, clear, visibility

Element-Specific Styling

The toolbar intelligently displays different style options based on the selected element type, showing the most relevant controls for each element.

Examples:

• Text elements - Typography, alignment, text shadows
• Images - Object fit, border radius, filters
• Containers - Layout controls, padding, background
• Buttons - States, borders, shadows, typography

Advanced Controls

For more specialized styling needs, each category provides access to advanced controls:

Accessing Advanced Options

At the bottom of each category, click the "Advanced" link to access additional CSS properties:

• Advanced Decorations - Custom borders, complex backgrounds, advanced effects
• Advanced Dimensions - Precise positioning, overflow controls, object properties
• Advanced Structure - Complex flex/grid layouts, transforms, advanced display options

Navigation

• Use the back arrow to return from advanced mode to basic controls
• Advanced controls maintain the same intuitive interface design
• All changes apply in real-time with visual feedback

AI-Powered Styling

When specific styling options aren't available in the toolbar, the AI assistant can help implement custom CSS solutions.

AI can help with:

• Custom CSS properties not in the toolbar
• Complex animations and transitions
• Advanced pseudo-selectors and states
• Custom design patterns and effects

Simply describe what you want to achieve, and the AI will apply the appropriate CSS.

Responsive Design Considerations

While the design toolbar handles styling for the current breakpoint, remember that modern websites need to look great on all devices. Different screen sizes may require different styling approaches:

• Mobile-first approach - Start with mobile styles, then enhance for larger screens
• Breakpoint-specific styling - Adjust layouts and sizing for different devices
• Flexible units - Use responsive units (%, rem, vw) when appropriate
• Content prioritization - Ensure important content is visible on smaller screens

Next Steps

After mastering the design controls, explore responsive design to ensure your styling works across all devices:

• Responsive Design - Learn device-specific layouts and breakpoint management

The design toolbar provides powerful visual customization capabilities, but combining it with responsive design principles ensures your website looks professional on every device.