Aqui onde trabalho o pessoal tem interesse em utilizar o bootstrap.
Gostei bastante da lib e realmente é bacana.
Só que estou receoso porque não tenho muito conhecimento sobre bootstrap e pelo pouco que vi, os styles já estão definidos internamente à lib, o que me obriga a utilizar apenas os oferecidos por ela.
A aplicação que estamos trabalhando é grandinha e já possuem styles definidos.
O que eu gostaria de saber é como eu poderia aplicar estes styles sem alterar os que já foram definidos (tag por tag).
Gostaria de saber como é possível desacoplar, completamente, a lib de forma que caso eu deseje alterar por outros styles ou libs sem precisar sair alterando os fontes?
Minha idéia no momento pra contornar isso seria aplicar os styles dinamicamente utilizando javascript.
Seria um algoritmo que poderia ser inserido na “master page” e que aplicaria os styles tag por tag no load da pagina utilizando o className. Exemplo:
<head>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<script type="text/javascript">
function ChangeClass () {
var parag = document.getElementById ("myP");
// mudaria esta propriedade tag por tag filtrando pelos classNames
parag.className = (parag.className == "red")? "green" : "red";
}
</script>
</head>
<body>
<p >
The contents of the paragraph
</p>
<button onclick="ChangeClass ();">Change className!</button>
</body>
Obrigado pela dica, mas ainda fiquei com duvidas:
Isso ainda não me manteria preso à classe btn que é do bootstrap e não da aplicação?
As tags “buttons” e “input type buttons” já possuem tags definidas.
Pelo que entendi, isso ainda me obrigaria a varrer o código inteiro dando replace nas classes das tags antigas por esta classe btn.
Não entendo sua preocupação em ficar “preso” ao nome da classe do bootstrap, qual real problema isto está te trazendo, se você pode mudar o estilo da classe de forma independente como demonstrado acima?
Sobre usar bootstrap num projeto existente, vale mais a pena reescrever o frontend do que tornar o código uma colcha de retalho.
Pra ser sincero, não acredito que esse isolamento da sua lib de css tenha tanta vantagem.
Se você quer fazer um replace dinâmico para o nome das classes, pode simplesmente deixar o nome das classes fixo no código e fazer esse replace quando precisar.
Porém, se quiser partir pra esse lado (se isolar da lib), você pode dar uma olhada no SASS.
Ele não foi feito para isso, mas acredito que dê algum suporte mais sério a extensão e importe de classes, daí você poderia definir suas classes como uma composição das classes do bootstrap. Se precisar mudar o dia, muda só em um lugar.
[quote=AbelBueno]Pra ser sincero, não acredito que esse isolamento da sua lib de css tenha tanta vantagem.
Se você quer fazer um replace dinâmico para o nome das classes, pode simplesmente deixar o nome das classes fixo no código e fazer esse replace quando precisar.
Porém, se quiser partir pra esse lado (se isolar da lib), você pode dar uma olhada no SASS.
Ele não foi feito para isso, mas acredito que dê algum suporte mais sério a extensão e importe de classes, daí você poderia definir suas classes como uma composição das classes do bootstrap. Se precisar mudar o dia, muda só em um lugar.[/quote]
O bootstrap não é apenas uma lib de css. É também uma de javascript, onde sua funcionalidade depende muito dos nomes de cada className. exemplo:
valeu pela dica, mas quando temos que reescrever todo o fonte só pra aplicar uma nova lib javascript e de styles é porque estamos fazendo algo errado. [/quote]
Sera o fato de usar javascript pra construir frontends dinâmicos?
valeu pela dica, mas quando temos que reescrever todo o fonte só pra aplicar uma nova lib javascript e de styles é porque estamos fazendo algo errado. [/quote]
Isso é relativo, mas se você prefere assim tudo bem. Se eu decido adotar o framework X eu vou deixar usá-lo plenamente sem complicações, onde no caso do bootstrap o desenvolvedor vai conseguir se virar rapidamente inspecionando e copiando os exemplos do site do bootstrap. Com toda liberdade de personalizar os estilos em CSS específico.
Se está indeciso em relação a outro framework, faça o estudo antes para adotar o que for melhor pra vida do projeto. E querer prever futuro pra algo que nem existe ainda é trabalhar para uma situação incerta. Na prática pode acabar no dia a dia lidando com um obstáculo a mais sem necessidade, onde lá na frente esse “futuro” pode ser algo completamente diferente, com novos conceitos e técnicas. Por exemplo, nos últimos anos tem se usado grid system e responsive layout, mas décadas atrás não dava pra prever que isso seria adotado.
[quote=javaflex]
Se está indeciso em relação a outro framework, faça o estudo antes para adotar o que for melhor pra vida do projeto. E querer prever futuro pra algo que nem existe ainda é trabalhar para uma situação incerta. Na prática pode acabar no dia a dia lidando com um obstáculo a mais sem necessidade, onde lá na frente esse “futuro” pode ser algo completamente diferente, com novos conceitos e técnicas. Por exemplo, nos últimos anos tem se usado grid system e responsive layout, mas décadas atrás não dava pra prever que isso seria adotado.[/quote]
Não entendo o que quer dizer prever.
Sim, realmente concordo com vc que não dá pra prever como os navegadores funcionarão, o que o cliente desejará alterar e outras variáveis. Mas algumas coisas, a estrutura de como queremos apresentar uma app pode durar décadas.
Acho que um exemplo simples de como estruturo o html possa lhe mostrar que não existirá necessidade de alterar no futuro a estrutura. Os styles e a responsividade do bootstrap é excelente. De alguma forma passarei a utiliza-los, mas tentando manter a estrutura já definida: