Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Estructura del SASS en Underscores

¡Prueba gratis durante 10 días

nuestros 1289 cursos !

Prueba gratis Mostrar modalidades de suscripción
Underscores tiene una estructura de archivos SCSS que modulariza francamente bien el código SASS que se va a aplicar sobre el tema. Aunque parezca complejo, según vayamos avanzando en el curso veremos que se familiariza uno muy rápidamente con él.

Transcripción

Todos los estilos del tema, absolutamente todos, están metidos dentro del archivo style.css. Hago doble clic sobre él. Y, hombre, es un archivo que así de entrada parece un poco difícil de editar. En realidad, esto tiene truco. Esto es debido a que tengo un archivo gulpfile, el cual tiene una tarea sass que se ocupa de recuperarme el archivo style.scss y me lo comprime, me añade los prefijos automáticamente necesarios, me lo limpia, incluso, añade sourcemaps para poder trabajar con los estilos scss. Dicho de otra manera, esto significa, entonces, que este archivo es un archivo final. Yo voy a tener un archivo del cual voy a sacar toda esa información y me va a generar este. Y ese archivo es, dentro de la carpeta sass, el archivo style.scss. Vemos que mantiene el mismo comentario al principio. Esto es muy importante porque, dentro de ese comentario, está toda la información que define el tema. Pero a partir de ahí, lo que hace es ya completamente distinto. No tiene nada que ver. En realidad este archivo está el punto scss, lo único que va, es a importar las distintas partes que componen un sitio web. Podemos ver que tiene pues eso: un archivo normalize, typography, elements, forms, navigation, accessibility. O sea, va a irme cargando archivos sueltos que se van a ocupar de tareas concretas o de zonas concretas del tema, de la página. Esto también tiene un poco de truco porque realmente estos archivos, muchos de ellos, realmente, lo que hacen es cargar otros elementos. Vamos a ver casos concretos. Voy a empezar primero por normalize. Normalize, en realidad, es un archivo que va a servir para cargar este normalize.css que se ocupa, básicamente, de hacer que en todos los navegadores de entrada los estilos iniciales de la página sean exactamente los mismos, o sea, normaliza todo lo que tiene que ver con el cuerpo del texto, con el tamaño, con los márgenes, los paddings del body, ese tipo de cosas. Vamos a ver un caso un poco más interesante. Typography. Dentro de la carpeta typography, tenemos el archivo typography. Dentro de él, tenemos este archivo que decía. Bien, pues efectivamente, este tiene un poco de información. Y, a partir de esa información, me va a importar otros archivos diferentes con más información. Headings por un lado y copy por otro lado. Es un buen ejemplo este typography porque me sirve un poco para explicar cómo está organizada la escala jerárquica de cada uno de estos archivos. El planteamiento es, yo tengo una serie de tipos de elementos, que los tengo dentro de este Table of Contents. O sea que tengo normalización, tipografía, elementos, formularios, elementos de navegación, accesibilidad, alineaciones, etc. Si elijo uno, cualquiera de ellos, por ejemplo, typography. Este, vale, me va a dar información básica de tipografía, pero me va a dar algo más. Me va a dar también información sobre elementos concretos. En este caso, sobre los encabezamientos, sobre las etiquetas h1, h2, h3, etc. Y también me va a devolver cómo se tienen que pintar otros elementos de texto. Y aquí, pues por ejemplo, cómo hay que trabajar con los blockquotes. Por ejemplo, qué márgenes va a tener la etiqueta P. O, por ejemplo, también la etiqueta big. Dicho de otro modo, tenemos todo lo relacionado con tipografía, pero lo tenemos organizado en partes para los cabeceros y para este otro tipo de elementos. Es más, también voy a tener otra cosa que también es llamativa. Es que, por ejemplo, en el caso del font-family, en el caso del color o en el caso del line-height no tengo valores reales, lo que estoy llamando es a variables de sass. Y estas variables, en realidad, no se van a modificar en typography, porque voy a tener otros sitios distintos donde también voy a poder utilizar el tamaño de los textos. Tengo una carpeta variables.site dentro de la cual tengo los colores, los elementos estructurales, la tipografía. Y aquí veo que es donde tengo definido el font_main, la variable que define todo el tipo de letra para toda la web, que sería esta variable. Y, precisamente, está aplicado al textarea, al body, bueno, en principio, a todo. Y, luego, por otro lado, otros tipos de letra aplicados a otra variable. Incluso, también tengo aquí el alto de línea para el cuerpo y para el pre. Bien. Eso significa que cuando quiera cambiar el tamaño, no lo voy a cambiar aquí, lo voy a cambiar aquí directamente. Exactamente igual que he comentado con este typography, pues puedo continuar con el resto. Haciendo un poco un resumen de los distintos tipos de elementos que tenemos. En la carpeta elements, tenemos diferentes elementos, diferentes etiquetas utilizadas: HR, imagen, figure. Pero vamos a tener también la importación de list y de tables que van a ser archivos que trabajen con listas y con tablas. Por otro lado, en forms, como es obvio, trabajaremos con botones con campos y con el resto de elementos de formulario. En el caso del layout, es un poco distinto. En este caso, vamos a trabajar con la forma de organizar el sidebar. Pero ahí podríamos añadir otros elementos estructurales, los que nosotros quisiésemos. En media, trabajaremos con imágenes, con cómo tiene que mostrarlas, con los pies de foto. Los mixins van a ser utilizados dentro de sass para devolver información acerca de cómo tiene que tratarse, por ejemplo, cuando se acaban los elementos flotantes, por poner un ejemplo. En el caso de los módulos, esto también es interesante, porque sirve para hacer, digamos, diferentes tipos de cosas. Por ejemplo, se entiende muy bien con alignments, las alineaciones. En este caso, lo que estoy es definiendo una clase alignleft,right o center que va a servir para que el texto aparezca colocado a la derecha, izquierda o centro. O sea, digamos que es una forma de poder añadir clases que luego pueda utilizar dentro de los HTML y que sirvan para definir cómo se colocan distintos elementos. En navegación, están los distintos elementos de navegación. Y en site, vamos a tener también diferentes partes de lo que es la página. Por ejemplo, cómo tratar los widgets o cómo tratar los comentarios. Como se ve, es una estructura bastante clara de dónde voy a tener cada uno de los elementos que necesite. También es muy interesante pensar que yo, en un momento dado, puedo necesitar elementos propios. Supongamos que yo creo un tipo de elemento en concreto o, mejor, que quiero modificar el aspecto que tiene un elemento. Pongamos, por ejemplo, que sea la etiqueta article. Puedo entender, en realidad, esto es una cuestión muy subjetiva, pero yo puedo pensar que eso podría añadirlo dentro de elements. Es más, si yo voy a hacer aquí dentro de elements un cambio un poco más complicado, puedo hasta crear un archivo nuevo. Entonces, podría crear un nuevo sass. Al que voy a llamar, guión bajo y luego el nombre que quiera darle. En este caso, voy a trabajar solo sobre la etiqueta article, así que le voy a poner un _article. Ese guión bajo va a servir para que ahora la importación la haga automáticamente. Simplemente, poniendo @import y entre comillas article. Bien, con esto, consigo que me importe ese archivo. Lo guardo. Vemos que Gulp se ocupa de rehacer el archivo css final. Y, luego, pues aquí añadiría, por ejemplo, article. Y añadiría que tenga un... ...margen de 20 píxels. Que tenga un padding de 15 píxels. Que tenga un background-color de un gris clarito. Por ejemplo, #e8e8e8 Y que tenga, por ejemplo, los bordes redondeados. Radius: por ejemplo, 8px. Bien, pues esto lo guardo. He guardado ya cada uno de estos elementos. Lo guardo. Y ahora sí, me voy a mi sitio. Aquí vemos que tengo un article y, efectivamente, que me está añadiendo un margen, y que me está añadiendo un padding dentro de él con color gris. Vemos que, efectivamente, es ese artículo. En este vídeo, hemos aprendido a trabajar con sass. Hemos aprendido cómo se realizan los archivos de sass. Hemos visto cómo también trabajan con variables. Y, por último, también hemos visto cómo crear nuestros propios archivos de sass para añadir elementos nuevos y cómo incorporarlos dentro de toda la estructura de archivos sass de nuestro tema.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.