PHPackages                             cryodrift/gcss - 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. cryodrift/gcss

ActiveLibrary[Framework](/categories/framework)

cryodrift/gcss
==============

Css Framework

0.1.30(4mo ago)0144MITCSSPHP >=8.4

Since Jan 15Pushed 4mo agoCompare

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

READMEChangelogDependencies (1)Versions (30)Used By (4)

GCSS Framework
==============

[](#gcss-framework)

A lightweight CSS framework created by @chrisgab in 2025. GCSS provides a comprehensive set of utility classes for building responsive web interfaces.

Overview
--------

[](#overview)

GCSS is a utility-first CSS framework that maps CSS rules to classnames with a consistent naming convention. Key features include:

- Custom CSS reset
- Responsive design with screen-size specific classes
- CSS variables for consistent styling
- Shorthand classes for common UI components
- Intuitive naming convention with prefixes

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

[](#file-structure)

- **g.css** - Main CSS file with utility classes
- **gvars.css** - CSS variables for colors, spacing, sizing, etc.
- **greset.css** - CSS reset rules
- **gtags.css** - CSS rules for HTML tags
- **gl.css** - Large screen specific styles (min-width: 1080px)
- **gs.css** - Small screen specific styles (max-width: 1080px)
- **Css.php** - PHP handler for combining and serving CSS files
- **Shorts.php** - PHP handler for shorthand class combinations
- **config.php** - Configuration for routing and handlers

Class Naming Convention
-----------------------

[](#class-naming-convention)

Classes in GCSS follow a consistent naming pattern:

- **Prefix**: `g-` for all screens, `gl-` for large screens, `gs-` for small screens
- **Property**: First letter abbreviation of CSS property (p=padding, m=margin, w=width, d=display, t=text, b=border, etc.)
- **Value**: Numeric or descriptive value

For example:

- `g-p1` - Padding level 1 (--r-p1) on all screens
- `gl-fr` - Flex row layout on large screens
- `gs-dn` - Display none on small screens

### Negative Classes

[](#negative-classes)

GCSS uses negative classes to remove specific properties. For example:

- `g-b` adds a border
- `g-bb` removes the bottom border

Common UI Components
--------------------

[](#common-ui-components)

GCSS provides shorthand classes for common UI components through the Shorts.php handler:

```
g-box         -> g-b g-p1
g-box-round   -> g-b g-btr g-bbr g-p1
g-box-head    -> g-b g-bb g-btr g-p1
g-box-body    -> g-b g-bb g-p1
g-box-foot    -> g-b g-bbr g-p1 g-tjcb
g-container   -> gl-fr g-fw
g-row         -> g-fw gl-fr g-tjcb g-bbr g-btr g-b g-p1 g-ph g-mhc g-phc
g-button      -> g-tusn g-b g-btr g-bbr g-p1 g-fwm

```

Responsive Design
-----------------

[](#responsive-design)

GCSS handles responsive design through screen-specific prefixes:

- `g-` classes apply to all screen sizes
- `gl-` classes only apply to large screens (min-width: 1080px)
- `gs-` classes only apply to small screens (max-width: 1080px)

CSS variables are automatically adjusted based on screen size.

Usage
-----

[](#usage)

To use GCSS in your project:

1. Include the CSS via the handler:

    ```

    ```
2. For minimal reset (without greset.css):

    ```

    ```
3. Apply classes to your HTML elements:

    ```

      Header
      Content
      Footer

    ```

Todo
----

[](#todo)

- Create a new example UI with all elements

License
-------

[](#license)

Created by @chrisgab 2025

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance78

Regular maintenance activity

Popularity6

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

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

29

Last Release

120d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ecdd6c6fb232df96deef400795e50ea4f5c57c18416031ff0b1b790673094945?d=identicon)[cryodrift](/maintainers/cryodrift)

### Embed Badge

![Health badge](/badges/cryodrift-gcss/health.svg)

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

###  Alternatives

[laravel/passport

Laravel Passport provides OAuth2 server support to Laravel.

3.4k85.0M532](/packages/laravel-passport)[nolimits4web/swiper

Most modern mobile touch slider and framework with hardware accelerated transitions

41.8k177.2k1](/packages/nolimits4web-swiper)[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k36.7M259](/packages/laravel-dusk)[laravel/prompts

Add beautiful and user-friendly forms to your command-line applications.

712181.8M596](/packages/laravel-prompts)[cakephp/chronos

A simple API extension for DateTime.

1.4k47.7M121](/packages/cakephp-chronos)[laravel/pail

Easily delve into your Laravel application's log files directly from the command line.

91545.3M590](/packages/laravel-pail)

PHPackages © 2026

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