Jump to content

Pesquise na Comunidade

Mostrando resultados para tags 'front-end'.

  • Pesquisar por Tags

    Digite as tags separadas por vírgulas.
  • Pesquisa por Autor(a)

Tipo de Conteúdo


Fóruns

  • Antes de tudo...
    • O nosso fórum é para vocês devs e software houses!
  • Geral
    • Desenvolvimento de Software
    • Reviews de Solução
    • Troca de Conhecimentos Gerais
    • Classificados
  • Negócios
    • Admistrativo/Financeiro
    • Tecnologia
    • Tudo sobre Marketing
    • Gestão
    • Gestão de Pessoas
    • LGPD
    • Customer Success: Foco no cliente
  • Comunidade DFe
    • Café com o Contador
    • Notas Técnicas - Café Expresso
    • Tudo sobre DFe
    • Cálculo de impostos (ICMS, IPI, PIS/COFINS, IRPJ)
    • Comércio Exterior
  • Linguagens de Programação
    • Dúvidas de Desenvolvimento
    • C#
    • C++
    • HTML & CSS
    • Java
    • JavaScript
    • PHP
    • Python
    • Ruby
    • SQL
    • Outras Linguagens
  • Startups
    • Mentoria
    • Apresente sua Startup
    • Dúvidas
  • Produtos
    • PlugBank
    • Suíte de Componentes
    • PlugDash
    • PlugNotas
    • TecnoSign
    • Manager SaaS
    • TecnoPay
  • Off Topic
    • Blog da Casa do Desenvolvedor
    • Blog da TecnoSpeed
    • Orgulho de ser Nerd/Geek
  • Cursos
    • TecnoSpeed Academy
    • Curso Básico para Devs
  • Eventos
    • TecnoUpdate
    • Eventos de Tecnologia 2022
    • Webinars/Lives
  • Monitor SEFAZ
    • NF-e
    • NFC-e
  • Rejeições
  • Regras Tributárias
  • Trampos em TI | Home Office's Vagas
  • Clube dos AGR's's Discussões
  • Clube dos AGR's's Fale com o Marketing
  • Clube dos AGR's's Dicas do CS
  • Clube dos AGR's's Capacitação em Vendas
  • Clube dos AGR's's Materiais CHS
  • Clube dos AGR's's Materiais Autêntica
  • Clube dos AGR's's Conteúdos TecnoSpeed Certificados
  • Parceiros - Canal de Vendas's Segmentos
  • Parceiros - Canal de Vendas's Dúvidas
  • Mentalidade Ágil's Tópicos
  • Computação Feitep's Geral
  • TIC Performance 2021 - SEBRAE's Trilha dos Workshops 2021
  • TIC Performance 2021 - SEBRAE's Materiais de apoio
  • TIC Performance 2021 - SEBRAE's Aula Gestão Financeira para Software Houses
  • TIC Performance 2021 - SEBRAE's Dúvidas
  • TecnoUpdate 2021's Novidades
  • TecnoUpdate 2021's Conteúdos
  • TecnoUpdate 2021's Dúvidas
  • Desafio Casa do Dev - NodeJS (2021)'s Comece aqui
  • Desafio Casa do Dev - NodeJS (2021)'s Dúvidas
  • Desafio Casa do Dev - NodeJS (2021)'s Cursos - Gratuitos
  • Desafio Casa do Dev - NodeJS (2021)'s O Desafio
  • PROTHEUS TOTVS's Release 33
  • Univale - Ivaiporã's Notícias

Blogs

  • Gestão Empresarial
  • Gestão de Pessoas
  • Empregabilidade

Product Groups

Não há resultados para exibir.


Encontre resultados em...

Encontre resultados que contenham...


Data de Criação

  • Início

    Fim


Última Atualização

  • Início

    Fim


Filter by number of...

Ingressou

  • Início

    Fim


Grupo


Ciente das Políticas de Privacidade


Declaração de Ciência e Autenticidade e de Veracidade


Ciente dos Termos de Serviços e das Regras do Hub


Sobre


Você é estudante?


Qual sua área?


Outro? Por favor, especifique.


Como você conheceu o nosso fórum?


Outro? Por favor, especifique.


Qual seu nível de senioridade?

