Skip to main content

Layout System

QwickApps React Framework provides a comprehensive layout system with responsive components that adapt beautifully across all device sizes. These components are built with professional design patterns and consistent spacing systems for creating structured, visually appealing interfaces.

Core Layout Principles​

🎯 Responsive First​

  • Mobile-first Design - Components adapt from mobile to desktop
  • Flexible Grid Systems - Automatic column adjustments based on screen size
  • Breakpoint Management - Consistent breakpoint handling across all components
  • Touch Optimization - Mobile-friendly interactions and spacing

🎨 Design Consistency​

  • Unified Spacing - Consistent padding and margin systems
  • Theme Integration - Automatic color and typography inheritance
  • Professional Patterns - Industry-standard layout patterns
  • Accessibility - WCAG-compliant semantic HTML structure

⚡ Performance Optimized​

  • Efficient Rendering - Minimal DOM manipulation and re-renders
  • Lazy Loading - Background images and content loaded on demand
  • CSS Grid & Flexbox - Modern CSS layout techniques for optimal performance
  • Lightweight Components - Small bundle size impact

Hero Blocks​

Professional hero sections that create compelling first impressions with flexible backgrounds and call-to-action support:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Key Features​

🖼️ Background Options:

  • Theme Colors - Consistent with your application's color palette
  • Gradient Backgrounds - Eye-catching linear and radial gradients
  • Image Backgrounds - High-quality images with customizable overlay
  • Custom CSS - Support for custom background styles

📏 Height Variants:

  • Small - Compact messaging (200px)
  • Medium - Balanced impact (400px)
  • Large - Maximum presence (600px)
  • Viewport - Full-screen dramatic effect (100vh)

🎯 Content Alignment:

  • Left Aligned - Professional business presentation
  • Center Aligned - Marketing and promotional content
  • Right Aligned - Creative and artistic layouts

Hero Block Implementation​

import { HeroBlock } from '@qwickapps/react-framework';

function LandingPageHero() {
  return (
    <HeroBlock
      title="Build Apps 10x Faster"
      subtitle="The most developer-friendly React framework that turns complex UI development into a joy"
      backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
      blockHeight="large"
      textAlign="center"
      actions={[
        { 
          label: 'Get Started Free', 
          variant: 'primary', 
          buttonSize: 'large',
          onClick: () => navigate('/signup')
        },
        { 
          label: 'Watch Demo', 
          variant: 'outlined', 
          buttonSize: 'large',
          onClick: () => openDemo()
        }
      ]}
    />
  );
}

Background Variants​

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Feature Grids​

Organized showcase of features, benefits, or content in responsive grid layouts:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Grid Features​

📱 Responsive Columns:

  • Auto-fit - Automatically adjusts column count based on screen size
  • Fixed Columns - 1, 2, 3, or 4 column layouts
  • Breakpoint Control - Custom column counts per device size
  • Equal Heights - Consistent card heights across rows

🎨 Spacing Options:

  • Small Gap - Tight spacing for dense content (8px)
  • Medium Gap - Balanced spacing for most use cases (16px)
  • Large Gap - Generous spacing for premium feel (32px)
  • Custom Gap - Pixel-perfect control with custom values

Feature Grid Implementation​

import { FeatureGrid } from '@qwickapps/react-framework';

function ProductFeatures() {
  const features = [
    {
      id: 'fast',
      title: '⚡ Lightning Fast',
      description: 'Optimized performance for instant loading and smooth user experiences',
      icon: '⚡'
    },
    {
      id: 'beautiful',
      title: '🎨 Beautiful UI',
      description: 'Professional components and layouts that work perfectly out of the box',
      icon: '🎨'
    },
    {
      id: 'mobile',
      title: '📱 Mobile First',
      description: 'Responsive design principles built into every component and layout',
      icon: '📱'
    }
  ];

  return (
    <FeatureGrid
      features={features}
      columns={3}
      gap="large"
      equalHeight={true}
    />
  );
}

Feature Cards​

Individual feature cards with hover effects and structured content presentation:

Interactive Demo: Use the Storybook controls at the top to customize this component.Open in New Tab →

Card Features​

🎯 Content Structure:

  • Icon Support - Emoji, SVG, or custom icon components
  • Title & Description - Clear hierarchy with proper typography
  • Action Support - Optional buttons or links
  • Hover Effects - Subtle animations and visual feedback

🎨 Visual Options:

  • Border Variants - Outlined, filled, or elevated styles
  • Color Themes - Primary, secondary, or custom color schemes
  • Size Options - Compact, standard, or large card sizes
  • Shadow Effects - Material Design elevation system

Feature Card Implementation​

import { FeatureCard } from '@qwickapps/react-framework';

