README

A lightweight, responsive CSS framework built with SCSS — comparable to Bootstrap but much smaller (~50KB minified). Part of the Tina4 PHP ecosystem.

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

composer require tina4stack/tina4css

Requirements

PHP >= 8.1
scssphp/scssphp ^2.0 (installed automatically)

Quick Start

<?php
require 'vendor/autoload.php';

use Tina4\Tina4CSS;

// Compile framework SCSS to CSS
$css = new Tina4CSS('./public/css');
$css->compile(__DIR__ . '/vendor/tina4stack/tina4css/src/scss', 'tina4css');

Then in your HTML:

<link rel="stylesheet" href="/public/css/tina4css.css">

Theming

Create a theme.scss file in your project's src/scss/ directory. Define your colors before importing the framework — all variables use !default so yours take priority:

// src/scss/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

Variable	Default	Description
`$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 stack	Base 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 width

Components

Grid

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
    <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
    <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
  </div>
</div>

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
<button class="btn btn-success btn-lg">Large Success</button>
<button class="btn btn-dark btn-block">Full Width</button>

Forms

<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-control" placeholder="you@example.com">
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="remember">
  <label class="form-check-label" for="remember">Remember me</label>
</div>

Cards

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Content goes here.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
  <div class="card-footer text-muted">Updated 3 mins ago</div>
</div>

Alerts

<div class="alert alert-success">Operation successful!</div>
<div class="alert alert-danger alert-dismissible">
  Error occurred. <button class="btn-close">&times;</button>
</div>

Tables

<table class="table table-striped table-hover">
  <thead><tr><th>Name</th><th>Email</th></tr></thead>
  <tbody><tr><td>Andre</td><td>andre@example.com</td></tr></tbody>
</table>

Navigation

<nav class="navbar navbar-dark">
  <a class="navbar-brand" href="#">My App</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
  </ul>
</nav>

Badges

<span class="badge badge-primary">New</span>
<span class="badge badge-danger">5</span>

Modals

<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Title</h5></div>
      <div class="modal-body"><p>Modal content.</p></div>
      <div class="modal-footer">
        <button class="btn btn-secondary">Close</button>
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Utility Classes

Category	Classes
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

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

See example.html for a complete showcase of all components.

File Structure

src/
├── app/
│   └── Tina4CSS.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 Module Integration

When used within a Tina4 project, the module auto-registers and compiles SCSS on load:

// index.php (auto-loaded by Tina4)
$tina4css = new \Tina4\Tina4CSS();
$tina4css->compile(__DIR__ . '/src/scss', 'tina4css');

License

MIT — see LICENSE for details.

Our Sponsors

Sponsored with 🩵 by Code Infinity

Supporting open source communities • Innovate • Code • Empower

tina4stack / tina4css

Maintainers

Package info

Statistics

Security