Foros del Web » Creando para Internet » CSS »

Lo que puede lograrse con 1 sola clase.

Estas en el tema de Lo que puede lograrse con 1 sola clase. en el foro de CSS en Foros del Web. Leyendo el blog de Carlos Leopoldo me encuentro con un artículo de alguien que hizo un framework en CSS con sólo una línea de código ...
  #1 (permalink)  
Antiguo 13/06/2009, 14:35
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Lo que puede lograrse con 1 sola clase.

Leyendo el blog de Carlos Leopoldo me encuentro con un artículo de alguien que hizo un framework en CSS con sólo una línea de código. La clase en cuestión es ésta:

Código css:
Ver original
  1. .dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }
Miren todo lo que se puede hacer utilizando sólo esa clase :

- Ejemplo 1.

- Ejemplo 2.

- Ejemplo 3.

Esto es increíble; algún día espero tener esa clase de destreza. Armar una estructura tan compleja (y visible en todo navegador) usando una sola clase. Me quito el sombrero. Sencillamente genial.
  #2 (permalink)  
Antiguo 13/06/2009, 14:44
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Lo que puede lograrse con 1 sola clase.

Excelente aporte habra que ponerlo a prueba.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 13/06/2009, 14:49
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Lo que puede lograrse con 1 sola clase.

Hola:

Viendo estas genialidades a uno como yo que lleva poco tiempo con el css, le dan ganas de abandonar. Pero me sumo al comentario de Triby.

Saludos.

  #4 (permalink)  
Antiguo 13/06/2009, 14:54
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Lo que puede lograrse con 1 sola clase.

Muy buen aporte. Sería bueno poder lograr el golden ratio mediante esa Clase, pero lo veo difícil. Sin embargo, la cantidad de cosas que se pueden hacer es impresionante. Podrías hacer todo un layout con una sola clase. Sin duda que vale la pena guardarla en la caja de herramientas. No cabe duda que muchas veces no es el mucho conocimiento, sino la destreza que tengas para aplicarlo.

Pd. Ojo, que no insinúo que quien hizo ese CSS tenga poco conocimiento, solo digo que no se requiere mucho conocimiento para hacerlo, pero si mucha destreza y es ahí donde va el bien merecido mérito.
__________________
twitter: @imbuzu
  #5 (permalink)  
Antiguo 13/06/2009, 14:55
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Lo que puede lograrse con 1 sola clase.

Yo también me he quedado

Saludos,
  #6 (permalink)  
Antiguo 13/06/2009, 15:45
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Lo que puede lograrse con 1 sola clase.

Cita:
Iniciado por Triby Ver Mensaje
Excelente aporte habra que ponerlo a prueba.
sin duda!

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Viendo estas genialidades a uno como yo que lleva poco tiempo con el css, le dan ganas de abandonar. Pero me sumo al comentario de Triby.

Saludos.

No eres el único. Yo también me sentí como un pequeño ignorante ante tal demostración de genialidad. En esta carrera uno no se detiene de aprender (y sorprenderse).

Cita:
Iniciado por buzu Ver Mensaje
Muy buen aporte. Sería bueno poder lograr el golden ratio mediante esa Clase, pero lo veo difícil. Sin embargo, la cantidad de cosas que se pueden hacer es impresionante. Podrías hacer todo un layout con una sola clase. Sin duda que vale la pena guardarla en la caja de herramientas. No cabe duda que muchas veces no es el mucho conocimiento, sino la destreza que tengas para aplicarlo.

Pd. Ojo, que no insinúo que quien hizo ese CSS tenga poco conocimiento, solo digo que no se requiere mucho conocimiento para hacerlo, pero si mucha destreza y es ahí donde va el bien merecido mérito.
Más que destreza (porque la destreza es resultado directo del conocimiento y la práctica) creo que se trata de una dupla conocimiento + creatividad. La creatividad es lo que nos permite hacer cosas grandes con 2 o 3 lecciones bien aprendidas o, en otras palabras, saber usar bien lo poco que hasta el momento se conoce.

Sin embargo, no dudo que este código minimalista lleva tras sí un buen background de conocimientos. Personalmente no me explico otra manera de llegar a esa (aparentemente simple) línea.

Cita:
Iniciado por JavierB Ver Mensaje
Yo también me he quedado

Saludos,
No es para menos. Casi me escondo bajo la cama cuando lo vi.
  #7 (permalink)  
Antiguo 13/06/2009, 16:08
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Lo que puede lograrse con 1 sola clase.

Pero que impresionante y pensar que yo siempre declaro clases distintas para unas y otras cosas, la verdad que cada día te sombras de las cosas que se pueden llegar a hacer!
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 13/06/2009, 16:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Lo que puede lograrse con 1 sola clase.

