Installation v2.0.0

There are several ways to get started with Amphibious 2.0. Choose the method that works best for your project.

Method 1: NPM / Bun (Recommended)

# Using npm
npm install @amphibious/core

# Using bun (faster)
bun add @amphibious/core

# Using yarn
yarn add @amphibious/core

Then import in your JavaScript:

// Import CSS
import '@amphibious/core/css';

// Import JavaScript components
import { createNavigation, createModal } from '@amphibious/core';

Method 2: CDN

For quick prototypes or simple projects, you can use our CDN:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@amphibious/core@2/dist/amphibious.min.css">

<!-- JavaScript -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@amphibious/core@2/dist/amphibious.min.js"></script>

Method 3: Download

Download the compiled CSS and JavaScript files directly:

Download CSS

Minified CSS (42KB)

Download JS

Minified JavaScript (18KB)

Download Bundle

Complete package with examples

Quick Start

Here's a minimal HTML template to get you started:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Amphibious Project</title>
  <link rel="stylesheet" href="path/to/amphibious.css">
</head>
<body>
  <header>
    <nav class="amp-nav" aria-label="Main navigation">
      <div class="container">
        <!-- Navigation content -->
      </div>
    </nav>
  </header>

  <main class="container">
    <section>
      <h1>Welcome to Amphibious 2.0</h1>
      <p>Start building amazing responsive layouts!</p>
    </section>
  </main>

  <script type="module" src="path/to/amphibious.js"></script>
</body>
</html>

Pro Tip

Always use semantic HTML elements like <header>, <main>, <nav>, <section>, and <aside> for better accessibility and SEO.

Project Structure

Amphibious 2.0 follows a modular architecture. Here's the recommended project structure:

your-project/
├── dist/                 # Built files
│   ├── amphibious.css
│   └── amphibious.js
├── src/
│   ├── css/
│   │   ├── main.css     # Main entry point
│   │   ├── variables.css # CSS custom properties
│   │   ├── grid.css      # Grid system
│   │   └── components/   # Component styles
│   └── js/
│       ├── index.ts      # JavaScript entry
│       └── components/   # JS components
├── examples/            # Usage examples
└── docs/               # Documentation

Core Files

File Purpose Size
amphibious.css Complete CSS framework 42KB (minified)
amphibious.js JavaScript components 18KB (minified)
variables.css CSS custom properties for theming 3KB

Configuration

CSS Variables

Customize Amphibious by overriding CSS custom properties:

:root {
  /* Colors */
  --color-primary: #ED8B00;
  --color-secondary: #c97400;
  --color-success: #48bb78;
  --color-danger: #f56565;
  --color-warning: #ed8936;
  --color-info: #4299e1;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Grid */
  --grid-columns: 16;
  --grid-gutter: 1rem;
  --container-width: 960px;

  /* Borders */
  --border-radius: 4px;
  --border-color: #dee2e6;
}

JavaScript Configuration

Configure JavaScript components during initialization:

// Navigation configuration
const nav = amp.createNavigation('#nav', {
  sticky: true,
  transparent: false,
  searchEnabled: true,
  themeToggle: true,
  breakpoint: 768
});

// Modal configuration
const modal = amp.createModal('#myModal', {
  size: 'lg',
  centered: true,
  backdrop: true,
  keyboard: true,
  animation: 'fade'
});

Important

Always test your custom configurations across different browsers and devices to ensure consistency.

Grid System

Amphibious uses a powerful 16-column grid system based on the 960 Grid System principles.

Basic Grid

<div class="container">
  <div class="row">
    <div class="col-8">Half width (8/16)</div>
    <div class="col-8">Half width (8/16)</div>
  </div>
  <div class="row">
    <div class="col-4">Quarter (4/16)</div>
    <div class="col-4">Quarter (4/16)</div>
    <div class="col-4">Quarter (4/16)</div>
    <div class="col-4">Quarter (4/16)</div>
  </div>
</div>

Responsive Grid

Use responsive column classes for different screen sizes:

<div class="row">
  <div class="col-16 col-tablet-8 col-desktop-4">
    Full width on mobile, half on tablet, quarter on desktop
  </div>
</div>
Breakpoint Class Prefix Screen Size
Mobile .col-mobile-* < 480px
Tablet .col-tablet-* 481px - 768px
Desktop .col-* > 768px

Pea.rs Patterns

Amphibious 2.0 includes common UI patterns from pea.rs for rapid development.

Stats Pattern

<ul class="stats">
  <li>
    <strong class="stat-value">1,234</strong>
    <span class="stat-label">Users</span>
  </li>
  <li>
    <strong class="stat-value">99.9%</strong>
    <span class="stat-label">Uptime</span>
  </li>
</ul>

Slats Pattern

<ul class="slats">
  <li>
    <h3>Item Title</h3>
    <p>Description of the item with relevant details.</p>
  </li>
  <li>
    <h3>Another Item</h3>
    <p>More information about this particular item.</p>
  </li>
</ul>

Aside Pattern

<aside class="aside-content">
  <h3>Related Information</h3>
  <p>Supplementary content that supports the main content.</p>
  <ul>
    <li>Additional resource 1</li>
    <li>Additional resource 2</li>
  </ul>
</aside>

Semantic HTML

Amphibious 2.0 emphasizes the use of semantic HTML for better accessibility, SEO, and maintainability.

Document Structure

<body>
  <header>
    <nav aria-label="Main navigation">
      <!-- Navigation items -->
    </nav>
  </header>

  <main role="main">
    <article>
      <header>
        <h1>Article Title</h1>
        <time datetime="2024-01-01">January 1, 2024</time>
      </header>

      <section>
        <h2>Section Heading</h2>
        <p>Content...</p>
      </section>

      <aside>
        <h3>Related Links</h3>
        <!-- Sidebar content -->
      </aside>
    </article>
  </main>

  <footer>
    <!-- Footer content -->
  </footer>
</body>

Form Structure

<form>
  <fieldset>
    <legend>Personal Information</legend>

    <div class="form-group">
      <label for="name">
        Name
        <span aria-label="required">*</span>
      </label>
      <input type="text" id="name" name="name" required aria-required="true">
    </div>

    <div class="form-group">
      <label for="email">
        Email
        <span aria-label="required">*</span>
      </label>
      <input type="email" id="email" name="email" required aria-required="true">
    </div>
  </fieldset>

  <button type="submit">Submit</button>
</form>

Best Practice

Always use semantic elements instead of generic <div> elements when possible. This improves accessibility and helps search engines understand your content structure.

Next Steps

Components

Explore all available UI components

Examples

See live demos and code samples

API Reference

Complete API documentation

Playground

Experiment with components

Need Help?

Join our community on Discord or check out the GitHub Discussions for support and updates.