SASS Workshop

├── README.md ├── final ├── assets │ ├── butterfly.png │ ├── cat.png │ ├── crab.png │ ├── deer.png │ └── main-image.png ├── index.html ├── styles.css ├── styles.css.map └── styles.scss ├── initial ├── index.html └── styles.scss └── readme-assets ├── cat-section-mobile.png ├── cat-section-web.png ├── crab-section.png ├── elements-landing-page.png ├── footer.png ├── header.png ├── landing-mobile.gif ├── landing-web.gif ├── main-section.png ├── search.png └── title.png /README.md: -------------------------------------------------------------------------------- 1 | readme-title

2 | 3 | ## ¿ Qué haremos ? 4 | 5 | Haremos una Landing Page tanto para Web como para Mobile usando SASS y BEM. 6 | 7 | ## ¿ Qué debemos hacer para comenzar ? 8 | 9 | 1. Debes tener instalado Git en tu computador. 10 | 2. Clonar este repositorio. Nos puedes preguntar si tienes dudas de cómo hacer este paso. 11 | 3. Abrir tu editor de código favorito: Visual Studio Code, Atom, Webstorm... 12 | 4. Abrir este repositorio en tu editor de código. 13 | 5. Escuchar atentamente las indicaciones posteriores. Haremos todo en conjunto, así que debemos esperar a que todos estemos en este paso. 14 | 15 | # Comencemos con nuestra Landing Page ! 16 | 17 | 1. [Introducción a SASS](#1-introducción-a-sass-syntactically-awesome-stylesheets) 18 | 2. [Introducción a BEM](#2-introducción-a-bem-block-element-modifier) 19 | 3. [Después de clonar el repositorio...](#3-después-de-clonar-el-repositorio) 20 | 4. [Conozcamos la estructura de nuestra Landing Page](#4-conozcamos-la-estructura-de-nuestra-landing-page) 21 | 5. [Definición de elementos](#5-definición-de-elementos) 22 | 6. [Instalación de SASS](#6-instalación-de-sass) 23 | 7. [Variables: Paleta de colores y fuentes](#7-variables-paleta-de-colores-y-fuentes) 24 | 8. [Header](#8-header) 25 | 9. [Main Section](#9-main-section) 26 | 10. [Search Section](#10-search-section) 27 | 11. [Primary Section](#11-primary-section) 28 | 12. [Secondary Section](#12-secondary-section) 29 | 13. [Footer](#13-footer) 30 | 31 | ## 1. Introducción a SASS (Syntactically Awesome StyleSheets) 32 | 33 | SASS es un preprocesador de CSS y nos permite escribir CSS con unas pequeñas modificaciones: podemos hacer variables, extender estilos de otras clases, hacer anidamientos, utilizar condicionales, entre otros. 34 | 35 | Aquí te compartimos algunos recursos: 36 | 37 | * Documentación oficial: https://sass-lang.com/ 38 | * Cheatsheet: https://devhints.io/sass 39 | 40 | ## 2. Introducción a BEM (Block, Element, Modifier) 41 | 42 | BEM es una convención de nomenclatura para los nombres de nuestras clases en CSS. 43 | 44 | * Documentación: https://seesparkbox.com/foundry/bem_by_example 45 | 46 | ## 3. Después de clonar el repositorio... 47 | 48 | Después de clonar el repositorio encontrarás dos carpetas: inicial y final. Tú comenzarás a escribir código en el `index.html` que dejamos para ti en la carpeta inicial. Y porsupuesto, en la carpeta final está el resultado al que debemos llegar. 49 | 50 | ## 4. Conozcamos la estructura de nuestra Landing Page 51 | 52 | Aquí te presentamos la estructura de nuestra Landing Page. Para este caso, escogimos una página de animales pero tú puedes hacerla del tema que quieras: motos, carros, maquillaje, ropa, fitness... e inclusive, tu propia página web. 53 | 54 | * ## Landing Page | Diseño Web 55 | 56 | > Mockup Link: https://goo.gl/Qbngyz 57 | 58 | Landing Page Web