Encontrado 1 resultado

  1. Frameworks CSS Durante o desenvolvimento de aplicações web, independente do framework ou biblioteca utilizado, a estilização é, para muitos, uma das etapas mais trabalhosas e complicadas de se fazer, devido ao famoso CSS, que é amado por alguns e odiado por outros. Gostando ou não de escrever CSS, a verdade é que é necessário investir um tempo considerável do desenvolvimento a fim de obter o resultado desejado para o visual da aplicação. Com esse problema em mente, diversos desenvolvedores e designers construíram diversas ferramentas e frameworks para auxiliar nesse processo como, por exemplo, o Bootstrap, que é (provavelmente) o mais conhecido e utilizado de todos. A maioria desses frameworks funcionam por meio das classes HTML e realizam a estilização do elemento em questão de acordo com a classe inserida. A maior desvantagem desse tipo de framework é que grande parte deles são, na realidade, uma coleção de componentes prontos que mudam a estilização completa de um elemento com apenas uma classe e, muitas vezes, não possuem simples maneiras de customizá-lo diretamente, o que faz com que os desenvolvedores ainda tenham que escrever um código CSS adicional caso queiram mudar parte do design de um componente e torná-lo diferente do padrão. Há quem goste dessa abordagem, contudo, eu gostaria de mostrar uma outra abordagem de frameworks CSS, denominada “utility-first”, que, na prática utilizam classes para estilizar propriedades específicas de um elemento e não mudam o estilo dele por inteiro de uma única vez. Essa abordagem é ótima para quem não quer perder a liberdade de estilizar cada aspecto de um elemento individualmente, e também não deseja ter uma interface semelhante a várias outras, como acontece na maioria das interfaces que usam Bootstrap, por exemplo. E dentre os frameworks que utilizam essa abordagem, gostaria de destacar um deles em específico: o Tailwind CSS. Tailwind CSS O Tailwind CSS é um framework CSS utility-first e mobile-first que vem se destacando por ser simples, leve, responsivo, amplamente configurável e extremamente fácil de usar até para quem não domina CSS. Atualmente ele está disponível para diversos frameworks e bibliotecas como: React, Vue.js, Next.js, Nuxt.js, Vite, Laravel, Gatsby, e até para projetos com JavaScript puro, e seu processo de instalação é bem simples. Uma vez instalado, basta escrever as classes correspondentes às propriedades CSS desejadas no “class” (ou “className”, no React) do elemento em questão, seguindo as classes da documentação oficial, e o estilo será aplicado a ele instantaneamente. Outra vantagem é que o Tailwind CSS realiza o “purge” de classes, ou seja, classes não utilizadas não são incluídas no build da aplicação, reduzindo o tamanho dos arquivos finais e melhorando a performance. É possível testar o Tailwind CSS por meio do link: https://play.tailwindcss.com/ A seguir seguem alguns exemplos práticos da utilização do Tailwind CSS em comparação com CSS puro. 1 - Flexbox: HTML e CSS puro <div class="element"> ... </div> .element { display: flex; flex-direction: column; align-items: center; justify-content: center; } Utilizando Tailwind CSS <div class="flex flex-col items-center justify-center"> ... </div> 2 - Grid, quebra de linha e text-overflow: HTML e CSS puro <div class="container"> <div class="first"> ... </div> <div class="second"> ... </div> </div> .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .first { grid-column: span 3 / span 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .second { grid-column: span 1 / span 1; } Utilizando Tailwind CSS <div class="grid grid-cols-4"> <div class="col-span-3 truncate"> ... </div> <div class="col-span-1"> ... </div> </div> 3 - Responsividade, cores, padding e border-radius: HTML e CSS puro <div class="element"> ... </div> .element { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 1rem; background-color: #2563eb; color: #4b5563; border-radius: 0.5rem; @media (min-width: 768px) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } } Utilizando Tailwind CSS <div class=" w-full flex flex-col items-center justify-center gap-8 p-4 bg-blue-600 text-gray-600 rounded-lg md:grid md:grid-cols-4 " > ... </div> Conclusão: Por fim, espero que tenha sido possível perceber as diversas vantagens na utilização do Tailwind CSS em seu projeto front-end e que, embora não seja perfeito, ele pode proporcionar um grande aumento na produtividade de desenvolvedores front-end, reduzindo o tempo gasto em estilização, especialmente para aqueles que são muito fãs de escrever CSS. Existem também diversas outras ferramentas para melhorar a forma de lidar com estilização, como Styled Components, Sass, dentre outros. Qual o seu favorito? O que achou do Tailwind CSS? Gostaria de unir o Tailwind CSS com uma biblioteca de componentes como o Bootstrap? Dê uma olhada no Tailwind UI.

Sobre o Fórum

Este é um fórum para todos que fazem parte
do ecossistema de uma Software House!

Bem-vindo(a) ao fórum da Casa do Desenvolvedor, uma comunidade completa, onde desenvolvedores, software houses, profissionais de marketing, experiência e vendas, fornecedores de soluções, aficionados por inovação e tecnologia podem tirar dúvidas, compartilhar novidades e conhecimento, trocar experiências e até postar uns memes que só nós da tecnologia entendemos 😅

Crie agora sua conta e vamos juntos fortalecer
o desenvolvimento de software no Brasil! 🇧🇷

×
×
  • Create New...