{"id":29452648,"url":"https://github.com/robertcastro86/aula-global-style","last_synced_at":"2026-05-03T10:38:59.299Z","repository":{"id":302357337,"uuid":"1012162387","full_name":"RobertCastro86/aula-global-style","owner":"RobertCastro86","description":"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.","archived":false,"fork":false,"pushed_at":"2025-07-02T00:59:44.000Z","size":33,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-13T22:13:41.911Z","etag":null,"topics":["react-components","react-hooks","react-router","reactforms","reactjs","vitejs"],"latest_commit_sha":null,"homepage":"https://aula-global-style.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RobertCastro86.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-01T23:15:25.000Z","updated_at":"2025-07-02T00:59:46.000Z","dependencies_parsed_at":"2025-07-03T13:46:46.671Z","dependency_job_id":null,"html_url":"https://github.com/RobertCastro86/aula-global-style","commit_stats":null,"previous_names":["robertcastro86/aula-global-style"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RobertCastro86/aula-global-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertCastro86%2Faula-global-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertCastro86%2Faula-global-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertCastro86%2Faula-global-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertCastro86%2Faula-global-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RobertCastro86","download_url":"https://codeload.github.com/RobertCastro86/aula-global-style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertCastro86%2Faula-global-style/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281397336,"owners_count":26493908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-components","react-hooks","react-router","reactforms","reactjs","vitejs"],"created_at":"2025-07-13T22:10:05.819Z","updated_at":"2025-10-28T06:34:27.099Z","avatar_url":"https://github.com/RobertCastro86.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + Vite - Global Styles Project\n\n## 📋 Descrição do Projeto\n\nDesenvolver 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.\n\n## 🎯 Objetivos Específicos\n\n### Funcionalidades Principais\n\n- **Implementar estilos globais** usando `createGlobalStyle`\n- **Criar um sistema de design consistente** com variáveis CSS\n- **Desenvolver componentes reutilizáveis** com styled-components\n- **Criar utilitários CSS** para espaçamento e layout\n\n## 🚀 Tecnologias Utilizadas\n\n### Frontend Framework\n- **React 18.2.0** - Biblioteca JavaScript para construção de interfaces de usuário\n- **Vite 4.4.5** - Build tool moderna e rápida para desenvolvimento frontend\n\n### Estilização\n- **styled-components 6.0.7** - CSS-in-JS library para estilização de componentes\n- **@types/styled-components 5.1.26** - Tipagens TypeScript para styled-components\n\n## 🛠️ Configuração e Instalação\n\n### Pré-requisitos\n- Node.js (versão 16 ou superior)\n- npm ou yarn\n\n### Instalação\n\n```bash\n# Clone o repositório\ngit clone https://github.com/RobertCastro86/aula-global-style.git\n\n# Acesse o diretório do projeto\ncd aula-global-style\n\n# Instale as dependências\nnpm install\n\n# Inicie o servidor de desenvolvimento\nnpm run dev\n```\n\n## 🎨 Arquitetura de Estilos\n\n### Global Styles\nImplementação de estilos globais usando `createGlobalStyle` para:\n- Reset/normalize CSS\n- Tipografia base\n- Variáveis CSS customizadas\n- Utilitários de layout\n\n### Sistema de Design\n- **Cores** - Paleta consistente de cores\n- **Tipografia** - Hierarquia tipográfica definida\n- **Espaçamento** - Sistema de espaçamento padronizado\n- **Breakpoints** - Pontos de quebra responsivos\n\n### Componentes Estilizados\nDesenvolvimento de componentes reutilizáveis com:\n- Props dinâmicas para customização\n- Variantes de estilo\n- Estados interativos\n- Responsividade integrada\n\n## 📚 Conceitos Abordados\n\n- **CSS-in-JS** com styled-components\n- **Global Styles** e gerenciamento de estilos globais\n- **Design System** e tokens de design\n- **Componentização** de estilos\n- **Responsividade** e mobile-first\n- **Performance** em CSS-in-JS\n\n## 🧪 Scripts Disponíveis\n\n```bash\n# Desenvolvimento\nnpm run dev\n\n# Build para produção\nnpm run build\n\n# Preview da build\nnpm run preview\n\n# Linting\nnpm run lint\n```\n\n## 📖 Documentação Adicional\n\n### Styled-Components\n- [Documentação Oficial](https://styled-components.com/)\n- [createGlobalStyle API](https://styled-components.com/docs/api#createglobalstyle)\n\n---\n\n**Desenvolvido com ❤️ para demonstrar as melhores práticas de Global Styles em React**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertcastro86%2Faula-global-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertcastro86%2Faula-global-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertcastro86%2Faula-global-style/lists"}