- 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.
css([ sye([ 'import' => "https://fonts.googleapis.com/css2?family=Lato&display=swap" ]) ]);
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") ]);
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)
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)
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
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;" ] ]);