Solución del reto y añadir HTML

Clase 8 de 15 • Curso de Stylus 2018

Resumen

Resolución del reto: En esta clase te muestro cómo solucionar el reto que te propuse en la clase anterior. Además, te mostraré cómo usar HTML en nuestro archivo.

Juan C Felizzola

student•

Archivos vistos en clase:

style.styl

@import "lib/_variables.styl"
@import "lib/_mixins.styl"
@import "lib/_functions.styl"

@import "layout/_site.styl"
@import "layout/_blocks.styl"

@import "base/_links.styl"
@import "base/_buttons.styl"
@import "base/_typography.styl"
@import "base/_tables.styl"

@import "components/_grid.styl"
@import "components/_utilities.styl"

_site.styl

html
  background: color-backgroud
  font-size: 87.5%
  -webkit-overflow-scrolling: touch
  -webkit-tap-highlight-color: transparent
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%


body
  margin: 0
  padding: 0
  width: 100%
  background-color: transparent
  font-family basefont
  line-height: lineheight
  color: textcolor

_blocks.styl

.block
  max-width: 60%
  margin-right auto
  margin-left auto
  margin-bottom: padding
  background-color: color-white
  position: relative
  &__body
    padding: padding 
    background-color: color-white
    position: relative
  
  &_title
    background-color: color-white
    padding: padding
    font-size: 28px
    font-weight: bold
    color: color-secondary
    border-bottom 1px solid color-lightgrey

_buttons.styl

.btn
  display inline-block
  width auto
  line-height 2.5
  color buttoncolor
  text-align center
  vertical-align middle
  white-space nowrap
  background-color buttonbackground
  cursor pointer
  margin-left 0
  margin-top 0
  margin-right 0
  margin-bottom 0
  padding-top 0
  padding-bottom 0
  padding-right 2.2em
  padding-left 2.2em
  text-transform uppercase
  text-decoration none
  font-size basefontsize 
  font-weight bold
  letter-spacing .05em
  border-radius 0
  transition all .2s ease-in
  border none
  &:hover
    text-decoration none
    color white
    background-color color-brand
    cursor pointer

  &:active,
  &:focus
    outline: none

  /*
  ** Secondary buttons
  */

  &.btn--secondary
    background-color white
    color color-brand
    &:hover
      background-color color-brand
      color: white

  /*
  ** Disable buttons
  */
  
  &.btn--disable
    cursor not-allowed
    background-color grey
    color white
    border-color gray
    &.:visited
      background-color grey
      color: grey

    &:hover
      cursor not-allowed
      color white
      background-color grey
      border-color darken(grey, 10)

  /*
  ** Error buttons
  */
  
  &.btn--error, .btn--error:visited
    color color-error
    border-color lightgray
    &:hover
      background-color color-error
      color white

  /*
  ** Warning buttons
  */

  &.btn--info, btn--info:visited
    color color-brand
    border-color color-brand
    &:hover
      background-color color-brand
      color white

_variables.styl

/*
  Colors
**
  Branding colors
*/

color-brand = #ea83ee
color-secondary = rgb(219, 216, 121)

color-black = rgb(0,0,0)
color-darkgrey = #4D4D4D
color-grey = #737373
color-lightgrey = #BFBFBF
color-white = rgb(255, 255, 255)

color-border = color-darkgrey

//Texturas
color-alert = rgb(252, 228, 207)
color-error = rgb(218, 79, 73)
color-invert = invert(color-error)
color-info = rgb(66, 184, 221)
color-success = rgb(91, 183, 91)

// Tipografia
basefont = 'Quicksand', sans-serif
basefontsize = 16px
baseheadingfont = basefont
baseheadingfontweight = bold
altfont = Georgia, Times, 'Times New Roman'
codefont = 'Courier New', monospace 
lineheight = 1.5
textcolor = color-blank

button-color = color-white
button-background = color-brand
color-brackground = color-white