59 | 60 | * ## Landing Page | Diseño Móvil 61 | 62 | > Mockup Link: https://goo.gl/gGkwDq 63 | 64 | Landing Page Mobile

65 | 66 | ## 5. Definición de elementos 67 | 68 | Para comenzar a maquetar nuestra Landing Page es importante poder reconocer los elementos que allí se encuentran. Es decir, si tiene navbar, header, secciones, imágenes, footer, etc. 69 | 70 | Este es un paso fundamental ya que te ayudará a conocer mejor el proyecto que vas a realizar y también puedes empezar a detectar si trabajarás con flexbox, css grid, boostrap, material design, etc. Es decir, empezarás a levantar requisitos. Además te ayudará a estructurar y tener una visión más clara de tu HTML. 71 | 72 | Elements Landing Page

73 | 74 | Como pudiste ver, tendremos: Header, Main Section, Search Section, Primary Section, Secondary Section y Footer. Estos elementos serán nuestros pequeños bloques de HTML. 75 | 76 | ## 6. Instalación de SASS 77 | 78 | Lo primero que debes saber es que *no* puedes insertar directamente un archivo `.scss` en un archivo `.html`. 79 | 80 | ¿Por qué? 81 | 82 | Porque SASS al ser un preprocesador de CSS3 y no es soportado en los navegadores web. Por lo tanto, los pasos a seguir son: 83 | 84 | ### 1. Instalación de SASS en tu computador. 85 | 86 | * Si usas **npm** debes poner en tu consola: `npm install -g sass` 87 | * Si usas **Chocolatey Package Manager** (Windows) debes poner en tu consola: `choco install sass` 88 | * Si eres MAC OS X debes poner en tu consola: `brew install sass/sass/sass` 89 | 90 | > Documentación oficial: https://sass-lang.com/install 91 | 92 | ### 2. Correr el proyecto con SASS 93 | 94 | Para poder visualizar tus proyectos de sass en el navegador, debes escribir en tu consola: `sass --watch tu-ruta/sass-workshop/initial/styles.scss tu-ruta/sass-workshop/initial/styles/index.css` 95 | 96 | * > Nota 1: "tu-ruta" es el lugar en tu computador en donde clonaste el repositorio. Un ejemplo puede ser: /Users/PepitaPerez/Documentos/... es decir que lo que deberías escribir en tu consola es: `sass --watch /Users/PepitaPerez/Documentos/sass-workshop/initial/styles.scss /Users/PepitaPerez/Documentos/sass-workshop/initial/styles/index.css` 97 | 98 | * > Nota 2: La ruta de tu proyecto la puedes conseguir haciendo `pwd` en tu consola. Si eres Windows con el comando `cd` 99 | 100 | ### 3. Ver tu proyecto en el navegador 101 | 102 | Al correr el comando anterior, notarás en tu código que se crea un archivo `styles.css.map`. Si sí, ya puedes ir a tu navegador y poner la ruta del `index.html` de tu proyecto. 103 | 104 | Siguiendo la línea del ejemplo anterior, deberías poner: `file:///Users/PepitaPerez/Documentos/sass-workshop/initial/index.html` 105 | 106 | ## 7. Variables: Paleta de colores y fuentes 107 | 108 | Las variables en SASS son un camino para almacenar información y poder reutilizarla. 109 | 110 | En nuetro caso, la paleta de colores es: 111 | 112 | * Verde: #99DDCC 113 | * Rosado: #FA91A7 114 | * Amarillo: #D9E540 115 | * Blanco: #FFF 116 | 117 | y, la fuente que usaremos será **Arial**. 118 | 119 | > Nota: Recuerda que puedes escoger los colores y las fuentes que desees. 120 | 121 | Lo que haremos para definir estas *variables* en nuestro archivo `styles.scss` es escribir lo siguiente: 122 | 123 | ``` 124 | $green: #99DDCC; 125 | $pink: #FA91A7; 126 | $yellow: #D9E540; 127 | $white: #FFF; 128 | $font-arial: arial; 129 | ``` 130 | 131 | ## 8. Header 132 | 133 | * Imagen del mockup: 134 | 135 | Navbar

