Si ya sabes lo que son los selectores, propiedades y valores, e incluso algo acerca de cómo estructurar una web, pero sientes que necesitas una guía para afianzar conocimientos o aprender la estructura básica CSS estás de enhorabuena.
Estructura CSS es un sitio escrito y desarrollado por Greg Smith y diseñado por Isaac Durazo, ambos de la empresa Bocoup que aborda una buena cantidad de temas para aprender CSS, algo fundamental para cualquier desarrollador de temas WordPress, y además está en español.
El índice de temas es el siguiente:
- Sin estructura
- La propiedad «display»
- margin:auto;
- max-width
- box model
- box-sizing
- position
- ejemplo de position
- float
- clear
- clearfix hack
- estructuras con float
- width y porcentaje
- media queries
- inline-block
- estructuras con inline-block
- columna
- flexbox
- frameworks para css
Y lo mejor es que está cada lección muy bien explicada y con ejemplos de uso. Un sitio de referencia imprescindible para cualquier diseñador de WordPress que quiera aprender más CSS.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Me viene al pelo, gracias.
Esta bien a medias: Actualmente la tendencia de estructurar usando la propiedad Display: Inline-Block esta en crecimiento ya que algunos CMS como DNN tienen barras de herramientas que usando float y overflow: hidden para que no desborden los contenidos arruinas las propiedades de edición por carecer de back-end, por ello es que Inline-Block fue la perfecta solución a este problema en espera de ver como funciona definitivamente la propiedad Flex. Pero la propiedad Display: Inline-Block merece una explicación más detallada: El elemento Inline-Block hereda propiedades de texto (text-align, vertical-align…) y eso ademas de ventajas tiene una desventaja «oculta» para aquellos que no pongan atención: Añade un espacio en blanco equivalente al tamaño de la font (sin estan usando font-size: 13px el espacio que genera un elemento con inline-block es equivalente al espacio que genera una letra de 13px), para solucionar este inconveniente el contenedor tiene que tener la propiedad fon-size: 0px, y en el elemento inline-block nuevamente declaramos el tamaño de fuente deseado (por ejemplo font-size: 13px), de esa forma eliminamos ese espacio en blanco que arruina un template desarrollado como pixel-perfect.