Acelerando o desenvolvimento de aplicativos com Bootstrap

Bootstrap é um dos melhores e mais usados ​​frameworks front-end HTML/CSS/JS. Quase qualquer desenvolvedor web que criou um site ou dois já ouviu falar desse framework popular. Ele oferece tantos componentes e recursos prontos que o Bootstrap pode acelerar significativamente o desenvolvimento de seu aplicativo.

Todo bom desenvolvedor se preocupa em economizar cada segundo em seu processo de desenvolvimento. Ser eficiente significa implantação mais rápida - quanto mais cedo e com mais frequência implantarmos, mais rápido nossos usuários finais obterão um produto melhor. Portanto, gastar algumas horas ou dias planejando o processo e a estratégia pode nos poupar não apenas alguns minutos, mas muitas horas.

Eu pessoalmente tenho trabalhado com este framework nos últimos 4 anos em 90% dos meus projetos. Neste artigo, gostaria de compartilhar com você algumas dicas que podem ajudá-lo a acelerar o desenvolvimento de seu aplicativo sem perder alguns dos incríveis recursos do Bootstrap.

Entendendo o Bootstrap

Mesmo sendo um framework muito fácil de começar, não se deixe enganar pela sua simplicidade à primeira vista. Antes de se apressar em um projeto, passe algum tempo brincando com a estrutura e obtendo informações detalhadas sobre as principais peças de sua infraestrutura e componentes interessantes. Isso ajudará a evitar os 10 erros mais comuns do Bootstrap.

Dedique uma hora para ler a documentação no site do Bootstrap ou saiba mais em um ótimo post no blog do Toptal, O que é o Bootstrap? Um breve tutorial sobre o que, por que e como. E, ótimo artigo Bootstrap 3 Dicas e truques que você pode não conhecer no scotch.io.

Se você acha a leitura de documentação uma tarefa chata e prefere ler algum código, então o melhor lugar para começar é o site do Bootstrap. Abra seu inspetor da web, examine o código-fonte do site e verifique cada bloco de código e seus elementos. É provavelmente uma das melhores e mais rápidas maneiras de entender o básico.

Mergulhe na estrutura da página e aprenda como os layouts são construídos.

 <div class="container"> <div class="row"> ... </div> </div>

… redimensione a janela do seu navegador ou use o Viewport Resizer do Chrome para saber mais sobre os utilitários de consulta de mídia.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… e como e quando usá-los, familiarize-se com as classes de coluna para obter os melhores resultados de design responsivo.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Dê uma olhada no W3Schools onde você encontrará uma referência completa do Bootstrap de todas as classes CSS, componentes e plugins JavaScript - todos com exemplos “Try it Yourself”:

• Explicação do sistema de grade do Bootstrap: grades no Bootstrap
• Classes básicas de CSS: tipografia, botões, formulários e elementos de formulário, classes auxiliares, imagens, tabelas
• Componentes individuais: glyphicons, drop-downs, navs.

Inspecione o código-fonte e tente se familiarizar com o maior número possível de nomes de classes. Aprenda sobre seus casos de uso - os comos, quandos e porquês. Isso ajudará você a avançar mais rapidamente ao escrever HTML e estilizar elementos de interface do usuário. Aprender mais sobre esses componentes ajudará você a evitar o inchaço de suas folhas de estilo com muitos códigos duplicados desnecessários. Mantenha-o enxuto e limpo usando e reutilizando componentes existentes, em vez de criar muitos novos que fazem o mesmo que os que já existem na estrutura.

Isso é especialmente importante quando se trabalha em uma equipe de vários desenvolvedores. Certifique-se de não acabar escrevendo toneladas de código duplicado criando muitos estilos para o mesmo caso todas as vezes ao traduzir novos designs para o código. Manter o desenvolvimento da interface do usuário consistente e bem documentado com guias de estilo de interface do usuário também pode adicionar alguns nós ao trabalho produtivo em equipe. Além disso, você descobrirá que, ao adicionar novos recursos ou páginas ao seu aplicativo, avançará com menos frustração. Estive envolvido em mais de uma dúzia de grandes projetos e, em comparação, vi vários casos em que o framework foi literalmente hackeado e toda vez que o novo código CSS era adicionado, ele quebrava a interface do usuário em outras páginas. Seria muito cansativo passar por todo o site e corrigir esses tipos de bugs. Não apenas isso, pense no custo e em todo o dinheiro gasto em tempo extra de desenvolvedor e ajuda de controle de qualidade.