136 | 137 | Podemos notar que nuestro Header debe ocupar todo el ancho de nuestra página (tanto en web como en mobile), un largo de 80px y que además tiene un texto en mayúscula y centrado. Así que: 138 | 139 | * En el archivo HTML escribiremos lo siguiente: 140 | 141 | ``` 142 | 143 | ``` 144 | 145 | * En el archivo SCSS escribiremos lo siguiente: 146 | 147 | ``` 148 | .header { 149 | background-color: $green; 150 | color: $white; 151 | width: 100%; 152 | height: 80px; 153 | text-transform: uppercase; 154 | font-family: $font-arial; 155 | font-size: 18px; 156 | font-weight: bold; 157 | letter-spacing: 5px; 158 | display: flex; 159 | align-items: center; 160 | justify-content: center; 161 | } 162 | ``` 163 | 164 | Puedes notar que tenemos: `font-family`, `font-size`, `font-weight` y con SASS podemos escribir eso así: 165 | 166 | ``` 167 | font: { 168 | family: $font-arial; 169 | size: 18px; 170 | weight: bold; 171 | } 172 | ``` 173 | 174 | Así que nuestra clase `.header` quedaría: 175 | 176 | ``` 177 | .header { 178 | background-color: $green; 179 | color: $white; 180 | width: 100%; 181 | height: 80px; 182 | text-transform: uppercase; 183 | letter-spacing: 5px; 184 | display: flex; 185 | align-items: center; 186 | justify-content: center; 187 | font: { 188 | family: $font-arial; 189 | size: 18px; 190 | weight: bold; 191 | } 192 | } 193 | ``` 194 | 195 | Sin embargo, si pensamos a futuro vamos a notar que necesitaremos centrar elementos usando `display: flex`, por lo que sería útil hacer una clase que centre elementos y así poderla reutilizar más adelante. Por lo tanto, crearemos una clase llamada `.center` con lo siguiente: 196 | 197 | ``` 198 | .center { 199 | display: flex; 200 | align-items: center; 201 | justify-content: center; 202 | } 203 | ``` 204 | 205 | Y, en nuestra clase `.header` vamos a heredar de `.center` usando `@extend` así: 206 | 207 | ``` 208 | .header { 209 | @extend .center; 210 | background-color: $green; 211 | color: $white; 212 | width: 100%; 213 | height: 80px; 214 | text-transform: uppercase; 215 | letter-spacing: 5px; 216 | font: { 217 | family: $font-arial; 218 | size: 18px; 219 | weight: bold; 220 | } 221 | } 222 | ``` 223 | 224 | También podemos sacar dos clases más para poderlas reutilizar más adelante: 225 | 226 | ``` 227 | .size-container { 228 | width: 100%; 229 | height: 80px; 230 | } 231 | 232 | .letter-transform { 233 | text-transform: uppercase; 234 | letter-spacing: 5px; 235 | } 236 | ``` 237 | 238 | Finalmente, nuestra clase `.header` quedaría: 239 | 240 | ``` 241 | .header { 242 | @extend .center; 243 | @extend .size-container; 244 | @extend .letter-transform; 245 | background-color: $green; 246 | color: $white; 247 | font: { 248 | family: $font-arial; 249 | size: 18px; 250 | weight: bold; 251 | } 252 | } 253 | ``` 254 | 255 | ## 9. Main Section 256 | 257 | * Imagen del mockup: 258 | 259 |

260 | 261 | * En el archivo HTML escribiremos lo siguiente: 262 | 263 | ``` 264 |

265 |

266 |

267 | ``` 268 | 269 | * En el archivo SCSS escribiremos lo siguiente: 270 | 271 | ``` 272 | .main { 273 | img { 274 | width: 100%; 275 | height: 100%; 276 | } 277 | } 278 | ``` 279 | 280 | ## 10. Search Section 281 | 282 | * Imagen del mockup: 283 | 284 |

