[SOLUCIONADO] Creando un theme profesional en css

[nes24]

Hola, quisiera crear un theme css profesional, es decir salir del clasico css y pasar a usar herramientas, framewordks, patrones, lineamientos, trukitos en js y css como para que el theme algo inovador.

Que me recomiendan ?
Que concejos me dan.

Gracias.

[pzin]

No hay herramientas mágicas.

Puedes usar cosas tipos Sass para facilitar el desarrollo, o programas tipo CodeKit para trabajar más rápido, pero para que algo luzca profesional e innovador, se tiene que partir de unas ideas profesionales e innovadoras junto a un buen e imprescindible conocimiento de CSS.

Y otro consejo, es escribir consejo con ese.

[nes24]

Y tienes artículos donde se especifique unos lineamientos mínimos o standar de optimizon ???

Iniciado por Bonez

No hay herramientas mágicas.

Puedes usar cosas tipos Sass para facilitar el desarrollo, o programas tipo CodeKit para trabajar más rápido, pero para que algo luzca profesional e innovador, se tiene que partir de unas ideas profesionales e innovadoras junto a un buen e imprescindible conocimiento de CSS.

Y otro consejo, es escribir consejo con ese.

[ArturoGallegos]

Como ya te dijeron no hay herramientas mágicas, en lo personal para que un theme luzca profesional e innovadora se requiere de una persona creativa que diseñe un buen theme.

Seguido de eso un buen codificador HTML + CSS, que siga los lineamientos mínimos de:
- no usar CSS en linea.
- no usar Hacks CSS o trucos de antaño.
- siempre usar HTML y CSS valido.
- código limpio y ordenado.
- optimizar el código utilizando métodos abreviados y no repetir lineas de código innecesarias.
- preferentemente todo el código creado a mano, para evitar el código basura de algunas aplicaciones.

Si entiendes esos puntos ya solo te falta tener un buen conocimiento de HTML + CSS

:D bueno esos son los puntos básicos que yo consideraría, habrá quien te agregue mas o te quite.

[nes24]

Eso es justo lo que estoy esperando ese tipo de concejos.

Lo de las sintaxis y eso no me preocupa, pero si por ejemplo parámetros de calidad. Forma de llamar las cosas, tabulados, de pronto librerias standar no se que bien sea usar normalize.css yo que se amm usar em en vez de px.

En fin, hay el que quiera ayudar con mas cosas le agradezco.

[ArturoGallegos]

lo de usar em en lugar de px es cuestión de gustos y requerimientos del diseño, al igual de usar % en lugar de pixeles para las medidas... todo sistema de medidas tiene sus pros y sus contras, evalúa el proyecto y decide que es mas conveniente.

en cuanto a usar normalize.css según recuerdo es un reset CSS, yo en su tiempo usaba el reset de Yahoo que a mi gusto era el mejor... actualmente por cuestión de optimizar yo cree mi propio reset

es decir reseteo manualmente los elementos que considero son necesarios, ya que normalize y otros pueden ser algo largos e incluir etiquetas que realmente necesitas resetear ya que no las usas.

yo uso una template CSS en todos mis proyectos y si requiero resetear algún elemento mas lo añado en el momento.

Código CSS:

@charset "UTF-8";
html,body{height:100%;}html,body,h1,h2,h3,h4,h5,h6,p,ul,table,td,th,tbody,thead,tfoot,img,input,select,textarea,a{margin:0;padding:0;font-size:100%;line-height:1;border:none;border-collapse:collapse;border-spacing:0;text-decoration:none;}p{padding-bottom:15px;}ul{margin-left:25px;}
 

[webosiris]

a nivel de resets, yo uso uno muy muy muy básico que básicamente es lo siguiente:

Código CSS:

*{margin:0;padding:0;border:0;}
 

nunca me gustaron esos resets de 1500 líneas, me parecen más complicaciones que otra cosa.
nombres de clases y este tipo de cosas no están muy normalizadas, así que no vas a encontrar una "regla", pero si debes de evitar usar nombres que describan apariencia.

Ejemplo de lo que estaría mal:

Código CSS:

.borde_rojo{}
 

porqué está mal? porque después el diseño se va cambiando, se pueden sobreescribir al vuelo ciertos valores, etc y al final te queda

Código CSS:

.borde_rojo{border:1px solid green}
 

lo cual no tiene mucho sentido.

[nes24]

Oye super super, esta socializacion resulta interesante, en cuanto a lo que dices usarias estilos digamos de esta forma .

<div id="productoDestacado" class="grande lienaverde fondodegradado"><div>


