You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
3 Hrs
6 Min
18 Seg

Estilos base

7/32
Resources

Now, you are going to create the base styles and variables that we will use throughout our project.

How to do the content positioning

As part of the best practices we have an order in which it is advisable to write the code inside CSS. It will help you to have all the sections organized and know where to go back when you need to make a change or solve a problem.

  1. Positioning --> static, absolute, relative, fixed.
  2. Box model--> margin, border, padding, content.
  3. Typography --> fonts, font sizes, etc.
  4. Visual styles --> box-shadow, border-radius, gradient, etc.
  5. Others --> miscellaneous, CSS rules and more.

How to create variables

In the Branding section of the design in Figma we can see all the colors that are used. For now, the variables that we are going to create are going to be of these colors.
crear variables en figma

By clicking on the setting icon of each color, we open the information about it. There we have the hexadecimal code we need.
image.png

Remember that to declare a variable in CSS we must use the :root function and add a name to the variable that will contain the value that we are going to use repeatedly in our code. Selecting all the colors, we would have:

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

How to do the style reset

Once the variable section above has been declared, it's time to reset the styles that the browser brings by default with the practices we already know.

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

We'll also change the font size to 62.5% to make it easy to use with REM measures. And we'll change the font style we've embedded from Google Fonts.

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

You've just applied the first styles by resetting the defaults, applying the font style and creating the first project variables. We're moving fast and sure!

Check out the beginnings of the project in: Initial Architecture

Contribution created by: José Miguel Veintimilla (Platzi Contributor).

Contributions 108

Questions 29

Sort by:

Want to see more contributions, questions and answers from the community?

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
}```
Estoy viendo el archivo en Figma y al momento de ver las variables de los colores, no me aparece el código de color ![](https://static.platzi.com/media/user_upload/image-96bd03d8-f0a8-4fbb-8134-aaf3772d3413.jpg)
![]()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

/*

  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;
}
Está bloqueado el acceso a Figma que no se puede copiar directamente los colores en hexadecimal.
hola abri figma para poder hacer este proyecto, tengo un inconveniente curioso, a mi no me deja ver el valor exa decimal de los colores, no se si tenga que ver con el echo de que mi version es gratuita y por tanto no me deja ver el codigo (el botoncito de ver codigo no me deja activarlo por sta razon)

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

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

```js /* 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-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; } ```*L*os estilos bases son los siguientes
Al momento de ingresar al figma, hay cosas que no permite realizar ya que es necesario tener la versión paga, por eso es importante abrir el repo de GitHub.

🔥🔥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…!

Clase 7: 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](https://static.platzi.com/media/articlases/Images/image%28147%29.png) 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](https://static.platzi.com/media/articlases/Images/image%28148%29.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](https://platzi.com/clases/2030-mobile-first/32301-arquitectura-inicial/)

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