285 | 286 | * En el archivo HTML escribiremos lo siguiente: 287 | 288 | ``` 289 |

290 |

291 |

292 | 293 | 294 |

295 |

296 | ``` 297 | 298 | El ícono lo puedes sacar de Font Awesome. Puedes escoger el ícono que más te guste aquí: https://fontawesome.com/icons?d=gallery 299 | 300 | * En el archivo SCSS escribiremos lo siguiente: 301 | 302 | ``` 303 | .search { 304 | &__title { 305 | @extend .center; 306 | @extend .size-container; 307 | @extend .letter-transform; 308 | background-color: $green; 309 | color: $white; 310 | font: { 311 | family: $font-arial; 312 | size: 18px; 313 | } 314 | } 315 | &__input { 316 | background-color: $white; 317 | display: grid; 318 | grid-template-columns: 60px auto; 319 | justify-items: center; 320 | align-items: center; 321 | input { 322 | @extend .size-container; 323 | border: 0px; 324 | outline: none; 325 | font-size: 18px; 326 | letter-spacing: 5px; 327 | } 328 | } 329 | } 330 | ``` 331 | 332 | ## 11. Primary Section 333 | 334 | Esta sección debemos pensarla tanto para dispositivos web como para mobile. Vamos a notar que hay un pequeño cambio en los tamaños de las imágenes y descripciones. 335 | 336 | Con *CSS Grid* haremos una cuadrícula imaginaria como la que vemos a continuación: 337 | 338 | * Imagen del mockup: 339 | 340 | Crab Section

341 | 342 | Lo que va a cambiar será la ubicación de los elementos en las diferentes filas. Así: 343 | 344 | En Web: 345 | 346 | | Column 1 | Column 2 | | 347 | |---|---|---| 348 | | Imagen Cangrejo | Descripción Mariposa | **Row 1** | 349 | | Imagen Cangrejo | Imagen Mariposa | **Row 2** | 350 | | Imagen Cangrejo | Imagen Mariposa | **Row 3** | 351 | | Descripción Mariposa | Imagen Mariposa | **Row 4** | 352 | 353 | En Mobile: 354 | 355 | | Column 1 | Column 2 | | 356 | |---|---|---| 357 | | Imagen Cangrejo | Descripción Mariposa | **Row 1** | 358 | | Imagen Cangrejo | Descripción Mariposa | **Row 2** | 359 | | Descripción Mariposa | Imagen Mariposa | **Row 3** | 360 | | Descripción Mariposa | Imagen Mariposa | **Row 4** | 361 | 362 | * En el archivo HTML escribiremos lo siguiente: 363 | 364 | ``` 365 |

366 |

367 |

368 |

Cangrejos
para todos

369 |

370 |

371 |

372 |

Mariposas

373 |

374 |

375 | ``` 376 | 377 | * En el archivo SCSS escribiremos lo siguiente: 378 | 379 | ``` 380 | .ps { 381 | width: 100%; 382 | height: 900px; 383 | display: grid; 384 | grid-template-columns: repeat(2, 1fr); 385 | grid-template-rows: 2fr 1fr 1fr 2fr; 386 | @media screen and (max-width: $break-small) { 387 | height: 500px; 388 | } 389 | img { 390 | width: 100%; 391 | height: 100%; 392 | } 393 | &__img--primary { 394 | grid-row: 1/4; 395 | @media screen and (max-width: $break-small) { 396 | grid-row: 1/3; 397 | } 398 | } 399 | &__description--primary { 400 | @extend .description; 401 | grid-column: 2; 402 | grid-row: 1/2; 403 | @media screen and (max-width: $break-small) { 404 | grid-column: 2; 405 | grid-row: 1/3; 406 | } 407 | } 408 | &__img--secondary { 409 | grid-column: 2; 410 | grid-row: 2/5; 411 | @media screen and (max-width: $break-small) { 412 | grid-column: 2; 413 | grid-row: 3/5; 414 | } 415 | } 416 | &__description--secondary { 417 | @extend .description; 418 | grid-row: 4/5; 419 | @media screen and (max-width: $break-small) { 420 | grid-row: 3/5; 421 | } 422 | } 423 | } 424 | ``` 425 | 426 | Donde `$break-small` será otra variable junto a nuestra paleta de colores con el valor: `800px`. 427 | 428 | ## 12. Secondary Section 429 | 430 | * Imagen del mockup: 431 | 432 | Cat Section Web

