cssExt

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)