Como Modificar Bootstrap Simples e Efetivamente
Bootstrap não é de forma alguma o único framework de interface HTML / CSS, mas acho que é seguro dizer que ele mudou o jogo. Essa pilha de códigos incluída no código tornou o design e o desenvolvimento de muitos aplicativos (e sites) muito mais fáceis, além de popularizar a enorme estrutura HTML como um subproduto.
Infelizmente, a extensão do seu conjunto de recursos apela para os aspectos mais preguiçosos da natureza humana, e muitas das pessoas que optam por usá-lo ficam com os padrões. Agora, lembre-se, os estilos padrão e a grade de layout não são ruins em nenhum momento da imaginação. Eles são o resultado de muito trabalho duro e testes extensivos da equipe do Twitter. Eles são uma base sólida para se construir como qualquer outra.
Mas isso é tudo o que eles são: uma fundação. Frameworks, como o nome sugere, não devem ser usados como uma solução definitiva para todas as suas necessidades de UX. A única exceção a essa regra pode ser se você estiver desenvolvendo algo interno que o público nunca verá. Mas mesmo assim ... A ideia é levá-los adiante, expandi-los e alterá-los.
Os desenvolvedores do Bootstrap realmente fizeram um trabalho muito bom de tornar isso fácil de fazer: o código deles é modular; e você pode fazer download de componentes individuais da estrutura para usar como quiser. Eles até forneceram um ferramenta de personalização básica em seu site que permite editar todas as variáveis conforme necessário.
O resto, no entanto, depende de nós. E cara, alguns designers e desenvolvedores verdadeiramente impressionantes criaram mods e ferramentas que deixam o resto de nós sem desculpas. Não há razão para se contentar com os padrões.
Avalie seus projetos individuais; Talvez a tipografia padrão do Bootstrap seja a certa para você, mas o esquema de cores e a grade não são, talvez você precise de ícones diferentes. Identifique os locais onde o Bootstrap fica aquém das suas necessidades e observe os seguintes recursos.
Mods Bootstrap
São mods completos que usam a interface de inicialização básica e a transformam em algo quase irreconhecível. Seus usos são um tanto específicos e limitados; mas se eles atenderem às suas necessidades, eles podem economizar tempo e dinheiro.
UI plano
O primeiro mod nesta lista é UI plana. Lançado pelos caras da Designmodo O Flat UI alcançou popularidade instantânea na comunidade de design e por um bom motivo: é lindo.
Criado para aqueles que amam o design plano - em oposição às tendências algo skeuomórficas da Bootstrap - cada elemento da interface do usuário foi redesenhado a partir do zero com uma nova estética.
Com ícones vetoriais, uma nova fonte de ícone de glifo, elementos de interface do usuário personalizados (como uma lista de tarefas) e vários esquemas de cores facilmente modificados, o Flat UI fez com que eu, e provavelmente muitos outros, repensem como o Bootstrap pode parecer.
Meu único objeto de estimação: o tamanho do texto do elemento de parágrafo básico é um pouco pequeno para um site. Para ser justo, provavelmente é o ideal para uma interface de aplicativo onde você pode colocar texto em espaços pequenos.
O Flat UI é gratuito, mas você pode pagar por uma versão pro com elementos extras, funcionalidade e arquivos PSD.
Fbootstrapp
Lembra como eu disse que alguns desses mods tinham casos de uso específicos? Bem, eu não estava brincando. Fbootstrapp foi completamente re-trabalhado para ser compatível com os elementos da interface do usuário do Facebook.
Por que alguém faria aquilo? Bem, em suas próprias palavras, “o Fbootstrapp é um kit de ferramentas projetado para dar início ao desenvolvimento de aplicativos iFrame do Facebook em ambos os tamanhos relevantes. Inclui CSS e HTML básicos para tipografia, formulários, botões, tabelas, grades, navegação e muito mais, estilizados na aparência típica do Facebook. ”
Desenvolvedores de aplicativos do Facebook, observem: seu trabalho ficou mais fácil.
Modelos de administração da interface do usuário do Jumpstart
O Bootstrap pode ser destinado para uso em aplicativos, mas precisa de um pouco de trabalho se você pretende criar uma “interface de administração” clássica com ele. IU do Jumpstart traz três modelos diferentes que fazem isso de forma admirável.
Ícones de interface do usuário de administração, estilos de widget, plug-ins de visualização de dados baseados em jQuery e muito mais são reunidos em layouts limpos, personalizáveis e totalmente responsivos.
Esses mods são diferentes dos outros de uma maneira importante, no entanto. Não há versão gratuita; você tem que pagar por eles imediatamente. Eles não são muito caros: variam entre US $ 15 e US $ 20. Pela enorme quantidade de esforço que se dedicou a eles, eu diria que vale a pena, se eles atenderem às suas necessidades específicas.
BootMetro
Algumas pessoas adoram e muitos detestam com paixão; mas não há como negar que o Windows 8 e sua interface de usuário do Metro causaram um tumulto no mundo do design. Eu, pela minha vida, não consigo pensar em nenhum caso de uso (fora de algum tipo de loja de software), onde esse tipo de interface seria particularmente útil. Mas ei, em BootMetro nós temos um!
É grátis e parece ser bastante completo, então confira. Pode não ser particularmente útil para a maioria das pessoas, mas é um experimento de código interessante. (Eu quero dizer realmente? Bootstrap e Metro? Eu não vi isso vindo.)
Ferramentas de personalização de bootstrap
Então, você quer adaptar sua configuração do Bootstrap para melhor atender às suas necessidades de UI / UX. Por onde você começa? Bem, você poderia mergulhar direto no código. Eu já fiz isso. Eu vou te dizer, porém, pode ser difícil.
Se você quiser alterar toda a tipografia, ou as cores dos botões e links, ou os estilos da barra de navegação manualmente, você estará lá por um tempo. Você pode editar todas as variáveis no aplicativo de personalização no site do Bootstrap, mas precisará saber os códigos HEX para todas as cores e não obterá nenhum feedback visual ao fazer alterações.
Felizmente para nós, existem alguns criadores de temas do Bootstrap que foram criados especificamente para essa finalidade. Estes são os dois melhores que eu encontrei até agora.
StyleBootstrap
Se você pode ignorar a interface deselegante, StyleBootstrap é uma ferramenta poderosa para editar a maioria dos elementos de interface do usuário padrão que você encontrará no framework. Se você quer começar rapidamente, mudando apenas as coisas mais óbvias, então este é o lugar para começar.
Bootstrap Magic
Bootstrap Magic é a ferramenta a ser usada se você quiser fazer um rebranding em profundidade do framework. Ele tem uma interface mais simples e mais agradável e permite ajustar muito mais elementos do que o StyleBootstrap. Esteja avisado, porém ... isso vai demorar mais. Dito isto, ainda não demoraria tanto tempo quanto mudaria tudo manualmente.
Complementos e snippets
Basta dizer que há coisas que o Bootstrap não tem e que você pode achar útil. Para começar, temos ícones.
Fonte Incrível
Os ícones de glifo do Bootstrap são legais, mas limitados. Você tem ícones escuros, então você tem ícones claros, todos configurados em uma pequena imagem de sprite. Fontes de ícones, no entanto, são muito mais versáteis. Qualquer coisa que você pode fazer para o texto com CSS3, você pode fazer para esses ícones. Altere o tamanho, a cor, dê a eles uma sombra; É literalmente tão fácil quanto escrever CSS. Com cerca de 361 ícones no momento da redação deste texto, Fonte Incrível vale a pena conferir.
Bootsnipp
Bootsnipp é uma biblioteca de fragmentos de HTML projetados para funcionar com o Bootstrap, presumivelmente sem adicionar nenhuma biblioteca extra. Os trechos incluem: formulários de inscrição e login com guias, carrosséis, agendas melhores, uma interface de e-mail semelhante ao Gmail, uma interface do usuário do Media Player e muito mais.
Se você está preso tentando descobrir como juntar elementos em sua interface do usuário, dê uma olhada na biblioteca Bootsnipp. Se eles não tiverem exatamente o que você precisa, os exemplos de código podem ajudá-lo a descobrir como fazer isso.
Isso não é tudo ...
Com o framework favorito do Twitter sendo tão amplamente adotado como é, provavelmente há mais informações sobre como customizar o Bootstrap do que qualquer lista pode conter.
Afinal, é para isso que serve a Internet, certo? Isso e ... gatos.
Você modificou o Bootstrap? Você fez isso manualmente ou usou um recurso? Deixe-nos saber nos comentários.