Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Layout con CSS Grid

4/12
Recursos

Aportes 12

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Fuente Lato 😃

Por aquí les dejo las líneas de código que debemos agregar a nuestro proyecto para las fuentes.
Import link:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:[email protected];300;700&display=swap" rel="stylesheet"> 

Import Style:

<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:[email protected];300;700&display=swap');
</style>

Aplicacion en CSS

font-family: 'Lato', sans-serif;

Les dejo 4 extensiones que me ayudan mucho al momento de maquetar.
Responsive Viewer
What Font
Simple mass downloader
Site Palette

Layout con CSS Grid

Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/4-layout-con-CSS-Grid

  • Algo que podemos hacer para temas de optimizacion es descargar las fuentes y agregarlas desde nuestro proyecto en local:
    Quedaría algo asi para las 3 fuentes
    Es importante poner este código primero(antes del :root) para que CSS las este preparando primero.
@font-face {
    font-family: "Lato";
    src: url('../assets/fonts/Lato-Thin.woff2') format("woff2"),
         url('../assets/fonts/Lato-Light.woff2') format("woff2"),
         url('../assets/fonts/Lato-Bold.woff2') format("woff2");
    font-weight: 100, 300, 700;
    font-style: lighter, normal, bold;
}

Pueden descargar las fuentes desde el link del código que deje anteriormente. 😄

Me parece que en otro curso mencionaron que no era tan conveniente nombrar las variables con el nombre de su color, ya que si dado el caso cambia los colores de la marca ya no tendrian relacion con su nombre de variable

Asi que sugiero esta forma:

:root {
            --principal-color: #ffd602;
            --brand-color: #d5040a;
            --secondary-color: #036cb6;
        }

Para las variables:

:root{
    --yellow: #ffd602;
    --red: #d5040a;
    --blue: #036cb6;
}

Muy buena explicacion sobre la grid de la pagina web!

Solo agregue el grid area en sus respectivos lugares

ok lo de Color Zilla me encantó. Es magnifico cuando te dan herramientas tan excelentes para facilitar nuestras vidas lm/

Dejo esto por aquí por si alguien mas tenia mi misma duda referente a root en css https://developer.mozilla.org/es/docs/Web/CSS/:root

Les recomiendo que instalen las PowerToys oficiales de Microsoft para Win10, que aún estando en versión beta son muy estables y añaden un montón de funcionalidades increíblemente útiles. Entre ellas un color picker con un shortcut para acceso rápido. Les dejo el enlace del Github de Microsoft:
https://github.com/microsoft/PowerToys
Espero les guste tanto como a mi 😉

Para ver la grid pueden verlo con ayuda de DevTools. Se van al contenedor al lado deberá aparecer un botón que diga grid le dan click y despues les va a aparecer la grid 📐
Recuerden que saber debuggear es importantísimo 🙌

Creo que sería mejor nombrarlos así:

:root {
    --primary-color: #ffd602;
    --secundary-color: #d5040a;
    --tertiary-color: #036cb6;
}

Imagínate que el sitio web decida cambiar de colores, entonces debes ir por todo el documento a cambiar el nombre de la variable