https://github.com/robertcastro86/aula-global-style
React Avançado - Global Styles com createGlobalStyle - Este projeto demonstra o uso de createGlobalStyle do styled-components para estabelecer estilos globais em aplicações React. Um conhecimento indispensável para manter a consistência visual em suas aplicações.
https://github.com/robertcastro86/aula-global-style
react-components react-hooks react-router reactforms reactjs vitejs
Last synced: 2 months ago
JSON representation
React Avançado - Global Styles com createGlobalStyle - Este projeto demonstra o uso de createGlobalStyle do styled-components para estabelecer estilos globais em aplicações React. Um conhecimento indispensável para manter a consistência visual em suas aplicações.
- Host: GitHub
- URL: https://github.com/robertcastro86/aula-global-style
- Owner: RobertCastro86
- Created: 2025-07-01T23:15:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T00:59:44.000Z (about 1 year ago)
- Last Synced: 2025-07-13T22:13:41.911Z (12 months ago)
- Topics: react-components, react-hooks, react-router, reactforms, reactjs, vitejs
- Language: JavaScript
- Homepage: https://aula-global-style.vercel.app/
- Size: 32.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite - Global Styles Project
## 📋 Descrição do Projeto
Desenvolver uma aplicação React completa demonstrando o uso avançado de Global Styles com `createGlobalStyle` do styled-components. O projeto visa ensinar como estabelecer uma base sólida de estilos globais para manter consistência visual em toda a aplicação, implementando boas práticas de CSS-in-JS e arquitetura de estilos escalável.
## 🎯 Objetivos Específicos
### Funcionalidades Principais
- **Implementar estilos globais** usando `createGlobalStyle`
- **Criar um sistema de design consistente** com variáveis CSS
- **Desenvolver componentes reutilizáveis** com styled-components
- **Criar utilitários CSS** para espaçamento e layout
## 🚀 Tecnologias Utilizadas
### Frontend Framework
- **React 18.2.0** - Biblioteca JavaScript para construção de interfaces de usuário
- **Vite 4.4.5** - Build tool moderna e rápida para desenvolvimento frontend
### Estilização
- **styled-components 6.0.7** - CSS-in-JS library para estilização de componentes
- **@types/styled-components 5.1.26** - Tipagens TypeScript para styled-components
## 🛠️ Configuração e Instalação
### Pré-requisitos
- Node.js (versão 16 ou superior)
- npm ou yarn
### Instalação
```bash
# Clone o repositório
git clone https://github.com/RobertCastro86/aula-global-style.git
# Acesse o diretório do projeto
cd aula-global-style
# Instale as dependências
npm install
# Inicie o servidor de desenvolvimento
npm run dev
```
## 🎨 Arquitetura de Estilos
### Global Styles
Implementação de estilos globais usando `createGlobalStyle` para:
- Reset/normalize CSS
- Tipografia base
- Variáveis CSS customizadas
- Utilitários de layout
### Sistema de Design
- **Cores** - Paleta consistente de cores
- **Tipografia** - Hierarquia tipográfica definida
- **Espaçamento** - Sistema de espaçamento padronizado
- **Breakpoints** - Pontos de quebra responsivos
### Componentes Estilizados
Desenvolvimento de componentes reutilizáveis com:
- Props dinâmicas para customização
- Variantes de estilo
- Estados interativos
- Responsividade integrada
## 📚 Conceitos Abordados
- **CSS-in-JS** com styled-components
- **Global Styles** e gerenciamento de estilos globais
- **Design System** e tokens de design
- **Componentização** de estilos
- **Responsividade** e mobile-first
- **Performance** em CSS-in-JS
## 🧪 Scripts Disponíveis
```bash
# Desenvolvimento
npm run dev
# Build para produção
npm run build
# Preview da build
npm run preview
# Linting
npm run lint
```
## 📖 Documentação Adicional
### Styled-Components
- [Documentação Oficial](https://styled-components.com/)
- [createGlobalStyle API](https://styled-components.com/docs/api#createglobalstyle)
---
**Desenvolvido com ❤️ para demonstrar as melhores práticas de Global Styles em React**