como implementan un UI Kit?

yuo2 · #1 (**permalink**) 23/07/2012, 18:08

Hola foreros del web, quisiera saber cual es la mejor manera de implementar en su web una de esas plantillas UI KIT en PSD .

Mayormente como lo harian? , maquetean como lo hacen en una web o mejor es usar liberias para interfaces web?

Por ejemplo esto es un psd UI KIT, y quiero implementar los botones,checkbox,etc a una pagina PHP, ASP, etc.

Gracias.

Edit: Tengo un mismo tema creado en la zona CSS, pero creo que esta pregunta debi hacerla aqui. Bueno si gusta el moderador puede borrar mi otro tema.
Gracias.

arturosl · #2 (**permalink**) 28/07/2012, 17:37

Primero que nada lo que haria seria exportar cada elemento de la UI por separa en formato .png o .jpg (depende del elemento) posteriormente haria su maquetado en html y despues en css.

Ejemplo:

Código HTML:

Ver original<body>
 
<form>
<input type="text">
<input type="submit">
</form>
 
</boy>

Posteriormente haria el css:

Código CSS:

Ver originalform input[type=text]{
background: url(images/bg_input.png) no-repeat;
height:35px;
width:220px;
}
 
form input[type=submit]{
background: url(images/bg_submit.png) no-repeat;
height:25px;
width:50px;
}

Donde la imagen del input text seria el cuadro de texto donde insertamos valga la redundancia el texto y la imagen del input submit seria la imagen de la lupa.

Asi seria mas o menos lo que yo haria y como lo haria.

memoadian · #3 (**permalink**) 28/07/2012, 17:39

También usaria sprites para los diferentes backgrounds.