// Constantes
border-radius = 3px
padding = 24px
page-max-width = 800px

img-dir = '/img'

Eddy Yalico

student•

gracias por el aporte

Harold David Avila Sabogal

student•

Que buen aporte muchas gracias

Ana Lima

student•

Estaría muy genial que subieran esos archivos a la plataforma para poder visualizarlos bien.

Yomar Esteban Miranda Sarmiento

student•

Al igual que tu estoy esperando a que suban los archivos a algún repositorio o al sistema.

Yomar Esteban Miranda Sarmiento

student•

Acabo de avanzar a la siguiente clase y me dí cuenta que allí se encuentran los archivos, cuando quieras puedes entrar a revisar.

Karina Romero

student•

Comparto la solución a la que llegué. Saludos.

-------------------------VARIABLES ----------------------------------

font-family-base: "Ubuntu", sans-serif font-family-header: "Roboto", Arial

font-size-small = 16px font-size-normal = 25px font-size-big = 60px

color-brand: #ffffff color-primary: #000000 color-secondary: #BFBFBF

color-alert: yellow color-warning: red

margin: 1em padding: 1em border-radius: 5px

-------------------------ARCHIVOS ----------------------------------

@import "lib/_variables.styl" @import "lib/_mixins.styl" @import "lib/_functions.styl"

@import "elements/_buttons.styl" @import "elements/_fonts.styl" @import "elements/_inputs.styl"

@import "layout/_cards.styl" @import "layout/_layout.styl"

Harold David Avila Sabogal

student•

buen aporte gracias

Eduardo Reyes

student•

¿Y los archivos de la clase?

Andrés Vega

student•

Donde podemos encontrar el repositorio con los archivos completos.

Joel Vicente Nieto Gómez

student•

Pero los que compartió Wilson están equivocados para este curso de Stylus, ya que ese repositorio es de archivos compilados con Sass.

Alex Camacho

teacher•

Al hacer el import, no es necesario especificar la extensión del archivo. Ejemplo:

@import "./Utilities/_variables"

Reynaldo Francisco Moreno Briceño

student•

En mi caso utilizo un archivo llamado _globales.styl, donde tengo las variables, mixins y funciones. Es mas practico acceder a un solo archivo gobal, y de esa manera lo importamos de primero en nuestro archio styl principal.

Carlos Zabala Roqueme

student•

Los media queries tambien deberian estar en un parcial aparte?

Edward Steven Ramos Palacios

teacher•

Desde mi experiencia te aconsejo que no. Siempre es bueno mantenerlas en el mismo file de las clases que quieres modificar.

John Edward León Muñoz

student•

Post que sugiere como organizar parciales de estilo dentro del proyecto. En el usan SASS pero es lo mismo:

Link: https://medium.com/@ger86/cómo-organizar-los-archivos-sass-de-tu-proyecto-c8b02242d95

Gabriel Alejandro Delgado Álvarez

student•

Vine al curso de Stylus justo despues de terminar el curso de Sass, y si bien no es algo super importante que nos muestre el codigo HTML que escribio y los avances que escribio en el Preprocesador y se compilaron, siempre se agradece, porque al pasar de una clase a otra y ver todo eso, y que la clase se base en algo que simplemente apareció, te deja algo perdido. Y pues ya es la segunda vez ;v

Jhonatan David Ibarra Lavado

student•

estupendo sigamso :d

Mateo Espinosa Cubillos

student•

Sería bueno que hubíeramos seguido un proyecto con el profe en la clase, pero va a su ritmo :/

Andrés David Loaiza Zamudio

student•

Vale, que genial

Fernando Galdós

student•

Sigamos

Naldo Duran

student•

@import "lib/_variables.styl"
@import "lib/_mixins.styl"
@import "lib/_functions.styl"

@import "layout/_site.styl"
@import "layout/_blocks.styl"