7 erros de estilo mais comuns que desperdiçam tempo

1. Ao centralizar texto ou divs

Se você precisar centralizar uma div e/ou conteúdo, você pode usar uma destas classes:

Usar centro de texto

 <p class="text-center">I am centered text</p>

… ou bloco central

 <div class="center-block">I am centered text</div>

não .center ou <center>

2. Ao alterar o tamanho da fonte

Se você precisar de fontes menores ou maiores, você pode usar uma destas classes:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Caso você precise de cabeçalhos maiores ou menores, não esqueça dos .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Use assim:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Ao limpar flutuadores ou forçar elementos a autolimpar seus filhos

Não há necessidade de criar classes como .clear, você sempre pode usar o .clearfix do Bootstrap.

 <div class="clearfix">...</div>

4. Ao matar as margens da classe .row

Basta usar .clearfix em vez de definir seus próprios estilos (ou pior, usar estilos embutidos):

 <div class="clearfix">...</div>

5. Ao remover o estilo ou inserir listas não ordenadas e outros elementos

Remova o estilo de lista padrão e a margem esquerda dos itens da lista. Isso se aplica apenas a itens de lista de filhos imediatos. Caso você precise aplicar o mesmo para listas aninhadas, você precisará adicionar o nome da classe nelas também.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

Da mesma forma, para caixas de seleção ou botões de opção, temos .checkbox-inline e .radio-inline .

E você sempre pode adicionar .form-inline aos seus formulários (que não precisa ser um <form> ) para controles alinhados à esquerda e de bloco embutido.

6. Ao dimensionar botões

Gosta de botões maiores ou menores? Adicione .btn-lg , .btn-sm ou .btn-xs para tamanhos adicionais.

7. Ao flutuar e alinhar itens à direita ou à esquerda

Flutue um elemento para a esquerda ou direita com uma classe. !important está incluído para evitar problemas de especificidade. As classes também podem ser usadas como mixins com qualquer pré-processador CSS.

Use .pull-right , .pull-left , .text-right , .text-left em vez de .right , .left , .left -float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Realinhe facilmente o texto aos componentes com classes de alinhamento de texto.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Não personalize os arquivos principais do Framework diretamente

Ao trabalhar em grandes projetos, descobri que a melhor maneira de usar a estrutura de forma eficaz é construir a partir dela e não personalizar seus arquivos principais diretamente. Esse conceito é semelhante a outras plataformas e bibliotecas que você pode usar para o projeto.

No entanto, se você estiver criando um site pequeno e tiver um modelo de design que pode não exigir muitas alterações ou atualizações, talvez ache que personalizar a estrutura para suas necessidades é uma opção melhor. Por exemplo, você pode querer remover todas as coisas que você não precisa diretamente nos arquivos do framework, ou você pode ir para a seção de customização do site do Bootstrap onde você pode configurar facilmente todos os componentes, variáveis ​​e plugins jQuery para obter o seu melhor própria versão. Nesse caso, você pode acelerar o desenvolvimento do seu site e reduzir o tempo de estilo ou lidar com substituições.

No entanto, se você está começando ou trabalhando em um grande site com vários desenvolvedores ou mais - é melhor manter as coisas separadas e bem organizadas. Mova os arquivos da estrutura para fora da pasta CSS personalizada principal e mantenha-os em uma pasta sem edição e sem versão e remova o CSS não utilizado utilizando os plugins Grunt ou Gulp grunt-uncss ou gulp-uncss. Outra alternativa para mantê-lo separado é atendê-lo por meio de CDN. Ter o código do framework separado e intocado oferece uma opção melhor e mais rápida ao atualizá-lo para a versão mais recente. Também ajuda a minimizar uma série de problemas de escalabilidade e estilo, ou a lentidão ao fazer adições com mudanças rápidas e contínuas na interface do usuário.

