ramiro/css-ext

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

dev-main 2021-05-19 16:30 UTC

Requires

• ramiro/html-wrapper: dev-main

Requires (Dev)

• phpunit/phpunit: ^9.5-dev

MIT

• rgg7888

README

Extension Css para html - armor

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

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

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

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

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

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

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;"
    ]
]);