PHPackages                             ramiro/css-ext - 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. ramiro/css-ext

ActiveLibrary

ramiro/css-ext
==============

extension para crear selectores , queries y, propiedades css en html-armor templates

0151PHP

Since May 19Pushed 5y ago1 watchersCompare

[ Source](https://github.com/rgg7888/cssExt)[ Packagist](https://packagist.org/packages/ramiro/css-ext)[ RSS](/packages/ramiro-css-ext/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

cssExt
======

[](#cssext)

Extension Css para html - armor
-------------------------------

[](#extension-css-para-html---armor)

### Helpers

[](#helpers)

- css (array $selectores\_propiedades)
- style($content = null,array $atributos = \[\])
- sye(array $propiedades,string $selector = "",int $serie = 0,$jump = false)

 por el momento la funcion sye se utiliza para crear propiedades, selectores e importar fonts.

 tambien cuenta con unas habilidades especiales que te permiten crear serie de selectores y patrones de los mismos.

puede utilizar style() pero se recomienda utilizar css() para agregar el estilo css en la etiqueta head directamente o bien puede utilizar la funcion lnk() implementada en el paquete html-tags para agregar archivos css externos.

Ejemplos de uso
---------------

[](#ejemplos-de-uso)

### Para importar una fuente

[](#para-importar-una-fuente)

```
css([
    sye([
        'import' => "https://fonts.googleapis.com/css2?family=Lato&display=swap"
    ])
]);
```

### Para importar una fuente y agregar nuestro primer selector

[](#para-importar-una-fuente-y-agregar-nuestro-primer-selector)

```
css([
    sye([
        'import' => "https://fonts.googleapis.com/css2?family=Lato&display=swap"
    ]),
    sye([
        'display' => 'grid',
        'grid-template-columns' => 'repeat(3, 1fr)',
        'grid-gap' => '5px',
        'font-family' => '"Lato", sans-serif',
        'width' => '550px'
    ],".wrapper")
]);
```

Serie de selectores con el mismo estilo
---------------------------------------

[](#serie-de-selectores-con-el-mismo-estilo)

por ejemplo quiere crear algo asi
.class, .class1, class2 { propertie1,properti2,propertie3}

Entonces utilize la funcion sye asi:

```
sye([
    'width' => '60px',
    'height' => '60px',
    'text-align' => 'center',
    'padding-top' => '10px',
    'box-sizing' => 'border-box'
],".element",10)
```

Serie de selectores con la misma propiedad pero diferente valor
---------------------------------------------------------------

[](#serie-de-selectores-con-la-misma-propiedad-pero-diferente-valor)

por ejemplo quiere crear algo asi
.class1{ propertie:value1}
.class2{ propertie:value2}
.class3{ propertie:value3}

Entonces utilize la funcion sye asi:

```
sye([
    'background',
    'papayawhip',
    'papayawhip',
    'papayawhip',
    'pink',
    'pink',
    'pink',
    'lightcyan',
    'lightcyan',
    'lightcyan'
],".element",10,true)
```

@Media Queries
--------------

[](#media-queries)

 para los media queries tenemos la funcion media() esta funcion recibe un array por arguento.

 Toma en cuenta que esta funcion puede crear solamente 3 breakpoints diferentes. 480px , 768px y 1024px.

 Tambien es posible crear estilos para selectores pero el formato es mas manual respecto a las propiedades y sus valores

Ejemplo de uso
--------------

[](#ejemplo-de-uso)

 Supongamos que queremos crear un break point de 480px y agregarle selectores y sus propiedades css.

```
media([
    '480' => [
        '.brand' => 'background: #cbb09c !important;'
    ]
]);
```

Con lo anterior se creara el media querie y en su interior los estilos que queramos aplicar a pantallas con un ancho de no mas de 480px. Tambien es posible agregar multiples break poins a la vez.

```
media([
    '480' => [
        '.brand' => 'background: #cbb09c !important;'
    ],
    '780' => [
        '.brand-text' => 'color: #cbb09c !important;'
    ],
    '1024' => [
        'form' => [
            "max-width: 460px;",
            "margin: 20px auto;",
            "padding: 20px;"
        ]
    ]
]);
```

 finalmente si solo queremos crear los estilos para los selectores simplemente no le agregamos el break point a el arreglo y le pasamos los selectore y propiedades directamente asi :

```
media([
    ".brand" => [
                "background: #cbb09c !important;"
    ],
    ".brand-text" => [
        "color: #cbb09c !important;"
    ],
    "form" => [
        "max-width: 460px;",
        "margin: 20px auto;",
        "padding: 20px;"
    ]
]);
```

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

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

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/333731?v=4)[Rami Grossman](/maintainers/ramigg)[@ramigg](https://github.com/ramigg)

---

Top Contributors

[![rgg7888](https://avatars.githubusercontent.com/u/80013616?v=4)](https://github.com/rgg7888 "rgg7888 (7 commits)")

### Embed Badge

![Health badge](/badges/ramiro-css-ext/health.svg)

```
[![Health](https://phpackages.com/badges/ramiro-css-ext/health.svg)](https://phpackages.com/packages/ramiro-css-ext)
```

PHPackages © 2026

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