Muy bueno, en verdad una excelente y sencilla idea, aunque no a cualquiera se le ocurriría
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 13/06/2009, 16:51
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Lo que puede lograrse con 1 sola clase.

Y alguien así a grandes rasgos podría explicar que hace, es que el margin ese negativo no lo acabo de ver claro.
__________________
No diseñes usando tablas.
  #10 (permalink)  
Antiguo 13/06/2009, 16:55
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Lo que puede lograrse con 1 sola clase.

Cita:
Iniciado por hades87 Ver Mensaje
Y alguien así a grandes rasgos podría explicar que hace, es que el margin ese negativo no lo acabo de ver claro.
No estoy seguro, pero al verlo creo que es la solución para IE donde 50 + 50 = 101... Al menos esa fue mi suposición...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #11 (permalink)  
Antiguo 13/06/2009, 17:01
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Lo que puede lograrse con 1 sola clase.

Con el asterisco delante Firefox lo pasa por bola.
  #12 (permalink)  
Antiguo 13/06/2009, 17:04
 
Fecha de Ingreso: abril-2009
Mensajes: 121
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Lo que puede lograrse con 1 sola clase.

para IE donde 50 + 50 = 101


A caso Explorer es retrasado mental?
  #13 (permalink)  
Antiguo 13/06/2009, 17:05
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Lo que puede lograrse con 1 sola clase.

Gracias por la aclaración, pero como es que en ie 50 y 50 es 101?
__________________
No diseñes usando tablas.
  #14 (permalink)  
Antiguo 13/06/2009, 17:05
 
Fecha de Ingreso: febrero-2007
Mensajes: 309
Antigüedad: 10 años, 9 meses
Puntos: 16
Respuesta: Lo que puede lograrse con 1 sola clase.

Interesante! Yo todavia me rompo la cabeza con los CSS :P
__________________
Responder encuestas
  #15 (permalink)  
Antiguo 13/06/2009, 17:06
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Lo que puede lograrse con 1 sola clase.

Cita:
Iniciado por MavSettings Ver Mensaje
A caso Explorer es retrasado mental?
Eso es lo que muchos hemos tratado de decir durante años.
  #16 (permalink)  
Antiguo 13/06/2009, 17:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lo que puede lograrse con 1 sola clase.

Cita:
Iniciado por metacortex Ver Mensaje
Miren todo lo que se puede hacer utilizando sólo esa clase :
Bueno, no es del todo cierto:

<div class="clear"></div>



Muy curioso e interesante.
  #17 (permalink)  
Antiguo 13/06/2009, 17:37
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Lo que puede lograrse con 1 sola clase.

Cita:
Iniciado por Mikmoro Ver Mensaje
Bueno, no es del todo cierto:

<div class="clear"></div>



Muy curioso e interesante.
Eso es sólo en el ejemplo 3, el cual apunta a una maquetación orientada a un escenario más real. Igualmente en el ejemplo 1 está la clase "main" (el contenedor), lo cual tampoco quiere decir nada.
  #18 (permalink)  
Antiguo 13/06/2009, 18:21
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Lo que puede lograrse con 1 sola clase.

Cita:
Más que destreza (porque la destreza es resultado directo del conocimiento y la práctica) creo que se trata de una dupla conocimiento + creatividad. La creatividad es lo que nos permite hacer cosas grandes con 2 o 3 lecciones bien aprendidas o, en otras palabras, saber usar bien lo poco que hasta el momento se conoce.
Sin duda que has dicho exactamente lo que ese ejemplo representa. Ahora, con lo del retrazo mental de IE, la cosa no se queda ahí, también le falla la memoria.
__________________
twitter: @imbuzu
  #19 (permalink)  
Antiguo 13/06/2009, 21:18
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: Lo que puede lograrse con 1 sola clase.

Hola

Bueno, ya lo han dicho todo ...

Así que solo agregaré que ...

Hmmm, nada nuevo, mejor me voy.

:)

Felicidad
__________________
¡ hey, hou, hou, hey !
  #20 (permalink)  
Antiguo 14/06/2009, 08:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lo que puede lograrse con 1 sola clase.

Cita:
Iniciado por metacortex Ver Mensaje
Eso es sólo en el ejemplo 3, el cual apunta a una maquetación orientada a un escenario más real. Igualmente en el ejemplo 1 está la clase "main" (el contenedor), lo cual tampoco quiere decir nada.
Ya, era broma.
  #21 (permalink)  
Antiguo 14/06/2009, 10:13
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Lo que puede lograrse con 1 sola clase.

Ah perdón.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:40.