PHPackages                             tina4stack/tina4css - 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. tina4stack/tina4css

ActiveLibrary[Framework](/categories/framework)

tina4stack/tina4css
===================

Tina4 CSS - A lightweight responsive CSS framework

2.1.3(1mo ago)131MITSCSSPHP >=8.1CI passing

Since Mar 14Pushed 1mo agoCompare

[ Source](https://github.com/tina4stack/tina4-css)[ Packagist](https://packagist.org/packages/tina4stack/tina4css)[ RSS](/packages/tina4stack-tina4css/feed)WikiDiscussions main Synced 2w ago

READMEChangelog (1)Dependencies (4)Versions (5)Used By (0)

 [![Tina4](https://camo.githubusercontent.com/165f402c35eb3acc48324c256db1c0a63df0f397471832c46866f2ab835e302b/68747470733a2f2f74696e61342e636f6d2f6c6f676f2e737667)](https://camo.githubusercontent.com/165f402c35eb3acc48324c256db1c0a63df0f397471832c46866f2ab835e302b/68747470733a2f2f74696e61342e636f6d2f6c6f676f2e737667)

Tina4 CSS
=========

[](#tina4-css)

### The Intelligent Native Application 4ramework

[](#the-intelligent-native-application-4ramework)

 Lightweight CSS framework + Frond JS helper. Zero dependencies.

 [![npm](https://camo.githubusercontent.com/def6f6342af84e8e9312aa493e604cb7b119f8b23c9ef065d7bb1b41f80f0114/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f74696e61342d6373733f636f6c6f723d376231666132266c6162656c3d6e706d)](https://www.npmjs.com/package/tina4-css) [![PyPI](https://camo.githubusercontent.com/540f1644969e22566cecc47a4c1f9bbd36ae5b730ed5da025879e4237562032b/68747470733a2f2f696d672e736869656c64732e696f2f707970692f762f74696e61342d6373733f636f6c6f723d376231666132266c6162656c3d50795049)](https://pypi.org/project/tina4-css/) [![CSS Size](https://camo.githubusercontent.com/267fcd609c2a43cc3cd780ed6477bcfc4ff3312a1e5418ba6193aa7b48b986a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4353532d7e32344b422d626c7565)](https://camo.githubusercontent.com/267fcd609c2a43cc3cd780ed6477bcfc4ff3312a1e5418ba6193aa7b48b986a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4353532d7e32344b422d626c7565) [![Frond Size](https://camo.githubusercontent.com/782577d7749f41d7d921869b5af615e6d18758eef027ee4d9f18f649106112f9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46726f6e645f4a532d7e344b422d626c7565)](https://camo.githubusercontent.com/782577d7749f41d7d921869b5af615e6d18758eef027ee4d9f18f649106112f9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46726f6e645f4a532d7e344b422d626c7565) [![Zero Deps](https://camo.githubusercontent.com/aae95fbaa83bc6a3f4597f3a75da45ea46ec236fc324617f0e5a2f15e07fe750/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646570656e64656e636965732d302d627269676874677265656e)](https://camo.githubusercontent.com/aae95fbaa83bc6a3f4597f3a75da45ea46ec236fc324617f0e5a2f15e07fe750/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646570656e64656e636965732d302d627269676874677265656e) [![Docs](https://camo.githubusercontent.com/4b27a5c9fec9a6dafc4f26bc92cd323819405a5659930e83b309e641e8a2f921/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f63732d74696e61342e636f6d2d376231666132)](https://tina4.com)

 [Documentation](https://tina4.com) • [Quick Start](#quick-start) • [CSS Components](#css-components) • [Frond JS](#frond---client-side-helper) • [tina4.com](https://tina4.com)

---

What's Inside
-------------

[](#whats-inside)

Tina4 CSS ships **two things** that every Tina4 app needs:

FileWhatSize`tina4.min.css`Responsive CSS framework (grid, buttons, forms, cards, nav, modals, alerts, tables, badges, utilities)~24KB`tina4.js`Tiny component JS (modals, alert dismiss, navbar toggler)~3KB`frond.min.js`Client-side DOM helper for SSR apps (AJAX, forms, WebSocket, SSE, cookies)~4KBInstalling
----------

[](#installing)

```
# PHP (Composer)
composer require tina4stack/tina4css

# JavaScript / Node.js (npm)
npm install tina4-css

# Python (pip / uv)
pip install tina4-css

# Ruby (gem)
gem install tina4-css

# Or just grab the files
curl -o tina4.min.css https://raw.githubusercontent.com/tina4stack/tina4-css/main/dist/tina4.min.css
curl -o frond.min.js https://raw.githubusercontent.com/tina4stack/tina4-css/main/dist/frond.min.js
```

Quick Start
-----------

[](#quick-start)

```
>

    Hello Tina4
    Loading...

    // Load a page fragment via AJAX
    frond.load("/api/dashboard", "content");

```

---

CSS Components
--------------

[](#css-components)

### Grid

[](#grid)

```

    Column 1
    Column 2
    Column 3

```

### Buttons

[](#buttons)

```
Primary
Outline Danger
Large Success
Full Width
```

### Forms

[](#forms)

```

  Email

  Remember me

```

### Cards

[](#cards)

```

  Featured

    Card Title
    Content goes here.
    Action

  Updated 3 mins ago

```

### Alerts

[](#alerts)

```
Operation successful!

  Error occurred.
  ×

```

### Tables

[](#tables)

```

  NameEmail
  Andreandre@example.com

```

### Navigation

[](#navigation)

```

  My App
  ☰

      Home
      About

```

### Badges

[](#badges)

```
New
5
```

### Modals

[](#modals)

```
Open

        Title
        ×

      Modal content.

        Close
        Save

```

### Utility Classes

[](#utility-classes)

CategoryClasses**Display**`.d-none`, `.d-block`, `.d-flex`, `.d-inline`, `.d-inline-block`, `.d-grid`**Flex**`.flex-row`, `.flex-column`, `.flex-wrap`, `.justify-content-*`, `.align-items-*`**Spacing**`.m-{0-5}`, `.p-{0-5}`, `.mt-*`, `.mb-*`, `.ms-*`, `.me-*`, `.mx-auto`**Text**`.text-start`, `.text-center`, `.text-end`, `.text-uppercase`, `.fw-bold`, `.fs-{1-6}`**Colors**`.text-primary`, `.text-danger`, `.bg-success`, `.bg-warning`, etc.**Borders**`.border`, `.border-0`, `.rounded`, `.rounded-pill`, `.rounded-circle`**Shadows**`.shadow-sm`, `.shadow`, `.shadow-lg`, `.shadow-none`**Size**`.w-25`, `.w-50`, `.w-75`, `.w-100`, `.h-*`, `.mw-100`**Position**`.position-relative`, `.position-absolute`, `.position-fixed`, `.position-sticky`**Responsive**`.d-md-none`, `.d-lg-flex`, `.col-sm-6`, `.col-md-4`, `.col-lg-3`---

Frond — Client-Side Helper
--------------------------

[](#frond--client-side-helper)

Frond is the JavaScript companion for server-rendered Tina4 apps. It handles AJAX page loads, form submission, real-time connections (WebSocket + SSE), and cookie management. Pure native JS, zero dependencies.

```

  // Everything is on window.frond
  frond.load("/dashboard", "content");

```

### frond.request(url, options?)

[](#frondrequesturl-options)

Core HTTP request with auto Bearer token management.

```
// Simple GET with callback
frond.request("/api/users", function(data, status) {
  console.log(data);
});

// POST with options
frond.request("/api/users", {
  method: "POST",
  body: { name: "Alice", email: "alice@example.com" },
  onSuccess: function(data, status) {
    console.log("Created:", data);
  },
  onError: function(status) {
    console.log("Error:", status);
  }
});

// PUT with custom headers
frond.request("/api/users/1", {
  method: "PUT",
  body: { name: "Bob" },
  headers: { "X-Custom": "value" },
  onSuccess: function(data) { console.log(data); }
});
```

### frond.load(url, target?, callback?)

[](#frondloadurl-target-callback)

GET a URL and inject the HTML response into a DOM element. Executes embedded `` tags.

```
// Load into #content (default target)
frond.load("/pages/dashboard");

// Load into a specific element
frond.load("/pages/sidebar", "sidebar");

// With callback
frond.load("/pages/users", "content", function(html, rawData) {
  console.log("Page loaded");
});
```

### frond.post(url, data, target?, callback?)

[](#frondposturl-data-target-callback)

POST data and inject the response HTML.

```
frond.post("/api/search", { query: "widgets" }, "results");

frond.post("/api/process", { id: 42 }, "output", function(html, raw) {
  console.log("Done:", raw);
});
```

### frond.inject(html, target)

[](#frondinjecthtml-target)

Parse an HTML string, inject it into a target element, and execute any embedded `` tags.

```
// Inject into an element
frond.inject('Helloconsole.log("loaded")', "content");

// Get processed HTML without injecting (pass null)
var html = frond.inject('Test', null);
```

### frond.form.collect(formId)

[](#frondformcollectformid)

Collect all form fields into a FormData object. Handles text inputs, selects, textareas, file uploads (multi-file), checkboxes, and radio buttons.

```
var data = frond.form.collect("myForm");
// Returns FormData with all field values
```

### frond.form.submit(formId, url, target?, callback?)

[](#frondformsubmitformid-url-target-callback)

Collect form data and POST it. Inject the response into a target element.

```
// Submit form and show result in #message
frond.form.submit("userForm", "/api/users/save");

// With custom target and callback
frond.form.submit("productForm", "/api/products", "result", function(html, raw) {
  if (raw.success) frond.message("Saved!", "success");
});
```

### frond.form.show(action, url, target?, callback?)

[](#frondformshowaction-url-target-callback)

Load a form via a friendly action name. "create" and "edit" map to GET, "delete" maps to DELETE.

```
// Load a create form
frond.form.show("create", "/admin/products/new", "formArea");

// Load an edit form
frond.form.show("edit", "/admin/products/42/edit", "formArea");

// Delete
frond.form.show("delete", "/api/products/42", "formArea", function(data) {
  frond.message("Deleted", "warning");
});
```

### frond.ws(url, options?)

[](#frondwsurl-options)

WebSocket with auto-reconnect and exponential backoff.

```
var socket = frond.ws("/ws/chat/room1", {
  reconnect: true,
  reconnectDelay: 1000,
  maxReconnectDelay: 30000,
  onOpen: function() { console.log("Connected"); },
  onClose: function(code, reason) { console.log("Closed:", code); },
  onError: function(err) { console.log("Error:", err); }
});

// Listen for messages (auto-parses JSON)
socket.on("message", function(data) {
  console.log("Received:", data);
  // data is already parsed if JSON
});

// Send data (objects auto-stringify)
socket.send({ type: "message", text: "Hello!" });
socket.send("plain text");

// Check status
console.log(socket.status); // "connecting" | "open" | "closed" | "reconnecting"

// Close (stops reconnect)
socket.close();
```

### frond.sse(url, options?)

[](#frondsseurl-options)

Server-Sent Events with auto-reconnect and JSON parsing.

```
var stream = frond.sse("/api/events/sales", {
  reconnect: true,
  json: true,
  events: ["order", "stock"],  // named SSE events
  onOpen: function() { console.log("SSE connected"); },
  onClose: function() { console.log("SSE closed"); }
});

// Listen for all messages
stream.on("message", function(data, eventName) {
  console.log(eventName || "message", data);
  // data is auto-parsed JSON
});

// Check status
console.log(stream.status); // "connecting" | "open" | "closed" | "reconnecting"

// Close (stops reconnect)
stream.close();
```

### frond.cookie

[](#frondcookie)

```
// Set a cookie (expires in 30 days)
frond.cookie.set("theme", "dark", 30);

// Get a cookie
var theme = frond.cookie.get("theme"); // "dark"

// Remove a cookie
frond.cookie.remove("theme");
```

### frond.message(text, type?)

[](#frondmessagetext-type)

Display a tina4-css dismissible alert in the `#message` element.

```
frond.message("Saved successfully!", "success");
frond.message("Something went wrong", "danger");
frond.message("Please check your input", "warning");
frond.message("FYI: maintenance tonight", "info");
```

### frond.popup(url, title, w, h)

[](#frondpopupurl-title-w-h)

Open a centred popup window.

```
frond.popup("/print/invoice/42", "Invoice", 800, 600);
```

### frond.report(url)

[](#frondreporturl)

Open a PDF report in a new window.

```
frond.report("/api/reports/sales.pdf");
```

### frond.token

[](#frondtoken)

Read or set the Bearer token used for all requests.

```
// Set token after login
frond.token = "eyJhbGciOiJIUzI1NiIs...";

// Read current token
console.log(frond.token);

// Token auto-rotates from FreshToken response header
```

---

Theming
-------

[](#theming)

Override any variable before importing the framework:

```
$primary:   #e74c3c;
$secondary: #2c3e50;
$font-family-base: 'Inter', sans-serif;

@import 'tina4';
```

### All Themeable Variables

[](#all-themeable-variables)

VariableDefaultDescription`$primary``#4a90d9`Primary brand color`$secondary``#6c757d`Secondary color`$success``#28a745`Success/positive color`$danger``#dc3545`Danger/error color`$warning``#ffc107`Warning color`$info``#17a2b8`Info color`$light``#f8f9fa`Light background`$dark``#212529`Dark color`$body-bg``#fff`Page background`$body-color``$dark`Default text color`$font-family-base`system-ui stackBase font family`$font-size-base``1rem`Base font size`$spacer``1rem`Base spacing unit`$border-radius``0.25rem`Default border radius`$grid-columns``12`Grid column count`$grid-gutter``1.5rem`Grid gutter widthCSS Custom Properties
---------------------

[](#css-custom-properties)

All design tokens available at runtime:

```
:root {
  --t4-primary: #4a90d9;
  --t4-secondary: #6c757d;
  --t4-font-family: system-ui, ...;
  --t4-border-radius: 0.25rem;
  --t4-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
```

---

File Structure
--------------

[](#file-structure)

```
tina4-css/
├── dist/                          # Pre-compiled (ready to use)
│   ├── tina4.css                  # Expanded CSS (~30KB)
│   ├── tina4.min.css              # Minified CSS (~24KB)
│   ├── base.min.css               # Base only (no colors)
│   ├── colors.min.css             # CSS custom properties only
│   ├── tina4.js                   # Component JS (modals, alerts, navbar)
│   └── frond.min.js               # Frond client-side helper
├── src/
│   ├── app/
│   │   └── Tina4CSS.php           # PHP SCSS compiler class
│   ├── js/
│   │   └── frond.ts               # Frond TypeScript source
│   └── scss/
│       ├── _variables.scss        # Design tokens (all !default)
│       ├── _reset.scss            # Modern CSS reset
│       ├── _typography.scss       # Headings, lists, code, kbd
│       ├── _grid.scss             # 12-column flexbox grid
│       ├── _buttons.scss          # Solid + outline buttons
│       ├── _forms.scss            # Inputs, selects, checkboxes, validation
│       ├── _cards.scss            # Card components
│       ├── _nav.scss              # Navbar, nav links, breadcrumbs
│       ├── _modals.scss           # Modal dialogs
│       ├── _alerts.scss           # Alert messages
│       ├── _tables.scss           # Table styles
│       ├── _badges.scss           # Badge labels
│       ├── _utilities.scss        # Utility classes
│       ├── tina4.scss             # Main entry (imports all)
│       ├── base.scss              # Base entry
│       └── colors.scss            # CSS custom properties
├── tina4_css/                     # Python package
├── composer.json                  # PHP package
├── package.json                   # npm package
├── pyproject.toml                 # Python package
├── tina4-css.gemspec              # Ruby gem
└── example.html                   # Full component showcase

```

Building Frond
--------------

[](#building-frond)

```
npm install                        # Install esbuild
npm run build:frond                # Build frond.min.js from TypeScript source
```

Framework Integration
---------------------

[](#framework-integration)

Every Tina4 backend framework ships with tina4-css pre-installed:

```
tina4 init    # Creates project with tina4.min.css + tina4.js + frond.min.js
```

### PHP

[](#php)

```
$tina4css = new \Tina4\Tina4CSS();
$tina4css->compile(__DIR__ . '/src/scss', 'tina4css');
```

### Python

[](#python)

```
from tina4_css import css_path, scss_path
# Auto-compiles SCSS from src/scss/ in dev mode
```

### Ruby

[](#ruby)

```
require "tina4-css"
Tina4CSS.css_path   # => "/path/to/tina4.min.css"
```

### Node.js

[](#nodejs)

```
import "tina4-css/dist/tina4.min.css";
```

Example
-------

[](#example)

See [example.html](example.html) for a complete showcase of all CSS components.

License
-------

[](#license)

MIT — see [LICENSE](LICENSE) for details.

---

Our Sponsors
------------

[](#our-sponsors)

**Sponsored with 💙 by Code Infinity**

[![Code Infinity](https://camo.githubusercontent.com/1516fb1662e3486bce77822177a5ea199edc32ea109369812592ec9bca38159a/68747470733a2f2f636f6465696e66696e6974792e636f2e7a612f77702d636f6e74656e742f75706c6f6164732f323032352f30392f6338652d6c6f676f2d6769746875622e706e67)](https://codeinfinity.co.za/about-open-source-policy?utm_source=github&utm_medium=website&utm_campaign=opensource_campaign&utm_id=opensource)

*Supporting open source communities . Innovate . Code . Empower*

###  Health Score

39

—

LowBetter than 85% of packages

Maintenance90

Actively maintained with recent releases

Popularity6

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 87.5% 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 ~16 days

Total

4

Last Release

50d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/82961293?v=4)[Tina4](/maintainers/tina4stack)[@tina4stack](https://github.com/tina4stack)

---

Top Contributors

[![andrevanzuydam](https://avatars.githubusercontent.com/u/6102941?v=4)](https://github.com/andrevanzuydam "andrevanzuydam (14 commits)")[![CrisHigham](https://avatars.githubusercontent.com/u/62340127?v=4)](https://github.com/CrisHigham "CrisHigham (2 commits)")

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/tina4stack-tina4css/health.svg)

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

###  Alternatives

[shopware/platform

The Shopware e-commerce core

3.4k1.5M3](/packages/shopware-platform)[october/rain

October Rain Library

1581.7M73](/packages/october-rain)[shopware/storefront

Storefront for Shopware

674.4M208](/packages/shopware-storefront)[contao/core-bundle

Contao Open Source CMS

1231.6M2.6k](/packages/contao-core-bundle)[microweber/microweber

New generation CMS with drag and drop

3.4k13.9k1](/packages/microweber-microweber)[contao/contao

Contao Open Source CMS development package

42614.3k2](/packages/contao-contao)

PHPackages © 2026

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