433 | 434 | Cat Section Mobile

435 | 436 | * En el archivo HTML escribiremos lo siguiente: 437 | 438 | ``` 439 |

440 |

441 |

442 |

443 |

Gatos
Majestuosos

444 |

445 |

446 |

447 |

Ciervooos

448 |

449 |

450 |

451 | ``` 452 | 453 | * En el archivo SCSS escribiremos lo siguiente: 454 | 455 | ``` 456 | .ss { 457 | width: 100%; 458 | height: 900px; 459 | display: grid; 460 | grid-template-columns: 2fr 1fr; 461 | @media screen and (max-width: $break-small) { 462 | grid-template-columns: 1fr; 463 | grid-template-rows: repeat(2, 450px); 464 | } 465 | img { 466 | width: 100%; 467 | } 468 | &__img--primary { 469 | height: 100%; 470 | } 471 | &__container { 472 | display: grid; 473 | grid-template-rows: repeat(3, 300px); 474 | @media screen and (max-width: $break-small) { 475 | grid-template-columns: repeat(2, 1fr); 476 | grid-template-rows: repeat(2, 225px); 477 | } 478 | } 479 | &__description--primary { 480 | @extend .description; 481 | @media screen and (max-width: $break-small) { 482 | grid-column: 1/3; 483 | } 484 | } 485 | &__img--secondary { 486 | @extend .description; 487 | height: 100%; 488 | @media screen and (max-width: $break-small) { 489 | height: 50%; 490 | grid-column: 1/2; 491 | grid-row: 2; 492 | } 493 | } 494 | &__description--secondary { 495 | @extend .description; 496 | @media screen and (max-width: $break-small) { 497 | grid-column: 2/3; 498 | grid-row: 2; 499 | } 500 | } 501 | } 502 | ``` 503 | 504 | ## 13. Footer 505 | 506 | * Imagen del mockup: 507 | 508 | Footer

509 | 510 | * En el archivo HTML escribiremos lo siguiente: 511 | 512 | ``` 513 | 518 | ``` 519 | 520 | * En el archivo SCSS escribiremos lo siguiente: 521 | 522 | ``` 523 | .footer { 524 | @extend .center; 525 | @extend .size-container; 526 | @extend .letter-transform; 527 | background-color: $white; 528 | color: $pink; 529 | font: { 530 | size: 15px; 531 | weight: bold; 532 | } 533 | p { 534 | text-align: center; 535 | span { 536 | color: $green; 537 | } 538 | } 539 | } 540 | ``` -------------------------------------------------------------------------------- /final/assets/butterfly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/final/assets/butterfly.png -------------------------------------------------------------------------------- /final/assets/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/final/assets/cat.png -------------------------------------------------------------------------------- /final/assets/crab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/final/assets/crab.png -------------------------------------------------------------------------------- /final/assets/deer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/final/assets/deer.png -------------------------------------------------------------------------------- /final/assets/main-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/final/assets/main-image.png -------------------------------------------------------------------------------- /final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | SASS Workshop 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

22 |

23 |

24 | 25 | 26 |

27 |

28 |

29 | 30 | 31 |

32 |

33 | 34 | 35 |

36 |

37 |

38 |

Cangrejos
para todos

39 |

40 |

41 |

42 |

Mariposas

43 |

44 |

45 | 46 | 47 |

48 |

49 |

50 |

51 |

Gatos
Majestuosos

52 |

53 |

54 |

55 |

Ciervooos

56 |

57 |

58 |