Utilize ferramentas de scaffolding como Yeoman ou Slush e gerenciadores de pacotes como Bower, Python's pip, Node's NPM ou Ruby Gems, pois eles estão fazendo muito mais do que adicionar arquivos ao caminho do seu aplicativo. Eu realmente aprecio o poder do Bower - ele definitivamente pode fazer um pouco mais do que apenas baixar um arquivo ou dois. Usar um gerenciador de pacotes é uma boa ideia, pois provavelmente a complexidade do seu projeto aumentará e a quantidade de plug-ins de terceiros e como você os mantém se tornará insano e demorado. Bower irá ajudá-lo a acompanhar cada plugin e suas dependências, incluindo qualquer coisa relacionada ao Bootstrap.

Utilize recursos de bootstrap disponíveis para desenvolvimento de aplicativos

Com a popularidade do Bootstrap vem uma riqueza de recursos úteis: artigos, tutoriais, plug-ins e extensões de terceiros, modelos, construtores de temas e assim por diante. Portanto, se você estiver procurando inspiração ou trechos de código, terá tudo o que precisa para acelerar seu progresso.

Você pensaria que tendo tantos recursos disponíveis, todos iriam tirar proveito disso e usá-lo em seus projetos, mas acredite ou não - esse não é o caso. Alguns desenvolvedores desperdiçam seu tempo e retardam o progresso do projeto ignorando alguns ótimos trechos de código ou recursos. Embora você não deva apenas copiar e colar cegamente, você deve entender as partes boas e adotá-las ao seu estilo de codificação e necessidades técnicas. A capacidade de encontrar e separar bons recursos e ser capaz de utilizá-los de forma eficaz também é uma habilidade e requer anos de experiência e conhecimento.

Abaixo, você encontrará uma lista de recursos úteis para começar:

Modelos, temas e plugins

Temas oficiais dos criadores do Bootstrap: themes.getbootstrap.com.

Marketplaces com temas e modelos premium do Bootstrap: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Temas e modelos gratuitos do Bootstrap: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

“The Big Badass List” - uma lista de 319 recursos úteis do Bootstrap: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI escrito em puro AngularJS pela equipe AngularUI.

ReactJS

React-Bootstrap é uma biblioteca de componentes front-end reutilizáveis. Você terá a aparência do Twitter Bootstrap, mas com um código muito mais limpo, por meio do framework React.js do Facebook.

Django

Integração do Bootstrap 3 com o Django: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap é um andaime de blog completo para blogs baseados em Jekyll.

WordPress

Tema inicial do WordPress Sage com um fluxo de trabalho de desenvolvimento de front-end moderno. Baseado em HTML5 Boilerplate, gulp, Bower e Bootstrap.

Design material

Material Design for Bootstrap é um tema para Bootstrap 3 que permite usar o novo Google Material Design em sua estrutura de front-end favorita.

Conclusão

O Bootstrap é um dos melhores frameworks disponíveis que oferece muitas ferramentas e recursos excelentes para acelerar e acelerar o processo de desenvolvimento de aplicativos.

Você economiza muitas horas/dias de trabalho ao projetar e codificar uma interface de usuário incrível. Cada componente e plug-in é minuciosamente documentado com exemplos ao vivo e blocos de código para facilitar o uso e a personalização. É altamente recomendado por muitos desenvolvedores e muito popular tanto para prototipagem quanto para produção. É uma ferramenta muito boa para criar sites responsivos compatíveis com dispositivos móveis. O Bootstrap oferece um ótimo ponto de partida para muitos tipos de projetos, a opção de entregá-lo a um designer e dizer “faça isso parecer chique!” sem que eles precisem invadir o código. Mais importante, ele permite que você desenvolva a estrutura primeiro e trate de fontes, cores e estilos sofisticados depois. Aproveite o tempo para estudar o que ele pode fazer e ser inteligente sobre como usá-lo da melhor maneira para que você possa chegar onde deseja mais rapidamente.