Contenido

CSScaffold, framework CSS en PHP

9 Oct

+ 6

CSScaffold es un framework CSS con el que podemos extender las posibilidades de nuestros CSS desde PHP. Básicamente se trata de un script PHP que recoge los ficheros .CSS a tratar y mediante una nomenclatura (que veremos más adelante) nos genera unos ficheros CSS que cualquier navegador podrá interpretar.

scaffold-diagram
(Ver Imagen)

// Ejemplo de uso:
<link href="/scaffold/index.php?request=/css/master.css" />

Funcionalidades

Entre las funcionalidades que nos podemos encontrar y que extienden las posibilidades del CSS, cabe destacar:

Constantes

// Definición
@constants {
 text_color:#555;
 color_1:#999;
}

// Uso
body
{
 color:!text_color;
}

Como vemos podemos especificar valores estáticos para usar a lo largo del fichero CSS. Pudiendo reemplazarlos fácilmente en un solo lugar.

Mixins

// Declaración
=mixin-name(!param, !param2 = 0){
 color:!param;
 border: !param2 solid #eee;
}

// Uso
#content{
 +mixin-name(#eee);

 padding:10px;
 border:1px solid #eee;
}

Se trata de un sistema de disponer de funciones en nuestros CSS.

Selectores anidados

// Uso
#id{
 border:1px;

 h1,h2,h3
 {
 color:red;

 a div, blockquote, mark
 {
 margin:10px;
 }

 &.span
 {
 padding:10px;
 }
 }
}

Interesante capacidad de permitirnos usar selectores anidados para mostrar más claramente la especifidad del selector.

// Uso
a{
 color:#fff;
 &:hover { text-decoration:underline; }
}

// Resultado
a { color:#fff; }
a:hover { text-decoration:underline; }

Además, mediante el uso de & podemos hacer referencia al selector actual.

Expresiones

// Uso
#id{
 padding:#[10*4]px;
}

La capacidad de usar expresiones para parametrizar nuestros diseños.

Instalación

La instalación, tan sencilla que puede ser usada en cualquier aplicación sin tener que invertir una gran cantidad de tiempo en configurarlo.

  1. Descargamos el fichero.
  2. Copiamos el fichero scaffold/ en nuestro directorio de CSS
  3. Configuramos el fichero scaffold/config.php
  4. Añadimos permisos de escritura a la carpeta scaffold/cache/
  5. Reemplazamos las llamadas a  nuestros CSSs
// Antes
<link href="screen.css" />

// Con CSScaffold
<link href="scaffold/index.php?request=screen.css" />

// Con CSScaffold sin caché
<link href="scaffold/index.php?request=screen.css&recache" />

Útil y práctico para hacernos ahorrar unos valiosos minutos a la hora de trabajar con CSS’s.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.