59 | 60 | 61 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /final/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: arial; 5 | } 6 | 7 | .center, .footer, .search__title, .header { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .size-container, .footer, .search__input input, .search__title, .header { 14 | width: 100%; 15 | height: 80px; 16 | } 17 | 18 | .letter-transform, .footer, .search__title, .header { 19 | text-transform: uppercase; 20 | letter-spacing: 5px; 21 | } 22 | 23 | .description, .ss__description--secondary, .ss__img--secondary, .ss__description--primary, .ps__description--secondary, .ps__description--primary { 24 | background-color: #99DDCC; 25 | color: #FFF; 26 | } 27 | 28 | .header { 29 | background-color: #99DDCC; 30 | color: #FFF; 31 | font-family: arial; 32 | font-size: 18px; 33 | font-weight: bold; 34 | } 35 | 36 | .main img { 37 | width: 100%; 38 | height: 100%; 39 | } 40 | 41 | .search__title { 42 | background-color: #99DDCC; 43 | color: #FFF; 44 | font-family: arial; 45 | font-size: 18px; 46 | } 47 | .search__input { 48 | background-color: #FFF; 49 | display: grid; 50 | grid-template-columns: 60px auto; 51 | justify-items: center; 52 | align-items: center; 53 | } 54 | .search__input input { 55 | border: 0px; 56 | outline: none; 57 | font-size: 18px; 58 | letter-spacing: 5px; 59 | } 60 | 61 | .ps { 62 | width: 100%; 63 | height: 900px; 64 | display: grid; 65 | grid-template-columns: repeat(2, 1fr); 66 | grid-template-rows: 2fr 1fr 1fr 2fr; 67 | } 68 | @media screen and (max-width: 800px) { 69 | .ps { 70 | height: 500px; 71 | } 72 | } 73 | .ps img { 74 | width: 100%; 75 | height: 100%; 76 | } 77 | .ps__img--primary { 78 | grid-row: 1/4; 79 | } 80 | @media screen and (max-width: 800px) { 81 | .ps__img--primary { 82 | grid-row: 1/3; 83 | } 84 | } 85 | .ps__description--primary { 86 | grid-column: 2; 87 | grid-row: 1/2; 88 | } 89 | @media screen and (max-width: 800px) { 90 | .ps__description--primary { 91 | grid-column: 2; 92 | grid-row: 1/3; 93 | } 94 | } 95 | .ps__img--secondary { 96 | grid-column: 2; 97 | grid-row: 2/5; 98 | } 99 | @media screen and (max-width: 800px) { 100 | .ps__img--secondary { 101 | grid-column: 2; 102 | grid-row: 3/5; 103 | } 104 | } 105 | .ps__description--secondary { 106 | grid-row: 4/5; 107 | } 108 | @media screen and (max-width: 800px) { 109 | .ps__description--secondary { 110 | grid-row: 3/5; 111 | } 112 | } 113 | 114 | .ss { 115 | width: 100%; 116 | height: 900px; 117 | display: grid; 118 | grid-template-columns: 2fr 1fr; 119 | } 120 | @media screen and (max-width: 800px) { 121 | .ss { 122 | grid-template-columns: 1fr; 123 | grid-template-rows: repeat(2, 450px); 124 | } 125 | } 126 | .ss img { 127 | width: 100%; 128 | } 129 | .ss__img--primary { 130 | height: 100%; 131 | } 132 | .ss__container { 133 | display: grid; 134 | grid-template-rows: repeat(3, 300px); 135 | } 136 | @media screen and (max-width: 800px) { 137 | .ss__container { 138 | grid-template-columns: repeat(2, 1fr); 139 | grid-template-rows: repeat(2, 225px); 140 | } 141 | } 142 | @media screen and (max-width: 800px) { 143 | .ss__description--primary { 144 | grid-column: 1/3; 145 | } 146 | } 147 | .ss__img--secondary { 148 | height: 100%; 149 | } 150 | @media screen and (max-width: 800px) { 151 | .ss__img--secondary { 152 | height: 50%; 153 | grid-column: 1/2; 154 | grid-row: 2; 155 | } 156 | } 157 | @media screen and (max-width: 800px) { 158 | .ss__description--secondary { 159 | grid-column: 2/3; 160 | grid-row: 2; 161 | } 162 | } 163 | 164 | .footer { 165 | background-color: #FFF; 166 | color: #FA91A7; 167 | font-size: 15px; 168 | font-weight: bold; 169 | } 170 | .footer p { 171 | text-align: center; 172 | } 173 | .footer p span { 174 | color: #99DDCC; 175 | } 176 | 177 | /*# sourceMappingURL=styles.css.map */ 178 | -------------------------------------------------------------------------------- /final/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAOA;EACE;EACA;EACA,aANW;;;AAWb;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,kBAhCM;EAiCN,OA9BM;;;AAmCR;EAIE,kBA1CM;EA2CN,OAxCM;EA0CJ,aAzCS;EA0CT;EACA;;;AAOF;EACE;EACA;;;AAOF;EAIE,kBAnEI;EAoEJ,OAjEI;EAmEF,aAlEO;EAmEP;;AAGJ;EACE,kBAxEI;EAyEJ;EACA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;;;AAON;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAEF;EACE;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAGJ;EAEE;EACA;;AACA;EAJF;IAKI;IACA;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;IACA;;;AAGJ;EAEE;;AACA;EAHF;IAII;;;;AAON;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;IACA;;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EAHF;IAII;IACA;;;AAKF;EAFF;IAGI;;;AAGJ;EAEE;;AACA;EAHF;IAII;IACA;IACA;;;AAKF;EAFF;IAGI;IACA;;;;AAON;EAIE,kBA7LM;EA8LN,OAhMK;EAkMH;EACA;;AAEF;EACE;;AACA;EACE,OAzME","file":"styles.css"} -------------------------------------------------------------------------------- /final/styles.scss: -------------------------------------------------------------------------------- 1 | $green: #99DDCC; 2 | $pink: #FA91A7; 3 | $yellow: #D9E540; 4 | $white: #FFF; 5 | $font-arial: arial; 6 | $break-small: 800px; 7 | 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | font-family: $font-arial; 12 | } 13 | 14 | // General Styles 15 | 16 | .center { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .size-container { 23 | width: 100%; 24 | height: 80px; 25 | } 26 | 27 | .letter-transform { 28 | text-transform: uppercase; 29 | letter-spacing: 5px; 30 | } 31 | 32 | .description { 33 | background-color: $green; 34 | color: $white; 35 | } 36 | 37 | // Header 38 | 39 | .header { 40 | @extend .center; 41 | @extend .size-container; 42 | @extend .letter-transform; 43 | background-color: $green; 44 | color: $white; 45 | font: { 46 | family: $font-arial; 47 | size: 18px; 48 | weight: bold; 49 | } 50 | } 51 | 52 | // Main Section 53 | 54 | .main { 55 | img { 56 | width: 100%; 57 | height: 100%; 58 | } 59 | } 60 | 61 | // Search Section 62 | 63 | .search { 64 | &__title { 65 | @extend .center; 66 | @extend .size-container; 67 | @extend .letter-transform; 68 | background-color: $green; 69 | color: $white; 70 | font: { 71 | family: $font-arial; 72 | size: 18px; 73 | } 74 | } 75 | &__input { 76 | background-color: $white; 77 | display: grid; 78 | grid-template-columns: 60px auto; 79 | justify-items: center; 80 | align-items: center; 81 | input { 82 | @extend .size-container; 83 | border: 0px; 84 | outline: none; 85 | font-size: 18px; 86 | letter-spacing: 5px; 87 | } 88 | } 89 | } 90 | 91 | // Primary Section 92 | 93 | .ps { 94 | width: 100%; 95 | height: 900px; 96 | display: grid; 97 | grid-template-columns: repeat(2, 1fr); 98 | grid-template-rows: 2fr 1fr 1fr 2fr; 99 | @media screen and (max-width: $break-small) { 100 | height: 500px; 101 | } 102 | img { 103 | width: 100%; 104 | height: 100%; 105 | } 106 | &__img--primary { 107 | grid-row: 1/4; 108 | @media screen and (max-width: $break-small) { 109 | grid-row: 1/3; 110 | } 111 | } 112 | &__description--primary { 113 | @extend .description; 114 | grid-column: 2; 115 | grid-row: 1/2; 116 | @media screen and (max-width: $break-small) { 117 | grid-column: 2; 118 | grid-row: 1/3; 119 | } 120 | } 121 | &__img--secondary { 122 | grid-column: 2; 123 | grid-row: 2/5; 124 | @media screen and (max-width: $break-small) { 125 | grid-column: 2; 126 | grid-row: 3/5; 127 | } 128 | } 129 | &__description--secondary { 130 | @extend .description; 131 | grid-row: 4/5; 132 | @media screen and (max-width: $break-small) { 133 | grid-row: 3/5; 134 | } 135 | } 136 | } 137 | 138 | // Secondary Section 139 | 140 | .ss { 141 | width: 100%; 142 | height: 900px; 143 | display: grid; 144 | grid-template-columns: 2fr 1fr; 145 | @media screen and (max-width: $break-small) { 146 | grid-template-columns: 1fr; 147 | grid-template-rows: repeat(2, 450px); 148 | } 149 | img { 150 | width: 100%; 151 | } 152 | &__img--primary { 153 | height: 100%; 154 | } 155 | &__container { 156 | display: grid; 157 | grid-template-rows: repeat(3, 300px); 158 | @media screen and (max-width: $break-small) { 159 | grid-template-columns: repeat(2, 1fr); 160 | grid-template-rows: repeat(2, 225px); 161 | } 162 | } 163 | &__description--primary { 164 | @extend .description; 165 | @media screen and (max-width: $break-small) { 166 | grid-column: 1/3; 167 | } 168 | } 169 | &__img--secondary { 170 | @extend .description; 171 | height: 100%; 172 | @media screen and (max-width: $break-small) { 173 | height: 50%; 174 | grid-column: 1/2; 175 | grid-row: 2; 176 | } 177 | } 178 | &__description--secondary { 179 | @extend .description; 180 | @media screen and (max-width: $break-small) { 181 | grid-column: 2/3; 182 | grid-row: 2; 183 | } 184 | } 185 | } 186 | 187 | // Footer 188 | 189 | .footer { 190 | @extend .center; 191 | @extend .size-container; 192 | @extend .letter-transform; 193 | background-color: $white; 194 | color: $pink; 195 | font: { 196 | size: 15px; 197 | weight: bold; 198 | } 199 | p { 200 | text-align: center; 201 | span { 202 | color: $green; 203 | } 204 | } 205 | } -------------------------------------------------------------------------------- /initial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | SASS Workshop 14 | 15 | 16 | 17 | 18 |

Wiii... tu primer SASS 🎉

19 | 20 | 21 |

22 | 23 | 24 |

25 | 26 | 27 |

28 | 29 | 30 |

31 | 32 | 33 |

34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /initial/styles.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #99DDCC; 3 | margin: 0; 4 | padding: 0; 5 | } -------------------------------------------------------------------------------- /readme-assets/cat-section-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/cat-section-mobile.png -------------------------------------------------------------------------------- /readme-assets/cat-section-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/cat-section-web.png -------------------------------------------------------------------------------- /readme-assets/crab-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/crab-section.png -------------------------------------------------------------------------------- /readme-assets/elements-landing-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/elements-landing-page.png -------------------------------------------------------------------------------- /readme-assets/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/footer.png -------------------------------------------------------------------------------- /readme-assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/header.png -------------------------------------------------------------------------------- /readme-assets/landing-mobile.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/landing-mobile.gif -------------------------------------------------------------------------------- /readme-assets/landing-web.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/landing-web.gif -------------------------------------------------------------------------------- /readme-assets/main-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/main-section.png -------------------------------------------------------------------------------- /readme-assets/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/search.png -------------------------------------------------------------------------------- /readme-assets/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teffcode/sass-workshop/6645122260b3605df88e317adfb1aefb5eed10dd/readme-assets/title.png --------------------------------------------------------------------------------