Blog Fellyph Cintra

Nesse post vamos falar sobre como estilizar nossos temas Frontity, o framework trabalha com emotion uma biblioteca css que nos ajuda a escrever CSS-in-JS. Essa é a primeira vez eu acho que falamos em CSS-in-JS no blog. Esse post faz parte de uma série sobre Frontity:

• Introdução ao Frontity
• Criando primeiro projeto com Frontity
• Criando primeiro tema com Frontity

CSS-in-JS

Antes de entrar no assunto de estilização com Frontity vamos falar sobre CSS-in-JS é um assunto que tomou o hype a dois anos atrás com Styled Components, emotion e outros frameworks ele permite a escrita de CSS dentro de arquivos JavaScript, assim adicionamos super poderes em nosso estilo, com emotion temos várias formas de escrever CSS-in-JS, como por exemplo:

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>This my button component.</Button>)
Code language: JavaScript (javascript)

Como podemos ver utilizando string literals para escrever CSS atualmente os principais editores de texto reconhecem essa sintaxe, por exemplo, VS Code. Para simples mas temos uma série de conceitos que podemos ver nesse código e também parte de compilação.

• nesting: algo comum com LESS e SASS é o uso de nesting onde podemos agrupar seletores.
• CSS + Javascript: podemos definir regras e concatenar variáveis como JavaScript.
• Compilação: muita gente pensa que CSS-in-JS é inline CSS mas esse código é compilado gerado uma style tag para esse elemento, como podemos ver o código a seguir:

<button class="css-txevan ezh9olb0">This my button component.</button>

<style>
.css-txevan {
                padding: 32px;
                background-color: hotpink;
                font-size: 24px;
                border-radius: 4px;
                color: black;
                font-weight: bold;
            }
</style>
Code language: HTML, XML (xml)

• CSS modular: temos a possibilidade de criar um CSS modular criando seletores únicos dinamicamente e só carregando o CSS quando necessário.
• Cross-browsing: Além disso bibliotecas como styled components e emotion cuidam de fazer todo o trabalho de cross-browsig.

Emotion é a biblioteca adotada por Frontity para trabalhar como ela você não precisa fazer nenhuma instalação uma vez que você instala Frontity já pode fazer uso dos recursos, para isso importamos classes e funções dentro do Frontity.

Nosso projeto

Alguns desses conceitos vamos abordar quando começamos a estilizar nosso tema. Agora vamos voltar para o nosso projeto, para definir o estilo da nossa aplicação vamos utilizar o Starter Theme da Alessandra Stalanto como base:

No último post criamos o seguinte componente principal:

import React from 'react';
import { connect } from 'frontity';

const Theme = ({state}) => {
  const data = state.source.get(state.router.link);
  
  return (
    <>
      <h1>Nosso Primeiro tema com Frontity</h1>
      <p>URL Atual: {state.router.link}</p>
      <p>Autor: {state.source.author[1].name}</p>
      { data.items.map( item => {
        const post = state.source.post[item.id]
        return (
          <article key={post.id}>
            <h2>{post.title.rendered}</h2>
          </article>
        )
      })

      }
    </>
  );
};

export default connect(Theme);
Code language: JavaScript (javascript)

Estilo Global

Como vimos no exemplo anterior o estilo criado com emotion fica vinculado ao componente criando uma estrutura mais modular. Caso queiramos adicionar um estilo de forma global precisamos adicionar o componente Global esse componente recebe como parâmetro um estilo que será o seguinte:

import { css } from "frontity";

export default css`
  body {
    margin: 0
    font-size: 1.25rem;
    color: #0d405b;
    background-color: #FBEED9;
  }
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  a,
  a:visited {
    color: inherit;
    text-decoration: none;
  }
`;
Code language: JavaScript (javascript)

Vamos adicionar esse estilo dentro da pasta tutorial-fellyph > src > styles criamos o arquivo globalStyles.js. Um ponto importante desse código que importamos uma função css ela nos ajudará a manipular o conteúdo como CSS e não uma simples string literal. Agora o próximo passo será adicionar nosso estilo global.

