Grid System v2.0.0

Amphibious uses a 16-column responsive grid system based on flexbox.

Container Classes

.container

Fixed-width container with responsive breakpoints (max-width: 960px)

.container-fluid

Full-width container that spans the entire viewport width

Grid Classes

.row

Creates a horizontal group of columns with negative margins

.col-{1-16}

Column width for desktop screens (e.g., .col-8 = 50% width)

.col-tablet-{1-16}

Column width for tablet screens (≤768px)

.col-mobile-{1-16}

Column width for mobile screens (≤480px)

Example Usage

<div class="container">
  <div class="row">
    <div class="col-8 col-tablet-16 col-mobile-16">
      Main content (50% on desktop, full width on tablet/mobile)
    </div>
    <div class="col-8 col-tablet-16 col-mobile-16">
      Sidebar (50% on desktop, full width on tablet/mobile)
    </div>
  </div>
</div>

Typography

Heading Classes

Class Font Size Font Weight Use Case
.h1 or h1 2.5rem (40px) 300 Page titles
.h2 or h2 2rem (32px) 400 Section headings
.h3 or h3 1.75rem (28px) 500 Subsection headings
.h4 or h4 1.5rem (24px) 500 Component headings
.h5 or h5 1.25rem (20px) 600 Small headings
.h6 or h6 1rem (16px) 600 Labels

Text Utilities

.text-left

Left-align text content

.text-center

Center-align text content

.text-right

Right-align text content

.text-muted

Muted text color (#6c757d)

.text-primary

Primary brand color text

.text-success

Success state text color

Navigation API

createNavigation()

amp.createNavigation(selector: string | HTMLElement, options?: NavigationOptions): AmphibiousNavigation

Creates a new navigation component with advanced features like dropdowns, mobile menu, search, and theme toggle.

Parameters

Parameter Type Required Description
selector string | HTMLElement Yes CSS selector or DOM element to initialize navigation on
options NavigationOptions No Configuration options for the navigation component

NavigationOptions Interface

Property Type Default Description
sticky boolean true Enable sticky navigation behavior on scroll
transparent boolean false Start with transparent background
breakpoint number 768 Mobile menu breakpoint in pixels
currentPath string window.location.pathname Current page path for active state
searchEnabled boolean true Show search button and modal
themeToggle boolean true Show theme toggle button
githubUrl string undefined GitHub repository URL
githubStars string undefined GitHub stars count to display
onToggle function undefined Callback when mobile menu is toggled
Returns: AmphibiousNavigation - Navigation component instance

Example Usage

// Basic navigation
const nav = amp.createNavigation('#navbar');

// Advanced configuration
const nav = amp.createNavigation('#navbar', {
  sticky: true,
  transparent: false,
  searchEnabled: true,
  themeToggle: true,
  githubUrl: 'https://github.com/your-org/amphibious',
  githubStars: '1.2k',
  onToggle: (isOpen) => {
    console.log('Mobile menu is', isOpen ? 'open' : 'closed');
  }
});

Navigation Methods

destroy()

navigation.destroy(): void

Removes the navigation component and cleans up event listeners.

Example Usage

const nav = amp.createNavigation('#navbar');
// Later...
nav.destroy();

Modal API

createModal()

amp.createModal(id: string, selector: string | HTMLElement, options?: ModalOptions): AmphibiousModal

Creates a new modal dialog with customizable options and event handling.

Parameters

Parameter Type Required Description
id string Yes Unique identifier for the modal
selector string | HTMLElement Yes CSS selector or DOM element for the modal content
options ModalOptions No Configuration options for the modal

ModalOptions Interface

Property Type Default Description
size 'sm' | 'md' | 'lg' | 'xl' 'md' Modal size variant
centered boolean false Vertically center the modal
backdrop boolean true Show backdrop overlay
keyboard boolean true Close modal on Escape key
animation 'fade' | 'slide' | 'zoom' 'fade' Animation type for show/hide

Modal Methods

open()

modal.open(): Promise<void>

Opens the modal with animation.

close()

modal.close(): Promise<void>

Closes the modal with animation.

toggle()

modal.toggle(): Promise<void>

Toggles the modal open/closed state.

Example Usage

// Create a modal
const modal = amp.createModal('myModal', '#modalContent', {
  size: 'lg',
  centered: true,
  animation: 'fade'
});

// Open the modal
await modal.open();

// Close after 3 seconds
setTimeout(() => modal.close(), 3000);

Stats Pattern

Display key metrics and statistics in a clean, scannable format.

CSS Classes

.stats

Container for statistics list (use with <ul>)

.stats--large

Modifier for larger stat display

.stats--vertical

Modifier for vertical layout

.stat-value

The numerical value or main metric

.stat-label

Descriptive label for the statistic

Example Usage

<ul class="stats stats--large" aria-label="Website statistics">
  <li>
    <strong class="stat-value">1.2M+</strong>
    <span class="stat-label">Downloads</span>
  </li>
  <li>
    <strong class="stat-value">99.9%</strong>
    <span class="stat-label">Uptime</span>
  </li>
  <li>
    <strong class="stat-value">< 100ms</strong>
    <span class="stat-label">Response Time</span>
  </li>
</ul>

Slats Pattern

Display a list of items with consistent spacing and optional borders.

CSS Classes

.slats

Container for slats list (use with <ul>)

.slats--products

Modifier for product listings

.slats--testimonials

Modifier for testimonial content

.slat-item

Individual slat content wrapper

.slat-content

Main content area of a slat

.slat-actions

Action buttons area

Example Usage

<ul class="slats slats--products">
  <li>
    <article class="slat-item">
      <figure class="slat-image">
        <img src="product.jpg" alt="Product name">
      </figure>
      <div class="slat-content">
        <h3>Product Name</h3>
        <p>Product description with relevant details.</p>
        <div class="slat-meta">
          <span class="price">$99.99</span>
        </div>
      </div>
      <div class="slat-actions">
        <button class="btn btn--primary">Add to Cart</button>
      </div>
    </article>
  </li>
</ul>