@import "base/_links.styl"
@import "base/_buttons.styl"
@import "base/_typography.styl"
@import "base/_tables.styl"

@import "components/_grid.styl"
@import "components/_utilities.styl"

html
  background: color-backgroud
  font-size: 87.5%
  -webkit-overflow-scrolling: touch
  -webkit-tap-highlight-color: transparent
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%


body
  margin: 0
  padding: 0
  width: 100%
  background-color: transparent
  font-family basefont
  line-height: lineheight
  color: textcolor

.block
  max-width: 60%
  margin-right auto
  margin-left auto
  margin-bottom: padding
  background-color: color-white
  position: relative
  &__body
    padding: padding 
    background-color: color-white
    position: relative
  
  &_title
    background-color: color-white
    padding: padding
    font-size: 28px
    font-weight: bold
    color: color-secondary
    border-bottom 1px solid color-lightgrey

.btn
  display inline-block
  width auto
  line-height 2.5
  color buttoncolor
  text-align center
  vertical-align middle
  white-space nowrap
  background-color buttonbackground
  cursor pointer
  margin-left 0
  margin-top 0
  margin-right 0
  margin-bottom 0
  padding-top 0
  padding-bottom 0
  padding-right 2.2em
  padding-left 2.2em
  text-transform uppercase
  text-decoration none
  font-size basefontsize 
  font-weight bold
  letter-spacing .05em
  border-radius 0
  transition all .2s ease-in
  border none
  &:hover
    text-decoration none
    color white
    background-color color-brand
    cursor pointer

  &:active,
  &:focus
    outline: none

  /*
  ** Secondary buttons
  */

  &.btn--secondary
    background-color white
    color color-brand
    &:hover
      background-color color-brand
      color: white

  /*
  ** Disable buttons
  */
  
  &.btn--disable
    cursor not-allowed
    background-color grey
    color white
    border-color gray
    &.:visited
      background-color grey
      color: grey

    &:hover
      cursor not-allowed
      color white
      background-color grey
      border-color darken(grey, 10)

  /*
  ** Error buttons
  */
  
  &.btn--error, .btn--error:visited
    color color-error
    border-color lightgray
    &:hover
      background-color color-error
      color white

  /*
  ** Warning buttons
  */

  &.btn--info, btn--info:visited
    color color-brand
    border-color color-brand
    &:hover
      background-color color-brand
      color white

/*
  Colors
**
  Branding colors
*/

color-brand = #ea83ee
color-secondary = rgb(219, 216, 121)

color-black = rgb(0,0,0)
color-darkgrey = #4D4D4D
color-grey = #737373
color-lightgrey = #BFBFBF
color-white = rgb(255, 255, 255)

color-border = color-darkgrey

//Texturas
color-alert = rgb(252, 228, 207)
color-error = rgb(218, 79, 73)
color-invert = invert(color-error)
color-info = rgb(66, 184, 221)
color-success = rgb(91, 183, 91)

// Tipografia
basefont = 'Quicksand', sans-serif
basefontsize = 16px
baseheadingfont = basefont
baseheadingfontweight = bold
altfont = Georgia, Times, 'Times New Roman'
codefont = 'Courier New', monospace 
lineheight = 1.5
textcolor = color-blank

button-color = color-white
button-background = color-brand
color-brackground = color-white

// Constantes
border-radius = 3px
padding = 24px
page-max-width = 800px

img-dir = '/img'

Solución del reto y añadir HTML

Introducción al curso

Qué aprenderás sobre Stylus

Introducción a Stylus

Compilación e instalación

Cómo funciona Stylus

Sintaxis

Anidaciones

Reto: Instalación con Grunt

Herramientas de Stylus

Variables

Solución del reto y añadir HTML

Cómo escapar caracteres con Stylus

Estructura de CSS y propuesta de reto

Mixins

Mixins Paramétricos

Funciones internas

Condicionales

Directiva for