Foundation - Amphibious 2.0

Core

Amphibious 2.0 is built on modern CSS foundations with semantic HTML5 structure. The framework uses CSS custom properties for theming, flexbox for layout, and follows BEM methodology for component naming.

Modern Foundation

Built with contemporary web standards, Amphibious 2.0 provides:

CSS Custom Properties for easy theming
Flexbox-based grid system
Mobile-first responsive design
Semantic HTML5 structure
BEM methodology for CSS naming
ES6+ JavaScript modules
Accessibility-first approach

Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Page Title</title>
  <link rel="stylesheet" href="../src/css/main.css">
</head>
<body>
  <header>
    <div class="container">
      <nav class="row">
        <!-- Navigation content -->
      </nav>
    </div>
  </header>

  <main>
    <section>
      <div class="container">
        <div class="row">
          <article class="col-12">Main content</article>
          <aside class="col-4">Sidebar</aside>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="row">
        <div class="col-16">Footer content</div>
      </div>
    </div>
  </footer>
</body>
</html>

Container Types

The .container class provides a centered, max-width wrapper for content. It's fluid by default and responsive to all screen sizes.

Semantic Grid

A 16-column grid system that provides precise control over layout while maintaining semantic meaning in your HTML.

16-Column System

Based on the proven 960 Grid System, each column represents 6.25% of the container width (16 columns = 100%).

1

col-4

col-8

col-16 (full width)

<section>
  <div class="container">
    <div class="row">
      <aside class="col-4">Sidebar content</aside>
      <main class="col-8">Main content</main>
      <aside class="col-4">Secondary sidebar</aside>
    </div>
  </div>
</section>

Simple Layout Example

Header

Sidebar

Main Content

Footer

<header>
  <div class="container">
    <div class="row">
      <div class="col-16">Site header content</div>
    </div>
  </div>
</header>

<main>
  <section>
    <div class="container">
      <div class="row">
        <aside class="col-6">Navigation sidebar</aside>
        <article class="col-10">Main content</article>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="container">
    <div class="row">
      <div class="col-16">Footer content</div>
    </div>
  </div>
</footer>

Nested Grids

You can nest grids within columns for complex layouts:

Header

Navigation

Main Content

Sidebar

Footer

<header>
  <div class="container">
    <div class="row">
      <div class="col-16">Site header</div>
    </div>
  </div>
</header>

<main>
  <section>
    <div class="container">
      <div class="row">
        <nav class="col-6">Primary navigation</nav>
        <div class="col-10">
          <div class="row">
            <article class="col-12">Main content</article>
            <aside class="col-4">Related links</aside>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="container">
    <div class="row">
      <div class="col-16">Site footer</div>
    </div>
  </div>
</footer>

Responsive Columns

Columns adapt automatically to different screen sizes using mobile-first responsive design. Resize your browser window to see the layout react!

Breakpoints

Mobile: ≤480px - .col-mobile-*
Tablet: ≤768px - .col-tablet-*
Desktop: >768px - .col-* (default)

Desktop: 8 | Tablet: 16 | Mobile: 16

4 | 8 | 16

<section>
  <div class="container">
    <div class="row">
      <main class="col-8 col-tablet-16 col-mobile-16">
        Responsive main content
      </main>
    </div>
  </div>
</section>

Fluid Columns

The grid system is fluid by default, scaling proportionally with the container. All columns use percentage-based widths for maximum flexibility.

Flexible Layout

Columns automatically adjust to their container's width, making them perfect for responsive designs and nested grids.

col-6 (37.5%)

col-10 (62.5%)

<section>
  <div class="container">
    <div class="row">
      <aside class="col-6">Sidebar content</aside>
      <main class="col-10">Primary content</main>
    </div>
  </div>
</section>

Golden Ratio Grids

Create visually pleasing layouts using the golden ratio (1.618:1) with special column combinations that approximate this mathematical proportion.

Golden Ratio Combinations

Use col-10 + col-6 (ratio ≈ 1.67:1) or col-9 + col-7 (ratio ≈ 1.29:1) for golden section layouts.

col-10 (Golden Large)

col-6 (Golden Small)

col-9 (Golden Large)

col-7 (Golden Small)

<!-- Golden ratio layout -->
<section>
  <div class="container">
    <div class="row">
      <article class="col-10">Main content (golden large)</article>
      <aside class="col-6">Related content (golden small)</aside>
    </div>
  </div>
</section>

Source Ordering

Change the visual order of columns without altering the HTML structure using CSS flexbox order property.

Reordering Columns

Use .col-first and .col-last classes to change the visual order of columns. This is the modern flexbox replacement for the legacy pull classes.

First in HTML (order: 2)

Second in HTML (order: 1)

<section>
  <div class="container">
    <div class="row">
      <aside class="col-8 col-last">Sidebar (appears second)</aside>
      <main class="col-8 col-first">Main content (appears first)</main>
    </div>
  </div>
</section>

Push Classes for Offsetting

Use .push-* or .offset-* classes to add left margin and offset columns:

col-8 push-4

col-4

col-6 push-2

<section>
  <div class="container">
    <div class="row">
      <main class="col-8 push-4">Offset main content</main>
      <aside class="col-4">Sidebar content</aside>
    </div>
    <div class="row">
      <article class="col-6 push-2">Article one</article>
      <article class="col-6 push-2">Article two</article>
    </div>
  </div>
</section>

Media Queries

Amphibious 2.0 uses a mobile-first approach with carefully chosen breakpoints for optimal responsive behavior.

Breakpoint System

/* Mobile First (base styles) */
.element {
  /* Mobile styles */
}

/* Tablet and up */
@media (min-width: 481px) {
  .element {
    /* Tablet styles */
  }
}

/* Desktop and up */
@media (min-width: 769px) {
  .element {
    /* Desktop styles */
  }
}

/* Large screens */
@media (min-width: 1024px) {
  .element {
    /* Large desktop styles */
  }
}

Responsive Demo

Resize your browser window to see the media queries in action:

This box changes color based on screen size: Desktop (Blue) → Tablet (Orange) → Mobile (Green)

Built-in Breakpoints

Mobile Portrait: ≤480px
Mobile Landscape: 481px - 768px
Tablet: 769px - 1024px
Desktop: 1025px+