Foundation Project Examples

Corporate Business Site

<!-- Business Website Structure -->
<div class="grid-container">
  <!-- Navigation -->
  <div class="title-bar" data-responsive-toggle="main-nav">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
  </div>
  
  <div class="top-bar" id="main-nav">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li class="menu-text">Business Name</li>
        <li><a href="#services">Services</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>

  <!-- Hero Section -->
  <div class="grid-x align-center-middle text-center hero-section">
    <div class="cell medium-8">
      <h1>Welcome to Our Business</h1>
      <p class="lead">Professional solutions for your needs</p>
      <button class="button large primary">Get Started</button>
    </div>
  </div>

  <!-- Services Grid -->
  <div class="grid-x grid-margin-x" id="services">
    <div class="cell medium-4">
      <div class="card service-card">
        <div class="card-section">
          <h5>Web Development</h5>
          <p>Custom web solutions</p>
        </div>
      </div>
    </div>
    <!-- More services... -->
  </div>
</div>

Online Store Layout

<!-- E-commerce Product Page -->
<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <!-- Product Images -->
    <div class="cell medium-6">
      <div class="product-gallery">
        <img src="product-main.jpg" alt="Product" class="thumbnail">
        <div class="grid-x grid-margin-x small-up-4">
          <div class="cell">
            <img src="product-1.jpg" class="thumbnail" alt="Thumbnail">
          </div>
          <!-- More thumbnails -->
        </div>
      </div>
    </div>

    <!-- Product Info -->
    <div class="cell medium-6">
      <h1>Product Name</h1>
      <p class="price">$99.99</p>
      <p class="description">Product description here...</p>
      
      <!-- Add to Cart -->
      <div class="grid-x grid-margin-x">
        <div class="cell small-4">
          <label>Quantity
            <input type="number" value="1" min="1">
          </label>
        </div>
        <div class="cell small-8">
          <button class="button expanded success">Add to Cart</button>
        </div>
      </div>

      <!-- Product Features -->
      <ul class="no-bullet">
        <li>✓ Feature one</li>
        <li>✓ Feature two</li>
        <li>✓ Feature three</li>
      </ul>
    </div>
  </div>
</div>

Dashboard Layout

<!-- Admin Dashboard Structure -->
<div class="grid-x">
  <!-- Sidebar -->
  <div class="cell medium-3 large-2 dashboard-sidebar">
    <div class="sidebar-header">
      <h5>Dashboard</h5>
    </div>
    <ul class="vertical menu">
      <li class="active"><a href="#"><i class="fi-graph"></i> Overview</a></li>
      <li><a href="#"><i class="fi-torso"></i> Users</a></li>
      <li><a href="#"><i class="fi-shopping-bag"></i> Products</a></li>
      <li><a href="#"><i class="fi-graph-bar"></i> Analytics</a></li>
    </ul>
  </div>

  <!-- Main Content -->
  <div class="cell medium-9 large-10 dashboard-main">
    <!-- Stats Cards -->
    <div class="grid-x grid-margin-x">
      <div class="cell medium-3">
        <div class="stat-card primary">
          <h3>1,024</h3>
          <p>Total Users</p>
        </div>
      </div>
      <div class="cell medium-3">
        <div class="stat-card success">
          <h3>$12,456</h3>
          <p>Revenue</p>
        </div>
      </div>
      <!-- More stats... -->
    </div>

    <!-- Charts and Tables -->
    <div class="grid-x grid-margin-x">
      <div class="cell medium-8">
        <div class="card">
          <div class="card-section">
            <h5>Sales Chart</h5>
            <!-- Chart would go here -->
          </div>
        </div>
      </div>
      <div class="cell medium-4">
        <div class="card">
          <div class="card-section">
            <h5>Recent Activity</h5>
            <!-- Activity feed -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Blog with Sidebar

<!-- Blog Layout -->
<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <!-- Main Content -->
    <div class="cell medium-8">
      <article class="blog-post">
        <header class="post-header">
          <h1>Blog Post Title</h1>
          <div class="post-meta">
            <span class="author">By John Doe</span>
            <span class="date">January 1, 2024</span>
          </div>
        </header>
        
        <div class="post-content">
          <p>Blog content here...</p>
          <!-- More content -->
        </div>

        <footer class="post-footer">
          <div class="tags">
            <span class="label secondary">Technology</span>
            <span class="label secondary">Web Development</span>
          </div>
        </footer>
      </article>

      <!-- Comments Section -->
      <section class="comments">
        <h3>Comments</h3>
        <!-- Comment form and list -->
      </section>
    </div>

    <!-- Sidebar -->
    <div class="cell medium-4">
      <div class="sidebar-widget">
        <h5>About Author</h5>
        <p>Author bio here...</p>
      </div>

      <div class="sidebar-widget">
        <h5>Categories</h5>
        <ul class="no-bullet">
          <li><a href="#">Technology (15)</a></li>
          <li><a href="#">Design (8)</a></li>
          <!-- More categories -->
        </ul>
      </div>

      <div class="sidebar-widget">
        <h5>Recent Posts</h5>
        <ul class="no-bullet">
          <li><a href="#">Recent post one</a></li>
          <li><a href="#">Recent post two</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Creative Portfolio

<!-- Portfolio Layout -->
<div class="grid-container fluid">
  <!-- Hero Section -->
  <div class="grid-x align-center-middle text-center portfolio-hero">
    <div class="cell medium-8">
      <h1 class="portfolio-title">Creative Portfolio</h1>
      <p class="portfolio-subtitle">Showcasing amazing work</p>
    </div>
  </div>

  <!-- Portfolio Grid -->
  <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3 portfolio-grid">
    <div class="cell">
      <div class="portfolio-item">
        <img src="project1.jpg" alt="Project 1">
        <div class="portfolio-overlay">
          <h5>Project One</h5>
          <p>Web Design</p>
          <a href="#" class="button hollow">View Project</a>
        </div>
      </div>
    </div>
    <!-- More portfolio items -->
  </div>

  <!-- Skills Section -->
  <div class="grid-x grid-margin-x skills-section">
    <div class="cell">
      <h3>Skills & Expertise</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell medium-3">
          <div class="skill-card text-center">
            <i class="fi-monitor"></i>
            <h6>Web Design</h6>
          </div>
        </div>
        <!-- More skills -->
      </div>
    </div>
  </div>
</div>