No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Estilos base

7/32
Recursos

Ahora, vas a crear los estilos base y variables que usaremos en todo nuestro proyecto.

C贸mo hacer el posicionamiento de contenido

Como parte de las buenas pr谩cticas tenemos un orden en que es recomendable escribir el c贸digo dentro de CSS. Te ayudar谩n a tener todas las secciones organizadas y saber d贸nde regresar cuando necesites hacer un cambio o solucionar un problema.

  1. Posicionamiento --> static, absolute, relative, fixed.
  2. Modelo de caja (Box model) --> margin, border, padding, content.
  3. Tipograf铆a --> tipos, tama帽os de fuente, etc.
  4. Estilos visuales --> box-shadow, border-radius, gradient, etc.
  5. Otros --> miscel谩neos, reglas CSS y m谩s.

C贸mo crear variables

En la secci贸n de Branding del dise帽o en Figma podemos ver todos los colores que se usan. Por ahora, las variables que vamos a crear van a ser de estos colores.
crear variables en figma

Al hacer clic sobre el 铆cono de ajuste de cada color, se abre la informaci贸n sobre el mismo. Ah铆 tenemos el c贸digo hexadecimal que necesitamos.
image.png

Recordemos que para declarar una variable en CSS debemos usar la funci贸n :root y a帽adir un nombre a la variable que contendr谩 el valor que vamos a usar repetidas veces en nuestro c贸digo. Seleccionando todos los colores, tendr铆amos:

:root {
--bitcoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #282623;
--black: #201e1c;
--grey: #bababa;
--off-white: #faf8f7;
--just-white: #fff;
}

C贸mo hacer el reinicio de estilos

Una vez declarada la secci贸n de variables que va hasta arriba, es hora de reiniciar los estilos que el navegador trae por defecto con las pr谩cticas que ya conocemos.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Tambi茅n cambiaremos el tama帽o de fuente a 62.5% para que sea sencillo de usar con las medidas REM. Y cambiaremos el estilo de fuente que hemos embebido desde Google Fonts.

html {
    font-size: 62.5;
    font-family: 'DM Sans', sans-serif;
}

Acabas de aplicar los primeros estilos al reiniciar los que vienen por defecto, aplicar el estilo de fuente y crear las primeras variables del proyecto. 隆Avanzamos r谩pido y seguro!

Revisa los inicios del proyecto en: Arquitectura inicial

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 103

Preguntas 27

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Agregando estilos:

  1. Posicionamiento --> static, absolute, relative, fixed
  2. Modelo de caja (Box model) --> margin, border, padding, content
  3. Tipograf铆a --> tipos, tama帽os de fuente, etc
  4. Estilos visuales --> box-shadow, border-radius, gradient, etc
  5. Otros --> reglas CSS y m谩s

Colores:

--bitcoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #282623;
--black: #201e1c;
--grey: #bababa;
--off-white: #faf8f7;
--just-white: #fff;

Fuente:

  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;

Hola amigos,

Diego hace uso de la siguiente extensi贸n de VS Code para resaltar colores en sus archivos CSS.

El resultado es el ya conocido.

Saludos!

yo en las variables a帽adi las FUENTES y COLORES

:root{
	--font-sans:'DM Sans', sans-serif;
	--font-inter:'Inter', sans-serif;
	--size-300:300;
	--size-400:400;
	--size-500:500;
	--size-700:700;
	--background:#E5E5E5;
	--linear-gradient:207.8deg, #201E1C 16.69%, #F7931A 100%;
	--bitcoin-orage:#F7931A;
	--soft-orange:#FFE9D5;
	--secondary-blue:#FFE9D5; 
	--soft-blue:#E7F5FF;
	--warm-black:#201E1C;
	--warm-blackplus1:#282623;
	--gray:#BABABA;
	--off-white:#FAF8F7;
	--just-white:#FFFFFF;
}

Nombrar variables en CSS

El nombre no debe ser igual al valor:
Cuando el nombre de la variable est谩 ligada a su valor perdemos una de sus funciones que es la versatilidad de cambiar su valor y que todo el dise帽o cambie con ella por ejemplo:
Si tenemos una variable que se llama

--bitcoin-orange: #f7931a;

si luego quieres cambiar el color a un azul

--bitcoin-orange: #0000ff;

la variable pierde todo el sentido porque tiene en el nombre naranja, pero su valor es azul

