Gatsby Workshop

Github

Extra - Estilos con CSS

En Gatsby tenemos muchas formas de dar estilo a nuestros proyectos usando CSS, ya sea por medio de plugins oficiales o hechos por la comunidad.

Veamos algunas de las más comunes:

Usando estilos globales en el componente layout

Esta forma es la que nos viene por defecto si creamos nuestro proyecto con el comando gatsby new, si vemos el archivo /src/components/layout.js, ahí se importa con la siguiente línea:

import './layout.css'

Así que todo componente o página que esté wrappeada en nuestro componente <Layout> va a poder hacer uso de las bondades de este archivo de estilos.

Caso de que no hayamos utilizado gatsby new, debemos crear un componente layout donde importemos nuestro archivo CSS y wrappear nuestros componentes de página con este layout creado.

Para seguir leyendo

Usando estilos globales sin utilizar un componente layout

Utilizando esta forma vamos a realmente tener nuestros estilos de forma global. Lo que tenemos que hacer es (si no tenemos uno ya) crear nuestro archivo de estilos e importarlo en el archivo gatsby-browser.js de la siguiente manera:

Suponiendo que creamos src/styles/global.css, en gatsby-browser.js:

import './src/styles/global.css'

Y vamos a tener disponible en todos nuestros componentes los estilos de ese archivo.

Para seguir leyendo

Usando Styled Components

Para utilizar Styled Components con Gatsby, vamos a tener que instalar un plugin, porque OBVIO que hay uno 😜

El plugin nos pide que instalemos lo siguiente:

npm i gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Y una vez que tengamos ese plugin instalado, debemos sumarlo en nuestro array de plugins de nuestro archivo de configuración gatsby-config.js:

module.exports = {
  plugins: [`gatsby-plugin-styled-components`],
}

Luego volvemos bajamos y volvemos a correr nuestro servidor local con gatsby develop y podemos utilizarlo como se usa con React comúnmente:

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  margin: 3rem auto;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
`

const Title = styled.h1`
  font-weight: bolder;
  font-size: xx-large;
  color: LightGreen;
`

export default () => (
  <Container>
    <Title>Bienvenidos a mi página!!!</Title>
  </Container>
)
Para seguir leyendo

Usando CSS Modules

Para aprovechar las bondades de CSS Modules la forma de utilizarlos sería así:

Creamos un módulo CSS src/pages/index.module.css:

.principal {
  font-weight: bolder;
  font-size: xx-large;
  color: LightGreen;
}

Y luego podemos usarlo importándolo por ejemplo en src/pagesindes.js:

import React from 'react'
import style from './index.module.css'

export default () => (
  <>
    <h1 className={style.principal}>Bienvenidos a mi página!!!</h1>
  </>
)
Para seguir leyendo

Usando Sass/SCSS

Para utilizar Sass, necesitamos instalar un plugin:

npm i node-sass gatsby-plugin-sass

Lo agregamos a nuestro array de plugins utilizados en configuración, en gatsby-config.js:

module.exports = {
  plugins: [`gatsby-plugin-sass`],
}

Luego escribimos nuestra hoja de estilos como .sass o .scss y los importamos donde lo vayamos a utilizar.

Ejemplo Sass:

$font-stack: Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

Ejemplo SCSS:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Y los importamos usando la ruta relativa a cada archivo:

import './styles.sass'
import './styles.scss'

Nota: Se pueden usar los archivos Sass/SCSS como módulos tal como se explica en 'Usando CSS Modules', con la salvedad de las extensiones de los archivos.

Para seguir leyendo

Usando Emotion

Creo que está de más decir que va a haber que instalar un plugin jaja.

npm i gatsby-plugin-emotion @emotion/core @emotion/styled

Lo agregamos en la configuración en gatsby-config.js:

module.exports = {
  plugins: [`gatsby-plugin-emotion`],
}

Y con eso ya estamos habilitados a usar Emotion, ya sea con css o con styled-components:

Usando css:

import React from 'react'
import { css } from '@emotion/core'
export default () => (
  <div>
    <p
      css={{
        background: 'pink',
        color: 'blue',
      }}
    >
      Esta página utiliza Emotion.
    </p>
  </div>
)

Usando styled-components:

import React from 'react'
import styled from '@emotion/styled'
const Content = styled.div`
  text-align: center;
  margin-top: 10px;
  p {
    font-weight: bold;
  }
`
export default () => (
  <Content>
    <p>Esta página utiliza Emotion.</p>
  </Content>
)
Para seguir leyendo

Trabajando con fuentes

Añadiendo una fuente local

Copiemos nuestra fuente .woff2, .ttf, por ejemplo, en la carpeta src/fonts/. Luego debemos importarla en nuestro CSS:

@font-face {
  font-family: "Font Name";
  src: url("../fonts/fontname.woff2");
}

Y tenemos que asegurarnos de referenciar bien el nombre de la fuente, por ejemplo:

body {
  font-family: "Font Name", sans-serif;
}

De esta forma, modificando a body, afectamos a la mayoría del texto en la página.

Para seguir leyendo

Usando Google Fonts

Para usar Google Fonts es mejor hostearlas en nuestro proyecto, así mejoramos la performance al no tener que estar yendo a buscar la fuente a una URL externa.

Para utilizar esto debemos seleccionar una fuente del proyecto typefaces.

Para empezar tenemos que instalar la fuente elegida de la siguiente manera:

npm i typeface-nombre-de-fuente

Donde tenemos que reemplazar nombre-de-fuente por la que querramos utilizar, un ejemplo sería la 'Source Sans Pro', que quedaría así:

npm i typeface-source-sans-pro

Luego importamos "typeface-nombre-de-fuente" en un layout, componente de página o en gatsby-browser.js dependiendo cómo lo querramos utilizar:

import 'typeface-nombre-de-fuente'

Y una vez importada, ya podemos referenciarla en una hoja de estilos CSS, un CSS Module o utilizando CSS-in-JS:

body {
  font-family: "Nombre de fuente";
}
Para seguir leyendo
ATRÁS Workshop - Paso 3
© 2021 - MIT License