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 v2.0.1(1mo ago)00MITSCSSPHP >=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 1mo ago 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. × ``` ### 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 38 — LowBetter than 84% of packages Maintenance96 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 55d 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)[october/rain October Rain Library 1601.7M62](/packages/october-rain)[contao/core-bundle Contao Open Source CMS 1231.6M2.3k](/packages/contao-core-bundle)[microweber/microweber New generation CMS with drag and drop 3.4k13.8k1](/packages/microweber-microweber)[shopware/storefront Storefront for Shopware 684.2M147](/packages/shopware-storefront) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)