El orden:

Cuando nombramos una variable es importante el orden porque cuando estamos escribiendo el c贸digo nuestro editor tratara de autocompletarnos por eso lo mejor es nombrar la variable desde su caracter铆stica m谩s general hasta la m谩s espec铆fica para aprovechar esta caracter铆stica del editor

Meh 馃槙

Mejor 馃槑

Variables finales 馃槏

:root {
  /*------------------ colors --------------*/
  --color-primary: #f7931a;
  --color-primary-soft: #ffe9d5;
  --color-secondary: #1a9af7;
  --color-secondary-soft: #e7f5ff;
  --color-dark-warm: #201e1c;
  --color-dark: #282623;
  --color-ligt-darker: #bababa;
  --color-background: #faf8f7;
  --color-light: #fff;

  /*------------------ Fonts --------------*/
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

Personalmente me parece innecesario agregar una variable para colores como blanco o negro, ya que puedes poner simplemente white o black.
Adem谩s si lo haces para que al cambiar el valor de la variable te cambie el valor en todos los lugares que lo utilizaste, es mala pr谩ctica identificarlo por el nombre del color. Lo suyo ser铆a identificarlo con nombres m谩s generales como primary-color, secundary-color, dark-color,鈥

:root {
    --bitcoin-color: #F7931A;
    --soft1-color: #FFE9D5;
    --secundary-color: #1A9AF7;
    --soft2-color: #E7F5FF;
    --warm-dark: #201E1C;
    --warm2-dark: #282623;
    --grey: #BABABA;
    --off-light: #FAF8F7;

    --font-DM: 'DM Sans', sans-serif;
    --font-inter: 'Inter', sans-serif;
}

Les dejo un resumen de lo que vimos en esta incre铆ble clase 馃槃

  • Convenci贸n que Diego usa y recomienda seguir al momento de trabajar en CSS.

  • C贸digo de la declaraci贸n de Variables!

:root{
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black:#201E1C;
    --black: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}
  • C贸digo aplicado a todos los elementos
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
  • C贸digo aplicado al html, que en este caso fue la familia de la fuente y el tama帽o.
html{
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

Pr贸ximamente mas res煤menes 馃槀 馃槂

  • Analisis de proyecto a traves de figma construyendo wareframe, aqui nos pasaran una url donde podremos ver lo que tendremos que construir.

  • Este es el link para el proyecto en figma https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=83%3A132

  • Codigo del repositorio de github https://github.com/degranda/batata-bit

  • tenemo sun header, main(4 secciones), y footer

  • Descargar todos los assets desde figma para tenerlos disponibles en nuestros proyecto, Seleccionamos la img>export>seleccionamos el formato de la img>export , aqui tambien tenemos la opcion de ver un preview, si queremos descargar dos elementos por ejemplo el logo y el isotipo para ello buscamos un donde esta el grupo en el panel derecho o seleccionarlos con ctrl + clic sobre los elementos a descargar , despues creamos una carpeta assets y la separemos en dos carpetas mas icons y imgs.

  • Ahora revisaremos las fuentes que ocuparemos, para ello revisaremos en figma y por buenas practicas el dise帽o no deberia de tener mas de dos fuentes, estas las descaremos de google font, la primera es DM sans descargaremos la de un peso de 400, 500 y el de 700 y inter con un peso de 300 y 500, aqu铆 tendremos dos formas de traernos estas fuentes a nuestro proyecto y son a trav茅s de un link o con un @import desde css pero esta no es una buena practica cuando tenemos mas de una, entonces lo haremos copiando el link pegando en el html y para hacer uso de ellas usaremos este c贸digo

    font-family: 'DM Sans', sans-serif;
    font-family: 'Inter', sans-serif;
    
  • creamos el archivo index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,500;0,700;1,400&family=Inter:wght@300;500&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header></header>
        <main>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </main>
        <footer></footer>
    </body>
    </html>
    
  • comenzaremos a establecer nuestro estilos bases creando un archivo styles.css, aqu铆 nos vamos a figma a la secci贸n de branding y veremos todos los colores que se est谩n usando en todo el proyecto despu茅s podemos seleccionar uno y ver la composici贸n de este al igual estos el dise帽ador pudo haberle puesto nombres personalizados que podemos usar para nombrar nuestras variables y tener una relaci贸n entre el css y el dise帽o de figma , estos estilos se pueden ordenar de una forma que podamos buscar cualquier elemento de forma r谩pida:

    1. Posicionamiento: static, absolute, relative, fixed
    2. Modelo de caja (Box model): margin, border, padding, width and height
    3. Tipograf铆a: Tama帽os, pesos, tipos de fuentes
    4. Visuales: box-shadow, border-radius, gradient, etc
    5. Otros: todo lo dem谩s
    /* Crearemos nuestras variables */
    :root {
        /* Colores */
        --bitcoin-orange: #f7931a;
        --soft-orange: #ffe9d5;
        --secondary-blue: #1a9af7;
        --soft-blue: #e7f5ff;
        --warm-black: #201e1c;
        --black: #282623;
        --grey: #bababa;
        --off-white: #faf8f7;
        --just-white: #fff;
    }
    
    /* Quitaremos todas las propiedas que vienen por defecto */
    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    html{
        /* esto para poder hacer el uso de rem, cambiando la base que tiene por defecto el 
        navegador que es una base 16px y la pasaremos a una base 10px ya que sera mas facil
        calcular el numero de la 16px*62.5% = 10px*/
        font-size: 62.5%;
        /* aqui solo pondemos nuestra fuente base, y la otra fuente la usaremos solo en 
        ciertos elementos especificos*/
        font-family: 'DM Sans', sans-serif
    }
    

Quiero dejar comentado que hasta ahora me parece bastante bueno el curso, por el hecho de no trabajar directamente al c贸digo, sino de pre analizar el dise帽o con figma y obtener los recursos necesarios antes de lanzarnos de cabeza a codear. A su vez, el hecho de que nos ense帽en como ser铆a el trabajo de un frontend apartir de un dise帽o en figma me parece excelente. Por ahora el curso me parece muy bien logrado aunque apenas lleve unas pocas clases

Sugerencia sobre box-sizing: border-box


En la clase el profesor muestra lo siguiente en el CSS:

* {
    box-sizing: border-box;
} 

Que aunque funciona bien, omite los pseudoelementos, lo que puede dar lugar a resultados inesperados en algunos proyectos.
A causa de eso surge el Universal box-sizing :

*, *:before, *:after {
  box-sizing: border-box;
}

Que este m茅todo si toma en cuenta los pseudoelementos. Pero el asterisco *, hace que sea dif铆cil usar content-box o padding-box en otras partes del CSS.
Lo que nos lleva al l铆der actual de las buenas practicas:
El Universal box-sizing con herencia :

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Este reset brinda mas flexibilidad que sus predecesores y permite usar content-box o padding-box donde sea compatible sin preocuparse de que un selector universal anule tu css.
Recomendaria usar el Universal box-sizing con herencia para sus proyectos. Y cabe agregar que normalmente box-sizing no se hereda, por lo que es un comportamiento especializado.

Si quieren saber mas sobre esto o como usarlo visiten: Box Sizing | CSS-Tricks
Ahi explican muy bien esto, y esa pagina es buen铆sima para cosas de CSS.
O visiten el autor original de este m茅todo: Paul Irish
El explica el porque surge, y las compatibilidades.

/* 1. Posicionamiento
2. Modelo caja (Box model)
3. Tipograf铆a
4. Visuales
5. Otros */

:root{
    /* Colores */
--bitcoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #282623;
--black: #201e1c;
--grey: #bababa;
--off-white: #faf8f7;
--just-white: #fff;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}```

No hay una sola manera de escribir el CSS. La convenci贸n(orden) que sugiere el profesor para escribir las propiedades es buena y la pueden usar.

Existen otras y cual usen depender谩 del lugar donde terminen trabajando.

Personalmente acostumbro usar la gu铆a de estilos de Google que sugiere usar orden alfab茅tico y otras cosas.

Se los dejo por si es algo que les interese: https://google.github.io/styleguide/htmlcssguide.html#CSS

El uso del rem y estilos iniciales se explican en la clase 35 (medidas REM) del Curso definitivo de HTML y CSS

Aqu铆 est谩 el reset de estilos que se utiliza profesionalmente:
https://meyerweb.com/eric/tools/css/reset/

Este profe ense帽a muy buenos hacks o trucos, denle un tamal por eso

Curso Definitivo de HTML y CSS

excelente curso lo recomiendo antes de seguir con este

por que usa 62.5% en el font-size? fue algo que sac贸 del dise帽o o simplemente lo decidi贸?

Para mi es mas practico colocar simpre la primera palabra de cada varibale como descripci贸n del contenido de la varible para que que sea mas f谩cil encontrar el nombre de ese color en proyectos grandes.
Ej
鈥揷olor鈥
鈥揻ont鈥
鈥揵ox-shadow
etc.

.root{
    /* colors */
    --color-bitcoin-orange:#f7931a;
    --color-soft-orange:#ffe9d5;
    --color-secundary-blue:#1a9af7;
    --color-soft-blue:#E7f5ff;
    
    --color-warm-black:#201e1c;
    --color-warm-black:black;
    
    --color-grey:grey;
    --color-offwhite:#faf8f7;
    --color-white:#fff;
}

/*

  1. Posicionamiento
  2. Modelo de caja (box model)
  3. Tipografia
  4. Visuales
  5. Otros
    */

:root {
/* Colores */
鈥揵itcoin-orange: #F7931A;
鈥搒oft-orange: #FFE9D5;
鈥搒econdry-blue: #1A9AF7;
鈥搒oft-blue: #E7F5FF;
鈥搘arn-black: #201E1C;;
鈥揵lack: #282623;
鈥揼rey: #BABABA;
鈥搊ff-white: #FAF8F7;
鈥搄ust-white: #FFFFFF;
}

  • {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

html {
font-size: 62.5%;
font-family: 鈥楧M Sans鈥, sans-serif;
}

recomendaci贸n estructura de una regla de css

.clase{
	posicionamiento
	modelo de caja (box model)
	tipografia
	visuales
	otros
}```

el css hasta los momentos鈥

/*

  1. Posicionamiento
  2. Box model
  3. Tipografia
  4. Visuales
  5. Others
    */

:root{
/* colores */
鈥揵itcoin-orage:#F7931A;
鈥搒oft-orange:#FFE9D5;
鈥搒econdary-blue:#FFE9D5;
鈥搒oft-blue:#E7F5FF;
鈥搘arm-black:#201E1C;
鈥揵lack:#282623;
鈥揼ray:#BABABA;
鈥搊ff-white:#FAF8F7;
鈥搄ust-white:#fff;
}

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

html{
font-size: 62.5%;
font-family: 鈥楧M Sans鈥, sans-serif;
}

Muy buen m茅todo este de no andar codeando a la loca sino d谩ndole orden a todo, esa preproducci贸n es muy importante 馃憦

Este es el proyecto de figma de donde Diego toma las informaci贸n:
https://www.figma.com/community/file/897624260484339106

Saludos.

SI realmente este es un buen flujo de trabajo, he visto quienes van resolviendo a mucho detalle por partes pero me parece que este va muy buen.

Para definir los estilos podemos seguir el siguiente orden:

  1. Posicionamiento.

  2. Modelo de caja.

  3. Tipograf铆a.

  4. Estilos visuales.

  5. Otros.

Se agregar las variables para el color

Entre las ventajas de usar variables en CSS: el c贸digo se es m谩s legible adem谩s es m谩s f谩cil cambiar los valores.
Se pueden declarar de manera global o local, y se llaman con la funci贸n var( --variable) justo en el valor de la propiedad CSS.

Se aplican las propiedades universales

Con 麓box-sizing: border-box;` se le dice al navegador que sume el valor de borde o de relleno para la dimensi贸n total elemento html.

Se establece el tama帽o de la fuente

El tama帽o de la fuente font-size: 62.65%;crea una equivalencia para poder usar REM como pixeles. Ejemplo: 16px es igual a 1.6 REM.

/*
1. Posicionamiento
2. Modelo caja (Box model)
3. Tipograf铆a
4. Visuales
5. Otros
*/```

Hola a todos, con base en este video se me ocurre que podemos optimizar el esquema de coding CSS bajo el siguiente listado:

/*
1. Variables
2. Default set (* {box-sizing, margin & padding} html {REM defaults & main font})
3. Posicionamiento (position, display, etc.)
4. Modelo de caja (Box model - widht/height/).
5. Tipograf铆a (fuentes y tama帽os)
6. Visuales (Shadow-box, Borders, background-color, color)
7. Otros - Miscelaneous
*/```

Saludos!

2. Estilos base

Les comparto el c贸digo CSS de la clase:

/*
1. Posicionamiento
2. Modelo de caja (Box Model)
3. Tipograf铆a
4. Visuales
5. Otros
*/
/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*VARS*/
:root {
    /*Colores*/
    --bitcoin-orange: ##F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warn-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
html {
    /*para usar rem*/
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

ctrl + k + c Shortcut para agregar un comentario en CSS

ESTOS SON MIS COLORES , LOS CAMBIE UN POCO A MI GUSTO

colores:
:root {
/* Colores */
鈥揵itcoin-orange: #f7931a;
鈥搒oft-orange: #ffe9d5;
鈥搒econdary-blue: #1a9af7;
鈥搘arm-black: #201e1c;
鈥揵lack: #282623;
鈥揼rey: #bababa;
鈥搊ff-white: #faf8f7;
鈥搄ust-withe: #fff;
}

Es oro que Diego comparta estos GUIDELINES que utiliza para sus proyectos

Tu css debe quedar mas o menos as铆:

/*
1. Posicionamiento
2. Modelo de caja (Box-model)
3. Tipograf铆a
4. Visuales
5. Otros
*/
:root{
    /*Colores*/
    --bitcoint-orange: #F7931A;
    --soft-orange: #FFE9D4;
    --secundary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black:#282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #fff;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

Les recomiendo mucho https://stylelint.io/ para no tener de ordenar el css a mano

Me gust贸 mucho establecer el orden al crear el css, creo que me vendr谩 muy bien porque mis css acaban siento ca贸ticos.

/*--
Relacion de la generacion de los estilos:

1) posicionamiento.--------------->(position static, absolute, relative, fixed)
2) Modelo de caja (Box Model).---->(para darle cierta dimension margin, border, padding, content, tama帽os widht high etc)
3) Tipograf铆a.-------------------->(tipos, tama帽os de fuente, etc)
4) Visuales.---------------------->(Estilos que tengan que ver con tem谩s visuales, box-shadow, border-radius, gradient, etc)
5) Otros.------------------------->(miselanius u otros como reglas de CSS y m谩s)
--*/

:root {
    /*colores*/
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-orange: #f88b32;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}```
/*
1. Posicionamiento
2. Modelo caja (box model)
3. Tipografia
4. Visuales
5. Otros
*/
:root{
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange:#FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}```

![](

No s茅 si s贸lo me pasa a m铆 pero los 煤ltimos 39s del v铆deo no se escuchan

Oigan chicos, en el intro de este capitulo hay algo raro, hay como una voz pero muy baja diciendo algo, es muy raro, casi como un murmullo, no les parece?

Para mejores practicas, cuando agreguemos los estilos deben de ser en este orden:
** 1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipograf铆a
4. Visuales
5. Otros **

tambien, para facilitar nuestro trabajo, agregamos los colores a usar en variables:
** --bitcoin-orange: #f7931a;
鈥搒oft-orange: #ffe9d5;
鈥搒econdary-blue: #1a9af7;
鈥搒oft-blue: #e7f5ff;
鈥搘arm-black: #201e1c;
鈥揵lack: #282623;
鈥揼rey: #bababa;
鈥搊ff-white: #faf8f7;
鈥搄ust-white: #fff; **

Aqu铆 les dejo el c贸digo de la clase 馃槂 :

/*
1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipografia
4. Visuales
5. Otros 
*/

:root {
  /* colors */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding-left: 0;
}

html {
  font-size: 62.5%;
  font-family: 'DM Sans', sans-serif;
}

CODIGO DE LOS ESTILOS CSS

/* 
1. Posicionamiento
2. Modelo caja (Box model)
3. Tipograf铆a
4. Visuales
5. Otros 
*/
:root {
    /*Colores*/
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

En mi caso utilizo Sass para trabajar el CSS, todo esto lo creo en un
parcial llamado _globales.scss y lo importo al parcial principal (el cual compilare) y me dara mi archivo CSS final.

// /*MANEJO DE PROPIEDADES
//
//  1) Propiedades del modelo de caja (display, width, height, margin, etc)
//  2) Posicionamiento (position, left, top, right, etc)
//  3) Tipograf铆a(text-transform, text-decoration)
//  4) Decoraci贸n (background-image, color, etc)
//  5) Variables
//  6) Mixins */

// FUENTES

$Fuente_1: 'DM Sans', sans-serif;
$FUente_2: 'Inter', sans-serif;

// COLORES

$linear_bg: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
$bitcoin_orange: #F7931A;
$soft_orange: #FFE9D5;
$secondary_blue: #1A9AF7;
$soft_blue: #E7F5FF;
$warn_black: #201E1C;
$warn_black2: #282623;
$color_grey: #BABABA;
$off_white: #FAF8F7;
$just_white: #FFFFFF;

// REINICIANDO ESTILOS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: $Fuente_1;
}

Aqui el codigo final del archivo css, lo hice con ayuda de algunos otros aportes para que este completo

/*
1.-Posicionamiento --> static, absolute, relative, fixed
2.-Modelo de caja (Box model) --> margin, border, padding, content
3.-Tipograf铆a --> tipos, tama帽os de fuente, etc
4.-Estilos visuales --> box-shadow, border-radius, gradient, etc
5.-Otros --> reglas CSS y m谩s
*/

:root {
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'DM sans', sans-serif;
}

style.css

/* 
1. Posicionamiento
2. Modelo caja (box model)
3. Tipograf铆a
4. Visuales
5. Otros
*/

:root {
  /* Colores */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

![]()A alguien m谩s le sucede que figma ya no le deja ver el codigo del color? a m铆 s贸lo me deja ver el nombre del color

Estilos bases del proyecto:

Convenci贸n usada por Diego De Granda para estilos en CSS: 1.posicionamiento 2.Modelo de caja (Box Model) 3.Tipografia 4.Visuales 5.Otros.

馃敟馃敟Vamos con todo con este proyecto 馃敟馃敟

:root{
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --Soft-Orange:#FFE9D4;
    --Secondary-Blue:#1A9AF7;
    --soft-blue:#E7F5FF;
    --warm-black:#201E1C;
    --warm-black-1:#282623;
    --Grey:#BABABA;
    --off-White:#E6E6E6;
    --Just-White:#FFFFFF;
}
.
* { box-sizing: border-box;
    padding: 0;
    margin: 0;}

html 
  { font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

Buena clase

Alphabetical sorter es la extensi贸n de VSC para ordenar alfab茅ticamente. Es mejor pr谩ctica hacerlo as铆 que como proponen en este curso.

Es mejor organizarlo por orden alfab茅tico, incluso existen extensiones dirigidas a este prop贸sito.

Orden de los estilos


inicial para css (con sus respectivos comentarios)

/* 
    Posicionamiento             --> static, absolute, relative, fixed
    Modelo de caja (Box model)  --> margin, border, padding, content
    Tipograf铆a                  --> tipos, tama帽os de fuente, etc
    Estilos visuales            --> box-shadow, border-radius, gradient, etc
    Otros                       --> reglas CSS y m谩s
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

html {
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}
/*
1- posicionamiento: posicionamiento con  posistion-fix, position-relative, etc
2- Modelo de caja (box model): margin, padding, tama帽o de caja wid heght
3- Tipografia: fuentes, tama帽o de fuentes, tipo de fuentes
4-  visual: temas visuales, shadow-box, border-radis

5- otros: 
*/

Empec茅 este curso hace casi un a帽o, y decid铆 que necesitaba saber un poco m谩s de otras cosas para tomarlo, he hecho como 15 cursos m谩s y ahora regreso a 茅l. La suscripci贸n de Platzi definitivamente es 煤til para distintas formas de aprendizaje.

Manera en que De Granda agrega estilos:

  1. Posicionamiento --> static, absolute, relative, fixed
  2. Modelo de caja (Box model) --> margin, border, padding, content
  3. Tipograf铆a --> tipos, tama帽os de fuente, etc
  4. Estilos visuales --> box-shadow, border-radius, gradient, etc
  5. Otros --> reglas CSS y m谩s

En el root nosotros vamos a implementar nuestras variables (color, fuente, etc)

:root {
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --offwhite: #faf8f7;
  --just-white: #ffffff;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}```
/* Convencion para generar los estilos
1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipografia
4. Visuales
5. Otros 
*/
:root {
    /* Colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

Estilos Base:

/*

1. Posicionamiento
2. Modelo de Caja (BoxModel)
3. Tipografia
4. Estilos con temas visuales (shadow box, border-radius, etc.)
5. Otros

*/
:root{
    /* colores */
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --gray: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-family: 'DM Sans', sans-serif;
    font-size: 62.5%;
}
body{
    font-size: 1.6rem;
}

variables de color css

Excelente esta convencion ya que nos ayuda a tener un c贸digo mas organizado

Me siento todo un profesional creando estos estilos bases, fuentes, colores y teniendo todo tan organizado. Muy buena introducci贸n hasta ahora

Encontr茅 los colores en la secci贸n de referencias en el proyecto de Figma. tenerlo en cuenta.

Estilos base - Notion

Comparto mis apuntes de la clase, con algunos cambios en el CSS porque quise seguir el proyecto a帽adiendo un estilo un poco m谩s personalizado a mi manera.

Por si no recuerdan de como utilizar las variables:

:root{
	--color-parrafo: green;
}
p{
	color: var(--color-parrafo); font-weight: bold;
}

Si no encuentran branding como en mi caso :c era por que el men煤 de pages tiene un peque帽o scroll

1.- Los estilos base son los estilos iniciales
2.- Incluimos margin, pading y boxsizing ademas de usar rem
3.- crear variables para los colores que se usaran continemente
4.- estructura:

- Posicionamiento: static, absolute, relative, fixed
- Modelo de caja (Box model): margin, border, padding, content
- Tipograf铆a: tipos, tama帽os de fuente, etc
- Estilos visuales: box-shadow, border-radius, gradient, etc
- Otros: reglas CSS y otros

5.- en el root van las variables su sintaxis es:

--nombre: #numero;

configuracion de variables en css

:root{
    --bitcoin-orange:#F7931A;
    --soft-orange:#FFE9D5;
    --secondary-blue:#1A9AF7;
    --soft-blue:#E7F5FF;
    --warm-black:#201E1C;
    --black:#282623;
    --grey:#BABABA;
    --off-white:#FAF8F7;
    --just-white:#FFFFFF;
}

Para que ahorren tiempo 馃槂


:root {
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

body {
    overflow-x: hidden;
    font-size: 1.6rem;
}

Comparto mi configuraci贸n de variables en SASS

Reiniciar los estilos por defecto del navegador:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/*  Peque帽a convencion:

    1. Posicionamiento (position fix, relative)
    2. Modelo caja (margin, padding, width, height, Box Model)
    3. Tipografia
    4. Visuales (box-shadow, border-radius)
    5. Otros
*/
:root{

    /* Colores */
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --warm-black: #201E1C;
    --black: #282623;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;

    /* font-size and font-family */
	--font-sans:'DM Sans', sans-serif;
	--font-inter:'Inter', sans-serif;
	--fs-s:30rem; /* don麓t linked  */
	--fs-m:40rem;
	--fs-l:50rem;
	--fs-xl:70rem; 
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: var(--font-sans);
}

Esta super interesante la convencion que usa diego para estructurar los estilos

  • Posicionamiento (Display, flex, relative, justify-content, etc)
  • Modelo de caja (box model, padding, margin, width, height)
  • Tipograf铆a (Font-size, font-weight, font-family, etc)
  • Visuales (box shadow, border radius, color)
  • Otros.

Con esto asumo que debe quedar super organizados los estilos y legibles sobre todo por las secciones, lo digo porque en el reto de clonar wikipedia trate de hacer mis estilos 鈥渙rdenadamente鈥 pero en primera me quedaron demasiadas lineas de codigo repetidas (que ahora me queda un poco mas claro tambien el uso de las variables), y sobretodo estaba hecho un alboroto jejee

Aqu铆 los colores en css que estaremos utilizando.

:root{
        /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --gray: #bababa;
    --off-withe: #faf8f7;
    --withe: #fff;
}

Que emoci贸n ya empezamos!!! 馃槏馃槑

馃憣

No era lo mismo si poniamos el font-size y font-family en el :root? 馃槙

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

la medida rem es un estandar o es una tendencia para estos proyectos?

驴Alguien sabe c贸mo es que cuando Diego pone los colores de Figma en el archivo CSS se pasan a min煤sculas las letras?

Ejemplo: Copia el c贸digo #FFE9D5
y visual studio code le cambia autom谩ticamente a #ffe9d5

驴Es alg煤n plugin o configuraci贸n?

:root{
    /* Fuentes */
    --font-sans: 'DM Sans', sans-serif;
    --font-inter: 'Inter', sans-serif;
    /* Colores */
    --orange-to-black: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFF;

}```

Buenas les dejo mi c贸digo css, por si alguna le sirve, saludos.

/*
Posicionamiento --> static, absolute, relative, fixed
Modelo de caja (Box model) --> margin, border, padding, content
Tipograf铆a --> tipos, tama帽os de fuente, etc
Estilos visuales --> box-shadow, border-radius, gradient, etc
Otros --> reglas CSS y m谩s
*/

:root{
    /* colores */
    --bitcoin-orage:#F7931A;
    --soft-orange:#FFE9D5;
    --secondary-blue:#FFE9D5;
    --soft-blue:#E7F5FF;
    --warm-black:#201E1C;
    --black:#282623;
    --gray:#BABABA;
    --off-white:#FAF8F7;
    --just-white:#fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 鈥楧M Sans鈥, sans-serif;
}```

Por ac谩 dejo todo lo que hicimos en la clase por si alguien lo necesita 鉂わ笍

:root{
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black:#201E1C;
    --black: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html{
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}```
:root{
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black:#201E1C;
    --black: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}```

Hola compa帽er@s, 驴por qu茅 en el CSS al elemento HTML se le coloca el font size de 62.5%? 驴En todos mis proyectos tengo que usar ese porcentaje?

It was an excellent class Diego. We continue to advance in our project.

Variables de Color corregidas.

:root{
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

Alguien sabe por qu茅 el profesor usa:

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

En vez de body? Nunca hab铆a visto a nadie usar html, alguien sabe el por qu茅?

/*Agregando Estilos para buenas practicas durante el dise帽o
Posicionamiento --> static, absolute, relative, fixed
Modelo de caja (Box model) --> margin, border, padding, content
Tipograf铆a --> tipos, tama帽os de fuente, etc
Estilos visuales --> box-shadow, border-radius, gradient, etc
Otros --> reglas CSS y m谩s
*/

/*Implementaci[on de variables de color*/
:root{
    /*Colores*/
--bitcoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #282623;
--black: #201e1c;
--grey: #bababa;
--off-white: #faf8f7;
--just-white: #fff;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}```
  • Declaracion de variables
:root {
  /* Colores */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
}```


- Reseteo de valores default de navegador 


  • {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }
-Fuente y tama帽o en el html

html {
font-size: 62.5%;
font-family: 鈥淒M Sans鈥, sans-serif;
}```

/*
1. Posicionamiento
2. Modelo caja (box model)
3. Tipografia
4, Visuales
5. Otros
*/

:root {
    /* colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%; /*para poder hacer uso de REM*/
    font-family: "DM Sans", sans-serif;
}

Estilos base

Convenci贸n para agregar estilos:

  1. Posicionamiento
  2. Modelo de caja
  3. Tipograf铆a
  4. Estilos visuales
  5. Otros

Variables

Son entidades definidas por autores de CSS que contienen valores espec铆ficos que se pueden volver a utilizar en un documento.

Para declarar propiedades personalizadas (variables) usamos un nombre que comience con dos guiones (), y un valor que puede ser cualquier valor v谩lido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo as铆:

elemento {
  --main-bg-color: brown;
}

Ten en cuenta que el selector que usemos para las reglas de estilo define el 谩mbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena pr谩ctica com煤n es declarar variables en la pseudo-clase :root, y as铆 aplicarlas globalmente al documento HTML:

:root {
  --main-bg-color: brown;
}

Para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la funci贸n var(), en lugar de cualquier otro valor normal:

elemento {
  background-color: var(--main-bg-color);
}
que buena clase, me encanto como primero agregamos los colores, la estructura de las im谩genes, las carpetas y el contenido ya dividido es una forma muy limpia de trabajar y ahorrarnos mucho, definitivamente la uso en mis proyectos.

En otro curso hablan de no usar un blanco absoluto por que eso visualmente puede perder un poco de calidad gr谩fica.

Amigos q plugin en visual studio code te permite mostrar (resaltar) el color en el hexadecimal como se aprecia en la declaracion de las variables de colores.

Me surgi贸 una duda, yo se que :root y html son la misma etiqueta en esencia.
驴Por qu茅 no se puso el font-size y font-family dentro de :root justo despu茅s de los colores?