Hyper Advanced CSS

A modern, utility-first CSS library for rapid development. This library is designed to be hosted as a CDN via npm.

Installation

To use this library in your project, you can install it via npm:

npm install hyper-advanced-css

Then, you can link to the stylesheet in your HTML file:

<link rel="stylesheet" href="node_modules/hyper-advanced-css/src/main.css">

Or, for development, you can use a CDN like unpkg:

<link rel="stylesheet" href="https://unpkg.com/hyper-advanced-css/src/main.css">

Note: This project does not currently have a build process due to limitations in the development environment. The CSS file is provided un-minified.

CSS Classes

Here is a list of the available CSS classes and what they do.

Theming

The library uses CSS variables for theming. You can override these variables in your own stylesheet to customize the colors, fonts, and other properties.

Default Variables:

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --border-radius: 0.25rem;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

Grid System

A simple and flexible flexbox-based grid system.

• .container: A centered container for your content.
• .row: A flex container for columns.
• .col: A flex item that grows to fill the available space.

Example:

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Buttons

Stylish buttons with hover effects.

• .btn: Base button styles.
• .btn-primary: A primary action button.
• .btn-secondary: A secondary action button.

Example:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

Glassmorphism

A utility class to create a "frosted glass" effect.

• .glass: Applies a background blur and transparency.

Example:

<div class="glass">
  <p>This has a glass effect.</p>
</div>

Animations

Subtle animations to bring your content to life.

• .fade-in: A simple fade-in animation.
• .slide-in-up: Slides the element in from the bottom.

Example:

<div class="fade-in">This element will fade in.</div>
<div class="slide-in-up">This element will slide in from below.</div>