function IndividualFeature() {
  return (
    <FeatureCard
      feature={{
        id: 'integration',
        title: 'Easy Integration',
        description: 'Simple setup and configuration with minimal boilerplate code required',
        icon: '🔌'
      }}
      variant="outlined"
      size="standard"
      showHoverEffect={true}
      onClick={() => showFeatureDetails('integration')}
    />
  );
}

Section Components​

Semantic section containers with background options and consistent spacing:

import { Section, Content } from '@qwickapps/react-framework';

function PageSection() {
  return (
    <Section
      background="alternate"  // Alternating background color
      spacing="comfortable"   // Comfortable padding
      component="section"     // Semantic HTML element
    >
      <Content 
        title="Our Mission"
        subtitle="Building the future of web development"
        centered={true}
        maxWidth="lg"
      >
        <p>We believe that great software should be accessible to everyone...</p>
      </Content>
    </Section>
  );
}

Section Background Options​

Theme Colors:

  • default - Primary background color
  • alternate - Alternating section background
  • surface - Card/paper background color
  • primary - Primary theme color
  • secondary - Secondary theme color

Spacing Options:

  • none - No padding (0px)
  • tiny - Minimal padding (8px)
  • small - Compact padding (16px)
  • medium - Standard padding (32px)
  • large - Generous padding (64px)
  • extra-large - Maximum padding (96px)

Content Components​

Professional content containers with typography, actions, and responsive behavior:

import { Content } from '@qwickapps/react-framework';

function ArticleContent() {
  return (
    <Content
      title="Getting Started with QwickApps"
      subtitle="A comprehensive guide to building your first application"
      centered={true}
      maxWidth="md"
      actions={[
        { label: 'Download', variant: 'primary', onClick: () => download() },
        { label: 'View Docs', variant: 'outlined', onClick: () => viewDocs() }
      ]}
    >
      <p>Welcome to QwickApps React Framework! This guide will walk you through...</p>
      <ul>
        <li>Installation and setup</li>
        <li>Basic component usage</li>
        <li>Advanced configuration</li>
      </ul>
    </Content>
  );
}

Content Features​

📝 Typography Support:

  • Title & Subtitle - Proper heading hierarchy
  • Body Content - Rich text with HTML support
  • Custom Styling - Theme-aware text styling
  • Responsive Text - Automatic scaling across devices

🎯 Layout Options:

  • Width Control - xs, sm, md, lg, xl container widths
  • Alignment - Left, center, or right text alignment
  • Action Buttons - Integrated call-to-action support
  • Custom Spacing - Flexible margin and padding control

Responsive Layout Patterns​

Mobile-First Grid System​

import { FeatureGrid } from '@qwickapps/react-framework';

function ResponsiveFeatures() {
  return (
    <FeatureGrid
      features={features}
      columns={{
        xs: 1,  // 1 column on mobile
        sm: 2,  // 2 columns on tablet
        md: 3,  // 3 columns on desktop
        lg: 4   // 4 columns on large screens
      }}
      gap="medium"
      equalHeight={true}
    />
  );
}

Adaptive Hero Heights​

import { HeroBlock } from '@qwickapps/react-framework';

function AdaptiveHero() {
  return (
    <HeroBlock
      title="Responsive Hero"
      subtitle="Adapts to different screen sizes"
      backgroundGradient="linear-gradient(45deg, #2196F3, #21CBF3)"
      blockHeight={{
        xs: 'small',    // Compact on mobile
        sm: 'medium',   // Standard on tablet
        md: 'large',    // Large on desktop
        lg: 'viewport'  // Full screen on large displays
      }}
      textAlign="center"
    />
  );
}

Data Binding Integration​

All layout components support dynamic content through data binding:

import { HeroBlock, FeatureGrid, Section, DataProvider } from '@qwickapps/react-framework';

// CMS data structure
const layoutData = {
  'pages.home.hero': {
    title: 'Dynamic Hero Title',
    subtitle: 'Content loaded from your CMS',
    backgroundGradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    actions: [
      { label: 'Get Started', variant: 'primary' }
    ]
  },
  'pages.home.features': {
    features: [
      { id: 'feature1', title: 'Feature One', description: 'Dynamic feature content' },
      { id: 'feature2', title: 'Feature Two', description: 'More dynamic content' }
    ],
    columns: 2,
    gap: 'large'
  }
};

function DataDrivenLayout() {
  return (
    <DataProvider dataSource={{ data: layoutData }}>
      <HeroBlock dataSource="pages.home.hero" />
      
      <Section background="alternate">
        <FeatureGrid dataSource="pages.home.features" />
      </Section>
    </DataProvider>
  );
}

Advanced Layout Patterns​

Landing Page Template​

import { 
  HeroBlock, 
  Section, 
  Content, 
  FeatureGrid, 
  FeatureCard 
} from '@qwickapps/react-framework';

