PHPackages                             zulfiismailovdemiri/wkcss - 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. zulfiismailovdemiri/wkcss

ActiveLibrary[Framework](/categories/framework)

zulfiismailovdemiri/wkcss
=========================

A lightweight CSS utility framework.

2.0.0(1y ago)010MITPHPPHP >=8.2

Since Nov 24Pushed 1y ago1 watchersCompare

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

READMEChangelogDependencies (1)Versions (10)Used By (0)

WK CSS Framework
================

[](#wk-css-framework)

A lightweight CSS utility framework to generate reset styles, utility classes, and component classes for rapid front-end development.

---

**Features**
------------

[](#features)

- **Base CSS**: Includes comprehensive reset and global styles (`base.css`) for consistent cross-browser styling.
- **Utility Classes**: Provides spacing, colors, typography, and flex/grid utilities (`utilities.css`).
- **Component Classes**: Includes pre-defined reusable components like grids and flex utilities (`components.css`).
- **CLI Tool**: Generate CSS files with a single command for seamless integration into any project.
- **Laravel Mix Support**: Easy integration into Laravel projects for streamlined development.

---

**Installation**
----------------

[](#installation)

1. **Add the Package**: Install the package using Composer:

    ```
    composer require yourname/wk-css-framework
    ```
2. **Generate CSS Files**: Run the command to generate CSS files:

    ```
    vendor/bin/wkcss
    ```
3. **Output Directory**: The generated CSS files will be located in the `output/` directory:

    - `base.css`: Reset styles
    - `utilities.css`: Utility classes
    - `components.css`: Component classes

---

**Integration in Frontend Using Laravel Mix**
---------------------------------------------

[](#integration-in-frontend-using-laravel-mix)

### **Step 1: Install Laravel Mix**

[](#step-1-install-laravel-mix)

If Laravel Mix is not already set up in your project, install it with NPM:

```
npm install laravel-mix --save-dev
```

---

### **Step 2: Configure `webpack.mix.js`**

[](#step-2-configure-webpackmixjs)

Update your `webpack.mix.js` file to include the generated CSS files:

```
const mix = require('laravel-mix');

mix.setPublicPath('public'); // Output directory for compiled assets

mix.styles([
    'vendor/yourname/wk-css-framework/output/base.css',
    'vendor/yourname/wk-css-framework/output/utilities.css',
    'vendor/yourname/wk-css-framework/output/components.css',
    'resources/css/app.css', // Your custom CSS
], 'public/css/app.css'); // Output file
```

---

### **Step 3: Compile Assets**

[](#step-3-compile-assets)

1. Run Laravel Mix to compile and concatenate the CSS files:

    ```
    npx mix
    ```
2. For production, add optimizations:

    ```
    npx mix --production
    ```

---

### **Step 4: Include in Your Application**

[](#step-4-include-in-your-application)

Add the compiled `app.css` file to your HTML or Blade templates:

```

```

---

**Example Output**
------------------

[](#example-output)

### **Base CSS (`base.css`)**

[](#base-css-basecss)

Contains browser reset styles:

```
body, h1, h2, h3, p, ul, ol, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```

### **Utilities CSS (`utilities.css`)**

[](#utilities-css-utilitiescss)

Provides utility classes for common styling needs:

#### **Spacing:**

[](#spacing)

```
.m-0 { margin: 0px; }
.m-1 { margin: 4px; }
.p-0 { padding: 0px; }
.p-1 { padding: 4px; }
```

#### **Colors:**

[](#colors)

```
.text-red { color: #ff0000; }
.bg-blue-500 { background-color: #0000ff; }
```

#### **Typography:**

[](#typography)

```
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
```

### **Component Classes (`components.css`)**

[](#component-classes-componentscss)

Includes reusable classes like flex and grid systems:

#### **Flexbox Utilities:**

[](#flexbox-utilities)

```
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
```

#### **Grid Utilities:**

[](#grid-utilities)

```
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
```

---

**Customization**
-----------------

[](#customization)

1. **Change Spacing Multipliers**: Update the multiplier in `CSSGenerator.php` to control spacing:

    ```
    private const SPACING_MULTIPLIER = 8; // Changes spacing from 4px to 8px increments
    ```
2. **Add Custom Colors**: Modify the `ColorHelper` class to define additional colors:

    ```
    public static function getBasicColors(): array
    {
        return [
            'custom' => '#123456',
            'primary' => '#007bff',
            'secondary' => '#6c757d',
        ];
    }
    ```

---

**Future Enhancements**
-----------------------

[](#future-enhancements)

- **Responsive Utilities**: Add support for responsive breakpoints (e.g., `sm:m-1`, `lg:p-2`).
- **Custom Configuration**: Allow user-defined configurations for spacing, colors, and utilities.

---

**License**
-----------

[](#license)

Licensed under the [MIT License](LICENSE).

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance38

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity57

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

9

Last Release

534d ago

Major Versions

1.0.8 → 2.0.02024-11-24

### Community

Maintainers

![](https://www.gravatar.com/avatar/80a0541df33d38d011ca7e78c9f749a382c00cd1a2c0681c49905059131103fa?d=identicon)[zulfiismailovdemiri](/maintainers/zulfiismailovdemiri)

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/zulfiismailovdemiri-wkcss/health.svg)

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

###  Alternatives

[laravel/telescope

An elegant debug assistant for the Laravel framework.

5.2k67.8M192](/packages/laravel-telescope)[spiral/roadrunner

RoadRunner: High-performance PHP application server and process manager written in Go and powered with plugins

8.4k12.2M84](/packages/spiral-roadrunner)[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.

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

A simple API extension for DateTime.

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

PHPackages © 2026

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