import React from 'react';
import { Global, connect } from 'frontity';
import globalStyles from "../styles/globalStyles";

const Theme = ({state}) => {
  const data = state.source.get(state.router.link);
  
  return (
    <>
      <Global styles={globalStyles} />
      <h1>Nosso Primeiro tema com Frontity</h1>
      <p>URL Atual: {state.router.link}</p>
      <p>Autor: {state.source.author[1].name}</p>
      { data.items.map( item => {
          const post = state.source.post[item.id]
          return (
            <article key={post.id}>
              <h2>{post.title.rendered}</h2>
            </article>
          )
        })
      }
    </>
  );
};

export default connect(Theme);
Code language: JavaScript (javascript)

O arquivo global tem algumas regras básicas. Podemos criar algo um pouco mais complexo para utilizar o Componente Global para adicionar nossas fontes, para isso vamos criar um arquivo fontFace.js dentro da mesma pasta que globalStyles:

import React from "react";
import { Global, css } from "frontity";
import baumansWOFF2 from "../fonts/baumans_regular-webfont.woff2";
import khandmediumWOFF2 from "../fonts/khand_500-webfont.woff2";

const FontFace = () => (
  <Global
    styles={css`
      @font-face {
        font-family: "khandmedium";
        src: url(${khandmediumWOFF2}) format("woff2");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "baumansregular";
        src: url(${baumansWOFF2}) format("woff2");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
    `}
  />
);

export default FontFace;
Code language: JavaScript (javascript)

Como podemos ver o component FontFace por se só acessa diretamente o componente Global, além carregar as fontes que iremos trabalhar baumas e khand mas para vincular as fontes precisamos adicionar em nosso componente principal.

Antes de mostrar o Theme componente vamos mover a estrutura de nosso post para um componente Post:

import React from 'react';
import { styled } from 'frontity';

export const Post = ({ post }) => {
    return (
        <Box>
            <h2>{post.title.rendered}</h2>
        </Box>
    )
}

const Box = styled.article`
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 900px;
    margin-bottom: 48px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.05);
    background-color: #fdf6eb;
    color: #0d405b;

    h2 {
        font-family: baumansregular, sans-serif;
        line-height: 1.1;
        color:#0d405b;
        font-size: 2rem;
        margin-top: 8px;
    }
`;
Code language: JavaScript (javascript)

Também vamos criar um componente para nosso cabeçalho com o component header:

import React from 'react'
import { styled } from 'frontity';

export const Header = ({ title }) => {
    return (
        <HeaderContainer>
            <h1>{title}</h1>
        </HeaderContainer>
    )
}

const HeaderContainer = styled.header`
    background-color: #082737;
    color: #FBEED9;
    font-weight: bold;
    margin: 0 0 20px 0;
    padding: 1em;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.05);

    h1 {
        font-size: 2rem;
        text-transform: uppercase;
        font-family: baumansregular,sans-serif;
        text-align: center;
        letter-spacing: 4px;
        line-height: 1.5;
        color: #FCB458;
        margin: 0;
    }
`;
Code language: JavaScript (javascript)

Agora como esses dois componentes vamos finalizar nosso Theme componente para esse tutorial:

import React from 'react';
import { Global, connect } from 'frontity';
import globalStyles from '../styles/globalStyles';
import FontFace from '../styles/fontFace';
import { Post } from './post/post.js';
import { Header } from './header/header';

const Theme = ({state}) => {
  const data = state.source.get(state.router.link);
  
  return (
    <>
      <FontFace />
      <Global styles={globalStyles} />
      <Header title="Nosso Primeiro tema com Frontity" />
      { data.items.map( item => {
          const post = state.source.post[item.id]
          return ( <Post key={post.id} post={post} /> )
        })
      }
    </>
  );
};

export default connect(Theme);
Code language: JavaScript (javascript)

Assim o resultado será o seguinte:

Vamos fechando esse post por aqui, para conferir o código completo você pode conferir o a branch que criei em meu github: https://github.com/fellyph/frontity-tutorial/tree/videos/04-css-in-js-final para mais posts sobre WordPress acesse a página da categoria.