PHPackages                             basis-css/basis-css - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. basis-css/basis-css

ActiveLibrary[Framework](/categories/framework)

basis-css/basis-css
===================

Professional CSS framework with adaptive color system - supports monochrome, one-color, two-colors, and three-colors modes with automatic light/dark theme switching

v0.2.0(6mo ago)20MITCSS

Since Oct 21Pushed 6mo agoCompare

[ Source](https://github.com/kylearch/basis-css)[ Packagist](https://packagist.org/packages/basis-css/basis-css)[ RSS](/packages/basis-css-basis-css/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (3)Used By (0)

Basis CSS
=========

[](#basis-css)

A professional CSS framework with an adaptive color system that supports multiple color modes and automatic light/dark theme switching.

Features
--------

[](#features)

- **Adaptive Color System**: Choose from 4 color modes:

    - Monochrome: Sophisticated offblack and offwhite palette
    - One-color: Monochrome foundation with one strategic highlight color
    - Two-colors: Natural hierarchy with primary and secondary colors
    - Three-colors: Rich layered design with primary, secondary, and tertiary colors
- **Automatic Theme Switching**: Respects system preferences for light/dark mode
- **Comprehensive Components**: Buttons, cards, forms, tables, alerts, modals, and more
- **Utility Classes**: Spacing, typography, flexbox, grid utilities
- **Zero Dependencies**: Pure CSS and vanilla JavaScript
- **Responsive Design**: Mobile-first approach with responsive utilities

Installation
------------

[](#installation)

### npm

[](#npm)

```
npm install basis-css
```

### Composer (PHP)

[](#composer-php)

```
composer require basis-css/basis-css
```

### CDN

[](#cdn)

You can also include Basis CSS directly via CDN:

```

```

Usage
-----

[](#usage)

### Basic Setup

[](#basic-setup)

Include the CSS and JavaScript files in your HTML:

```
>

    Hello, Basis CSS!
    Click me

```

### Color Modes

[](#color-modes)

Switch between color modes programmatically:

```
// Switch to one-color mode with a custom accent
colorSystem.mode = 'one-color';
colorSystem.colors.accent = '#3b82f6';
updateColorSystem();

// Switch to two-colors mode
colorSystem.mode = 'two-colors';
colorSystem.colors.primary = '#3b82f6';
colorSystem.colors.secondary = '#8b5cf6';
updateColorSystem();

// Switch to three-colors mode
colorSystem.mode = 'three-colors';
colorSystem.colors.primary = '#3b82f6';
colorSystem.colors.secondary = '#8b5cf6';
colorSystem.colors.tertiary = '#ec4899';
updateColorSystem();

// Reset to monochrome
resetToMonochrome();
```

### Manual Theme Control

[](#manual-theme-control)

Override system theme preferences:

```

```

Components
----------

[](#components)

### Buttons

[](#buttons)

```
Primary Button
Secondary Button
Tertiary Button
Outline Button
Ghost Button
```

### Cards

[](#cards)

```

    Card Title

    Card content goes here.

```

### Forms

[](#forms)

```

  Email

```

### Alerts

[](#alerts)

```
This is a primary alert
This is a success alert
This is a danger alert
```

Customization
-------------

[](#customization)

All colors are defined as CSS custom properties and can be overridden:

```
:root {
  --color-primary: #your-color;
  --color-secondary: #your-color;
  --font-family-base: "Your Font", sans-serif;
}
```

Browser Support
---------------

[](#browser-support)

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

License
-------

[](#license)

MIT License - feel free to use in personal and commercial projects.

Contributing
------------

[](#contributing)

Contributions are welcome! Please feel free to submit a Pull Request.

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance66

Regular maintenance activity

Popularity3

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity26

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

208d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0ca72a26c1e1c600bbe9329bdbd3a075a6fb67e18e44819b8cba8faffcb6db15?d=identicon)[kylearch](/maintainers/kylearch)

---

Top Contributors

[![kylearch](https://avatars.githubusercontent.com/u/1396751?v=4)](https://github.com/kylearch "kylearch (8 commits)")

---

Tags

frameworkcssuicomponentsdesign-systemdark-modelight-modebasiscolor-systemadaptive-colors

### Embed Badge

![Health badge](/badges/basis-css-basis-css/health.svg)

```
[![Health](https://phpackages.com/badges/basis-css-basis-css/health.svg)](https://phpackages.com/packages/basis-css-basis-css)
```

###  Alternatives

[twitter/bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

174.1k1.7M27](/packages/twitter-bootstrap)[semantic/ui

Semantic empowers designers and developers by creating a shared vocabulary for UI.

51.1k35.6k2](/packages/semantic-ui)[fomantic/ui

Fomantic empowers designers and developers by creating a shared vocabulary for UI.

3.7k24.0k1](/packages/fomantic-ui)[atk4/chart

Chart.js for Agile UI

1214.2k](/packages/atk4-chart)[electrik/slate

Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project

102.3k1](/packages/electrik-slate)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)