.grande{ medidas del div }
.lineaverde{ estilo de linea verde}
.fondodegradado{ con css3 una propiedad que vuelva degradado el fondo SIN especificar color, para eso en #productoDestacado se diria que color se quiere}

Que opinas de esto???

[ArturoGallegos]

Creo que lo básico que buscabas ya se ha dicho y la practica hace al maestro, en el proceso de aprendizaje te saldrán miles de dudas como esta ultima que planteas.... cosa que nosotros no te podemos resolver, como dije la practica hace al maestro, si te funciona y crees que es lo mas optimo para tu proyecto eso esta bien.

No existen reglas absolutas de lo que debas hacer y/o no hacer, este mundo es tan flexible como lo necesites... con el tiempo estoy seguro que crearas tu propio estilo de codificación.

Cuando tengas problemas vuelve a consultarnos y con gusto te ayudamos.

[webosiris]

Iniciado por nes24

en cuanto a lo que dices usarias estilos digamos de esta forma [..] Que opinas de esto???

pues justamente esa es la forma que digo NO hay que usar.... ¿no se entendió mi mensaje?

Iniciado por webosiris

nombres de clases y este tipo de cosas no están muy normalizadas, así que no vas a encontrar una "regla", pero si debes de evitar usar nombres que describan apariencia.

[Carlangueitor]

Iniciado por webosiris

a nivel de resets, yo uso uno muy muy muy básico que básicamente es lo siguiente:

Código CSS:

*{margin:0;padding:0;border:0;}
 

"Históricamente" el selector universal era una carga en el rendimiento, así que se desaconsejaba mucho su uso, por ejemplo en artículos como este: https://developer.mozilla.org/en-US/..._Efficient_CSS Ahora en los navegadores modernos no se nota esa carga extra.

Por ahora hay unas formas muy interesantes de usar el selector universal: http://css-tricks.com/things-it-migh...l-selector-on/

El problema con usar el selector universal es que hay cosas que no deberías tener padding/margin/border en 0, por ejemplo inputs de un formulario. En algunos casos prefiero no tener que volver a escribir todo.

Tampoco me gustan esos resets gigantes así que regularmente (ya tiene un rato que no maqueto) escribo reglas de reset adecuadas al proyecto que estoy.

Saludos

[pzin]

Con el tema de resets prefiero el simple que comenta webosiris añadiendo box-sizing.

Yo no entiendo otro tipo de resets. Aquellos con mil y un elementos, que resetean cosas que no voy a usar y al final no es más —casi— que una expansión del selector universal. Luego aquellos que no son resets, tipo normalize, tampoco se me hace usarlos porque al final tengo que adaptar cosas y es tener código por tener.

Iniciado por Carlangueitor

El problema con usar el selector universal es que hay cosas que no deberías tener padding/margin/border en 0, por ejemplo inputs de un formulario. En algunos casos prefiero no tener que volver a escribir todo.

Pero eso va a pasar con muchos elementos, por ejemplo los párrafos tendrán un margen siempre también. Pero vaya, es que al final un reset no es para ahorrar código sino para eliminar los valores por defecto de los navegadores y partir de una base igual para todos ellos.

De hecho lo ideal para maquetear un sitio sería que todos los navegadores tuvieran todo a cero.

[Linton]

Iniciado por webosiris

...nunca me gustaron esos resets de 1500 líneas, me parecen más complicaciones que otra cosa.

Iniciado por Carlangueitor

Tampoco me gustan esos resets gigantes así que regularmente (ya tiene un rato que no maqueto) escribo reglas de reset adecuadas al proyecto que estoy...

Iniciado por Bonez

Con el tema de resets prefiero el simple que comenta webosiris añadiendo box-sizing...

¡Hombre, no estoy solo!

Nes24, empápate bien todos los manuales de CSS que puedas, al tiempo que sigues esta saludable práctica.

[nes24]

Hola a a todos, antes que nada no soy novato, llevo mucho tiempo usando javascriopt y css, solo me interesa socializar con ustedes sus opiniones con respecto a un tema y saben que les digo: Me encanta sus opiniones.

este link,
https://developer.mozilla.org/en-US/..._Efficient_CSS

me pareció simplemente estupendo y de seguro sea de utilidad a muchos. La verdad aunque css sea una tecnologia liviana merece toda la atencion del mundo y no hay un conosimiento absoluto o total, siempre sera bueno discutir la forma como usamos las cosas y los nuevos consejos que se puedan dar.

[leoass]

Iniciado por nes24

Que me recomiendan ? Que concejos me dan. Gracias.

Iniciado por nes24

Eso es justo lo que estoy esperando ese tipo de concejos.

Entonces todos juntos decimos. C-O-N-S-E-J-O. s s S

[ArturoGallegos]

Hola a todos, antes que nada no soy novato, llevo mucho tiempo usando javascriopt y css, solo me interesa socializar con ustedes sus opiniones con respecto a un tema

Si no eres un novato y eso es lo que buscas... no le veo finalidad a este tema, solo estamos perdiendo el tiempo.

Este es un foro de ayuda y soporte para cuando tengas problemas o dudas especificas, no es un sitio para socializar... si eso es lo que buscas, puedes encontrar facebook, google +, entre otros.

[pzin]

Yo creo que con socializar quería decir más bien debatir e intercambiar opiniones. :borrachos:

[nes24]

Sabes que es socializar? crees que puedes socializar??? donde esta escrito en el foro donde diga que NO se puede socializar, te parece algo de la nada socializar?????

Iniciado por ArturoGallegos

Si no eres un novato y eso es lo que buscas... no le veo finalidad a este tema, solo estamos perdiendo el tiempo.

Este es un foro de ayuda y soporte para cuando tengas problemas o dudas especificas, no es un sitio para socializar... si eso es lo que buscas, puedes encontrar facebook, google +, entre otros.

[ArturoGallegos]

Va!, te la compro pensando que como dice @Bonez, quisiste decir "debatir e intercambiar opiniones".

y claro se que significa la palabra, te la regreso y te invito a que busques que es un foro.... pero bueno ya mejor no digo nada que voy a desvirtuar aun mas el tema, que al final de cuentas en lo personal ya no le veo utilidad ni razón de existir de este tema, paso a dar de baja la suscripción al mismo :D