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

ActiveLibrary

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

Tina4 CSS - A lightweight responsive CSS framework

v2.0.1(1w ago)00MITSCSSPHP &gt;=8.1CI passing

Since Mar 14Pushed 4d agoCompare

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

READMEChangelog (1)Dependencies (2)Versions (3)Used By (0)

Tina4 CSS
=========

[](#tina4-css)

A lightweight, responsive CSS framework built with SCSS — comparable to Bootstrap but much smaller (~24KB minified). Works with **any** web framework: PHP, Python, Ruby, JavaScript, or plain HTML.

Features
--------

[](#features)

- **12-column flexbox grid** with responsive breakpoints (`sm`, `md`, `lg`, `xl`, `xxl`)
- **Buttons** — solid, outline, sizes (sm, lg, block)
- **Forms** — inputs, selects, textareas, checkboxes, radios, validation states, input groups
- **Cards** — header, body, footer, image top
- **Navigation** — navbar (light/dark), nav links, breadcrumbs, responsive toggler
- **Modals** — dialog, header/body/footer, backdrop, sizes (sm, lg)
- **Alerts** — all theme colors, dismissible
- **Tables** — bordered, striped, hover, compact, responsive
- **Badges** — all theme colors, pill shape
- **Typography** — headings, lead, blockquote, code, kbd, lists
- **Utilities** — display, flex, spacing (margin/padding 0-5), text, background colors, borders, shadows, width/height, position, visibility
- **Fully themeable** — override all colors in a single file
- **CSS Custom Properties** — runtime access to all design tokens via `--t4-*` variables

Installing
----------

[](#installing)

Choose your package manager:

```
# 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 CSS file — no build tools needed
curl -o tina4.min.css https://raw.githubusercontent.com/tina4stack/tina4-css/main/dist/tina4.min.css
```

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

[](#quick-start)

### Plain HTML (zero dependencies)

[](#plain-html-zero-dependencies)

Download `dist/tina4.min.css` and link it:

```

```

### PHP (Tina4 or any framework)

[](#php-tina4-or-any-framework)

```
use Tina4\Tina4CSS;

$css = new Tina4CSS('./public/css');
$css->compile(__DIR__ . '/vendor/tina4stack/tina4css/src/scss', 'tina4css');
```

### Python (Tina4 or any framework)

[](#python-tina4-or-any-framework)

Tina4 Python auto-compiles SCSS from `src/scss/`. Copy the SCSS files there, or use the pre-compiled CSS:

```
# Option 1: Use pre-compiled CSS (copy to your static folder)
from tina4_css import css_path
print(css_path())  # "/path/to/tina4_css/dist/tina4.min.css"

# Option 2: Copy SCSS to src/scss/ for theming
from tina4_css import scss_path
print(scss_path())  # "/path/to/tina4_css/scss/"
```

Or simply copy `dist/tina4.min.css` into `src/public/css/`:

```
cp $(python -c "from tina4_css import css_path; print(css_path())") src/public/css/tina4.min.css
```

### Ruby (Tina4 or any framework)

[](#ruby-tina4-or-any-framework)

```
require "tina4-css"

# Get path to pre-compiled CSS
Tina4CSS.css_path          # => "/path/to/tina4.min.css"
Tina4CSS.scss_path         # => "/path/to/scss/"
```

### JavaScript / Node.js

[](#javascript--nodejs)

```
// Import the CSS path
const path = require("path");
const cssPath = path.join(require.resolve("tina4-css"), "..", "dist", "tina4.min.css");

// Or import in your bundler (Vite, Webpack, etc.)
import "tina4-css/dist/tina4.min.css";
```

Theming
-------

[](#theming)

Create a `theme.scss` file in your project. Define your colors **before** importing the framework — all variables use `!default` so yours take priority:

```
// theme.scss — Your custom theme

// Override any of these colors
$primary:   #e74c3c;
$secondary: #2c3e50;
$success:   #27ae60;
$danger:    #c0392b;
$warning:   #f39c12;
$info:      #3498db;
$light:     #ecf0f1;
$dark:      #2c3e50;

// Override typography
$font-family-base: 'Inter', sans-serif;
$border-radius: 0.5rem;
$spacer: 1rem;

// Import the framework — your variables cascade through everything
@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 widthComponents
----------

[](#components)

### Grid

[](#grid)

```

    Responsive column
    Responsive column
    Responsive column

```

### 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. &times;

```

### Tables

[](#tables)

```

  NameEmail
  Andreandre@example.com

```

### Navigation

[](#navigation)

```

  My App

    Home
    About

```

### Badges

[](#badges)

```
New
5
```

### Modals

[](#modals)

```

      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`CSS Custom Properties
---------------------

[](#css-custom-properties)

All design tokens are exposed as CSS custom properties for runtime use:

```
: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);
  /* ...and more */
}
```

Example
-------

[](#example)

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

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

[](#file-structure)

```
tina4-css/
├── dist/                          # Pre-compiled CSS (ready to use)
│   ├── tina4.css                  # Expanded (~30KB)
│   ├── tina4.min.css              # Minified (~24KB)
│   ├── base.min.css               # Base only (no colors)
│   └── colors.min.css             # CSS custom properties only
├── src/
│   ├── app/
│   │   └── Tina4CSS.php           # PHP SCSS compiler class
│   └── 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
│   └── __init__.py                # css_path(), scss_path() helpers
├── composer.json                  # PHP package
├── package.json                   # npm package
├── pyproject.toml                 # Python package
├── tina4-css.gemspec              # Ruby gem
└── example.html                   # Full component showcase

```

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

[](#framework-integration)

### Tina4 PHP

[](#tina4-php)

```
// Auto-loaded when installed via composer
$tina4css = new \Tina4\Tina4CSS();
$tina4css->compile(__DIR__ . '/src/scss', 'tina4css');
```

### Tina4 Python

[](#tina4-python)

The framework auto-compiles any SCSS in `src/scss/`. To use tina4-css with custom theming:

1. Copy the SCSS files to `src/scss/`
2. Create your `theme.scss` with overrides
3. The framework compiles everything on startup

Or just use the pre-compiled CSS — copy `dist/tina4.min.css` to `src/public/css/`.

### Tina4 Ruby

[](#tina4-ruby)

```
# In your app, copy the CSS to your public folder or
# configure your asset pipeline to include the gem's dist/ path
require "tina4-css"
```

### Tina4 JS

[](#tina4-js)

```
// In your entry point or HTML
import "tina4-css/dist/tina4.min.css";
```

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 87% of packages

Maintenance99

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 83.3% 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

8d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/1f5b9029a2a1d8a442e33ae01ba9ea43eada3c842edfa785a74304c7cd6ed0f9?d=identicon)[tina4stack](/maintainers/tina4stack)

---

Top Contributors

[![andrevanzuydam](https://avatars.githubusercontent.com/u/6102941?v=4)](https://github.com/andrevanzuydam "andrevanzuydam (10 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.3k1.5M3](/packages/shopware-platform)[bk2k/bootstrap-package

Bootstrap Package delivers a full configured frontend theme for TYPO3, based on the Bootstrap CSS Framework.

356869.7k64](/packages/bk2k-bootstrap-package)[october/rain

October Rain Library

1591.6M52](/packages/october-rain)[contao/core-bundle

Contao Open Source CMS

1231.6M2.1k](/packages/contao-core-bundle)[shopware/storefront

Storefront for Shopware

684.0M129](/packages/shopware-storefront)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

44542.4k1](/packages/pressbooks-pressbooks)

PHPackages © 2026

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