Estilos base

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 😂 😃

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

/* 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/

Curso Definitivo de HTML y CSS

excelente curso lo recomiendo antes de seguir con este

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

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

el css hasta los momentos…

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

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
–color–
–font–
–box-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 */
–bitcoin-orange: #F7931A;
–soft-orange: #FFE9D5;
–secondry-blue: #1A9AF7;
–soft-blue: #E7F5FF;
–warn-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;
}

recomendación estructura de una regla de css

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

/*

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

: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: ‘DM 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;
}

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.

: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;
}```

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

colores:
:root {
/* Colores */
–bitcoin-orange: #f7931a;
–soft-orange: #ffe9d5;
–secondary-blue: #1a9af7;
–warm-black: #201e1c;
–black: #282623;
–grey: #bababa;
–off-white: #faf8f7;
–just-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;
}

También existe una convención para organizar los atributos de HTML.

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;
–soft-orange: #ffe9d5;
–secondary-blue: #1a9af7;
–soft-blue: #e7f5ff;
–warm-black: #201e1c;
–black: #282623;
–grey: #bababa;
–off-white: #faf8f7;
–just-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;
}

🔥🔥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;
}

¿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?

Genial…!

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.

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: 
*/

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 “ordenadamente” 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?

: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: ‘DM 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;
}```

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: “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: #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;
}