function LandingPage() {
  return (
    <>
      {/* Hero Section */}
      <HeroBlock
        title="Transform Your Development Process"
        subtitle="Build production-ready applications faster than ever before"
        backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        blockHeight="large"
        textAlign="center"
        actions={[
          { label: 'Start Free Trial', variant: 'primary', buttonSize: 'large' },
          { label: 'See Demo', variant: 'outlined', buttonSize: 'large' }
        ]}
      />

      {/* Features Section */}
      <Section spacing="large">
        <Content title="Why Choose QwickApps?" centered maxWidth="lg">
          <FeatureGrid
            features={keyFeatures}
            columns={3}
            gap="large"
            equalHeight={true}
          />
        </Content>
      </Section>

      {/* Benefits Section */}
      <Section background="alternate" spacing="large">
        <Content 
          title="Built for Modern Development"
          subtitle="Everything you need in one comprehensive framework"
          centered
          maxWidth="lg"
        >
          <FeatureGrid
            features={benefitFeatures}
            columns={2}
            gap="large"
            equalHeight={false}
          />
        </Content>
      </Section>

      {/* CTA Section */}
      <Section spacing="large">
        <Content
          title="Ready to Get Started?"
          subtitle="Join thousands of developers already building with QwickApps"
          centered
          maxWidth="md"
          actions={[
            { label: 'Create Account', variant: 'primary', buttonSize: 'large' },
            { label: 'View Pricing', variant: 'text', buttonSize: 'large' }
          ]}
        />
      </Section>
    </>
  );
}

Product Showcase Template​

function ProductShowcase() {
  return (
    <>
      {/* Product Hero */}
      <HeroBlock
        title="Introducing QwickApps v2.0"
        subtitle="The most advanced React framework for rapid application development"
        backgroundImage="https://images.unsplash.com/photo-1558618666-fcd25c85cd64"
        overlayOpacity={0.6}
        blockHeight="viewport"
        textAlign="center"
        actions={[
          { label: 'Launch Now', variant: 'primary', buttonSize: 'large' }
        ]}
      />

      {/* Feature Highlights */}
      <Section spacing="large">
        <Content title="What's New in v2.0" centered maxWidth="lg">
          <FeatureGrid
            features={newFeatures}
            columns={3}
            gap="medium"
            equalHeight={true}
          />
        </Content>
      </Section>

      {/* Detailed Feature Cards */}
      <Section background="alternate" spacing="large">
        <Content title="Powerful Features" maxWidth="lg">
          {detailedFeatures.map((feature) => (
            <FeatureCard
              key={feature.id}
              feature={feature}
              variant="filled"
              size="large"
              orientation="horizontal"
            />
          ))}
        </Content>
      </Section>
    </>
  );
}

Performance Best Practices​

Optimized Image Loading​

import { HeroBlock } from '@qwickapps/react-framework';

function OptimizedHero() {
  return (
    <HeroBlock
      title="Performance Optimized Hero"
      subtitle="Images loaded efficiently with lazy loading"
      backgroundImage="https://images.unsplash.com/photo-1558618666-fcd25c85cd64"
      // Responsive image loading
      backgroundImageSizes={{
        xs: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=768',
        sm: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1024',
        md: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1440',
        lg: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920'
      }}
      loading="lazy"
      blockHeight="large"
    />
  );
}

Efficient Grid Rendering​

import { FeatureGrid } from '@qwickapps/react-framework';

function PerformantGrid() {
  // Virtualization for large feature sets
  return (
    <FeatureGrid
      features={largeFeatureSet}
      columns={3}
      gap="medium"
      virtualizeRows={true}  // Enable row virtualization for 100+ items
      itemHeight={200}       // Fixed height for virtualization
      overscan={5}           // Pre-render 5 items outside viewport
    />
  );
}

Accessibility Features​

Semantic HTML Structure​

All layout components generate proper semantic HTML:

<!-- Hero Block generates semantic HTML -->
<section aria-labelledby="hero-title" role="banner">
  <div class="hero-content">
    <h1 id="hero-title">Page Title</h1>
    <p class="hero-subtitle">Page description</p>
    <div class="hero-actions" role="group" aria-label="Primary actions">
      <button>Get Started</button>
      <button>Learn More</button>
    </div>
  </div>
</section>

<!-- Feature Grid generates accessible structure -->
<section aria-labelledby="features-title">
  <h2 id="features-title">Features</h2>
  <div class="feature-grid" role="list">
    <div class="feature-card" role="listitem" tabindex="0">
      <h3>Feature Title</h3>
      <p>Feature description</p>
    </div>
  </div>
</section>

Keyboard Navigation​

  • Tab Order - Logical focus order through interactive elements
  • Skip Links - Quick navigation to main content areas
  • ARIA Labels - Descriptive labels for screen readers
  • Focus Management - Clear focus indicators and trap management

Learn More​