As estruturas da Web, como Bootstrap ou HTML5, oferecem alguma coisa a um designer (não desenvolvedor)?

Observe que se trata de design muito mais que desenvolvimento.

Eu construo sites do zero com CSS e HTML completamente escritos à mão.

Conheço alguns modelos de CSS pré-compilados, como o Bootstrap ou o HTML5 Boilerplate, há algum tempo. Eu olhei para eles brevemente no passado, mas nunca pulei para usá-los de verdade. Não tenho problemas ao redefinir o CSS, incluir o javascript quando necessário ou configurar para viewports.

Esta noite, eu codifiquei uma página HTML5 / CSS básica. Nada realmente impressionante em termos de layout. Simplesmente um ponto de partida. Depois, decidi dar um giro no Bootstrap com o mesmo layout. É uma coluna bastante padrão de 960px, 3 com página de imagem de herói.

Ao alterar o Bootstrap, ocorreu-me que 80% ou mais do meu tempo estava sendo gasto aprendendo qual classe ou ID era aplicada a alguma coisa, e depois encontrei isso no CSS para ajustar. Ficou claro que o Bootstrap não iria me salvar a qualquer momento. De fato, o Bootstrap aumentaria bastante o tempo de produção devido ao CSS * excessivamente modelado.

* ( por "excessivamente modelado"), quero dizer que existe uma grande quantidade de CSS que eu provavelmente não usaria para nenhum site. Não que exista CSS desnecessário no geral. )

Entendo que, se eu estivesse familiarizado com o Bootstrap, estaria familiarizado com os nomes de classe / ID e com a localização geral nas folhas de estilo. Então, estou disposto a me curvar um pouco sobre o tempo que estava me levando, percebendo que parte disso era devido ao meu próprio desconhecimento.

No entanto, não posso deixar de me perguntar se Bootstrap et. al. são apenas muletas que são designers incapacitantes, alimentando-os com sua própria marca de código. Assim, trava uma base de consumidores que depende inteiramente de uma solução de terceiros e sua funcionalidade para tudo, ou pelo menos para a maioria. Isso me lembra aqueles que só podem criar um site se puderem usar o Dreamweaver. E o céu proíbe se eles não tiverem acesso ao Dreamweaver e for necessária uma alteração.

Quando crio um site, uso meu próprio conjunto de nomes de classe e ID padrão. Estruturo CSS como é intuitivo para mim. Eu tenho meu próprio conjunto de modelos de pré-compilação para configuração rápida. Portanto, qualquer site que eu construo eu posso editar rapidamente. Usar qualquer um dos pacotes front-end pré-configurados significa simplesmente que preciso aprender suas convenções de nomenclatura e sua estrutura, em vez de confiar sozinho.

• Alguém pode me elogiar as grandes virtudes de sistemas de modelos como o Bootstrap ou o HTML5 Boilerplate ?
• O que os torna valiosos para você?
• Você está apenas familiarizado com o sistema que usa, para poder navegar com facilidade ou ainda precisa procurar itens?
• Você poderia criar um site sem eles, se precisasse?

Estive pesquisando bastante estruturas no último mês. Na verdade, não mergulhei em nenhuma das soluções, mas algumas alternativas de estrutura que estão na minha lista restrita são Foundation , Intuit e YAML e Base .

O bom disso é que eles não têm a aparência de 'Bootstrap' e parecem incentivar os designers a trabalharem (design), enquanto cuidam da capacidade de resposta.

Aqui está uma grande lista de estruturas e mais informações neste artigo .

Como mencionado, eu fiz o trabalho da pesquisa, mas ainda não comecei a testá-los; portanto, qualquer comentário que defenda qualquer uma das estruturas seria útil.

As vantagens tendem a ser principalmente:

• Prototipagem rápida (ou seja, velocidade)
• Consistência entre navegadores incorporada

Se você precisa criar uma grade, e a grade que você precisa criar se encaixa na estrutura CSS pré-criada, a lógica é que você está no meio do caminho usando a estrutura.

Tudo isso dito, eu tendem a concordar com você. As estruturas CSS, IMHO, são como modelos de design visual, pois se atendem a 90% do seu objetivo, são ótimas, mas se não atendem, você está gastando muito mais tempo e esforço modificando o padrão do que apenas construindo seu próprio zero.

TERMO ADITIVO:

Devo acrescentar mais um benefício potencial:

• é um sistema documentado

Em um ambiente corporativo, onde você pode ter vários desenvolvedores de front-end e o projeto pode durar vários anos com várias equipes diferentes de desenvolvedores de front-end, ter uma estrutura de camada de apresentação subjacente documentada pode ajudar.

Isso não quer dizer que sua própria estrutura construída em casa não possa ser documentada; é apenas que a documentação geralmente não é uma prioridade.

Estou familiarizado com o Boilerplate HTML5, mas estou mais familiarizado com o Bootstrap, então vou falar sobre isso. Lembre-se de que ambos são voltados para duas tarefas diferentes (o H5BP é um modelo normalizado responsivo, o Bootstrap é uma coleção de widgets HTML / CSS / JS e uma grade responsiva.) Na verdade, eles podem ser usados ​​juntos .

No entanto, não posso deixar de me perguntar se Bootstrap et. al. são apenas muletas que são designers incapacitantes, alimentando-os com sua própria marca de código. Assim, trava uma base de consumidores que depende inteiramente de uma solução de terceiros e sua funcionalidade para tudo, ou pelo menos para a maioria. Isso me lembra aqueles que só podem criar um site se puderem usar o Dreamweaver. E o céu proíbe se eles não tiverem acesso ao Dreamweaver e for necessária uma alteração.

A analogia falha aqui porque você tem acesso total à fonte do Bootstrap. Se você não gosta de como algo funciona, pode alterá-lo. Para mim, é o oposto de uma muleta - você pode usar o código-fonte para aprender técnicas de CSS.

Não concordo que "criar um site" precise estar tão próximo do metal quanto acredito que os codificadores C precisam ter um conhecimento íntimo da linguagem assembly. Embora até essa analogia seja insuficiente, porque o ajuste de HTML / CSS é simplesmente uma questão de estender os seletores e adicionar o que você precisa.

Alguém pode me elogiar as grandes virtudes de sistemas de modelos como o Bootstrap ou o HTML5 Boilerplate?

O recurso matador do Bootstrap, para mim, é o consistente e fácil de aplicar o estilo do widget e os componentes Javascript. Quer um link parecido com um botão? Adicione uma classe '.btn'. Quer uma mesa? Adicione uma classe '.table'. Quer um elemento de navegação? Configure uma lista não ordenada e adicione classes de navegação.

Dropdowns, popovers, alertas etc. são facilmente adicionados a elementos com atributos de dados. O Bootstrap inclui um conjunto de ícones muito bonito que pode ser facilmente integrado aos widgets.

O que os torna valiosos para você?

• Prototipar sites rapidamente
• Toda a depuração do CSS entre navegadores e plataformas foi feita para mim.
• CSS facilmente personalizado com uma ampla seleção de variáveis para que eu possa experimentar e criar protótipos de layouts rapidamente.
• Widgets de navegação padrão
• Código-fonte aberto e gratuito, posso sujar as mãos e personalizar o LESS se precisar de um novo mixin ou alterar o comportamento da maneira que preciso.

Você está apenas familiarizado com o sistema que usa, para poder navegar com facilidade ou ainda precisa procurar itens?

Um dos maiores recursos do Bootstrap é a excelente documentação . Eu posso navegar com facilidade e os seletores de css são intuitivos e fáceis de lembrar.

Você poderia criar um site sem eles, se precisasse?

Sim, mas é claramente mais trabalho. Posso me concentrar nos layouts de UX e protótipos rapidamente, com widgets com boa aparência e funcionalidade consistente.

O bom de modelos de sistemas e estruturas é que eles podem economizar muito tempo se você trabalhar da maneira que eles querem. Portanto, com o Bootstrap, depois de aprender sua semântica para fazer um carrossel JS, é quase criminalmente simples de implementar. Além disso, o Bootstrap parece ficar muito mais simples se você rodar o seu próprio antes de começar ou usar algo como bootstrap-sass no Rails para alterar essas variáveis ​​rapidamente; isso evitará que você mude tudo mais tarde.

O DA01 fala sobre a consistência do navegador ... esse é um grande fator para mim. É por isso que eu uso o jQuery, embora várias pessoas na SO o lembrem de que adicionar uma grande biblioteca apenas para fazer algumas coisas é um desperdício de recursos. Sei que quando uso o jQuery, ele funciona em um certo conjunto de navegadores e, mesmo que eu consiga obter uma solução mais leve por conta própria, achei mais benéfico aprender como o jQuery quer que eu escreva JavaScript e, em seguida, faça do seu jeito.

No final, eu costumo achar estruturas HTML / CSS restritivas; Sou maníaco por controle o suficiente e ainda gosto de codificar manualmente quando posso. Mas, eu respeito o fato de que pessoas mais inteligentes e avançadas do que eu gastaram muito tempo para configurar esses modelos / estruturas.

Por interesse, algum de vocês trabalha em uma grande equipe para uma grande empresa?

Estruturas como o bootstrap são fantásticas para criar um padrão consistente de código em um projeto, também significa que, ao recrutar para novos desenvolvedores, aqueles com experiência em uma estrutura popular já estarão familiarizados com a sintaxe e podem se tornar produtivos muito mais rapidamente ... ótimas notícias para grandes empresas.

Além disso .. com estruturas como o bootstrap, eles estão constantemente mantendo-o atualizado, suportando mais tamanhos de tela, mais dispositivos e melhores recursos, para uma empresa como a nossa (onde usamos o bootstrap), isso se resume essencialmente ao dinheiro economizado.

Lendo algumas das respostas até agora, elas parecem ter uma mente muito estreita, presumo que a maioria das respostas seja de pessoas acostumadas a trabalhar sozinhas ou em equipes muito pequenas e em projetos menores, onde esse tipo de coisa normalmente não é um problema. .

Além do que foi dito nas ótimas respostas anteriores, outra vantagem desses modelos seria a consistência entre dispositivos . As grades integradas facilitam o design de qualquer sistema operacional.

Ainda prefiro escrever meu próprio código, pelos seguintes motivos:

• Familiaridade com o que eu já escrevi. Se preciso mudar alguma coisa, sei exatamente onde está;

• Estrutura centrada no projeto. Cada novo site / aplicativo terá necessidades diferentes das anteriores, portanto, arquivos e recursos podem precisar ser organizados separadamente.

• Visualizações personalizadas para diferentes dispositivos.

A menos que você esteja criando uma página muito restrita, acabará adicionando cada vez mais estilos a novos elementos e substituindo os existentes.

Como gosto de trabalhar com designs responsivos, a principal razão pela qual não os utilizaria é porque prefiro projetar cada etapa responsiva "separadamente" e como um todo. E esses modelos geralmente funcionam com uma grade mais ou menos rígida que você não pode ajustar completamente.

A maior vantagem é que você pode experimentar o redimensionamento, em vez de apenas especular como as coisas seriam.

Eu tenho uma abordagem de desenvolvimento muito "primeiro o conteúdo", na qual codifico a navegação e adiciono o conteúdo do texto. Isso tende a expô-lo a coisas que você não esperava quando estava na fase de design.

Usando uma estrutura como o Twitter Bootstrap, você pode realmente testar as páginas enquanto ainda está no design e até descobrir problemas de usabilidade e outros desafios da Experiência do Usuário. As estruturas têm muitas classes reutilizáveis ​​com as quais você se familiarizará e economizará tempo.

Você mencionou que codifica muito do zero. Quando tenho algo que precisa ser muito personalizado ou muito leve, eu vou com o Skeleton

Durante anos, eu costumava codificar tudo, mas hoje em dia eu uso o Bootstrap. Por que eu faço isso?

1. Recebo um layout responsivo com muito pouco trabalho. Em alguns sites em que eu estava trabalhando, eram necessários apenas alguns pequenos ajustes para obter um layout otimizado para tablet e celular. A barra de navegação responsiva é um dos meus componentes favoritos de inicialização.
2. Os controles padrão não são consistentes entre os navegadores e o SO, sem mencionar que todos são invariavelmente feios, independentemente do SO ou navegador que você estiver usando. Com o bootstrap, você obtém uma aparência decente e consistente e sente pouco trabalho. Se você deseja alterar o estilo de todos os controles de qualquer maneira, sim, o Bootstrap não economizará muito tempo, mas, na minha experiência, na maioria das vezes você não teria tempo suficiente para mudar o estilo de todos os controles, mas ainda se sente irritado com o padrão feio. controles.
3. Isso limita o que você deseja fazer, o que é uma coisa boa, porque, ao trabalhar com CSS puro, você tende a ajustar todos os detalhes (cor, espessura da borda, gradiente, sombra, raio da borda, transições, e a lista continua), embora individualmente levem pouco tempo, no geral é um grande sumidouro de tempo. Ao trabalhar em projetos com prazo, você deseja limitar o que pode ou não fazer; o uso de estruturas permite que você pense em componentes de granulação mais grossa, em vez de quais propriedades CSS ajustar.
4. Algumas estruturas do lado do servidor têm integração com o bootstrap. Por exemplo, ao usar o django-bootstrap, você pode fazer isso apenas {{ form|as_bootstrap }}para obter formulários com estilo de inicialização, incluindo destaque em vermelho nas mensagens de erro, etc.

Ao alterar o Bootstrap, ocorreu-me que 80% ou mais do meu tempo estava sendo gasto aprendendo qual classe ou ID era aplicada a alguma coisa, e depois encontrei isso no CSS para ajustar.

É aí que você entende errado. Se você deseja se beneficiar do Bootstrap, não deve personalizar muito; você desiste da flexibilidade de precisar e pode ajustar tudo ao usar componentes pré-construídos. Você não deve gastar tempo vendo ou esculpindo tábuas de madeira ao decorar uma sala com os componentes da IKEA.

O Bootstrap é bom quando você precisa corrigir rapidamente um site em funcionamento a partir de componentes pré-construídos; seus componentes se destacam como um dedão dolorido se você os colocar em sites com designs sofisticados, por isso geralmente uso o Bootstrap para esse tipo de projeto.

Usar qualquer um dos pacotes front-end pré-configurados significa simplesmente que preciso aprender suas convenções de nomenclatura e sua estrutura, em vez de confiar sozinho.

Essa é realmente uma vantagem do uso de um pacote popular. É mais fácil entregar um projeto a outro desenvolvedor quando os dois sabem o que "btn-group", "btn btn-large" faz, com estruturas pessoais, eles precisariam aprender suas peculiaridades (ou, mais comum, eles apenas cascateariam) seu css com as alterações deles, e não se preocupe em tentar decifrar ou modificar seu código).

Você está apenas familiarizado com o sistema que usa, para poder navegar com facilidade ou ainda precisa procurar itens?

Os mais comuns, como btn, tabela, linha *, extensão *, etc, seriam naturais. Mas para o html dos principais componentes, é muito mais rápido copiar e colar dos exemplos em vez de digitá-los.

Você poderia criar um site sem eles, se precisasse?

Estive lá, fiz isso muitas vezes.

eles são bons apenas para:

1. designers que não são familiarizados com a codificação, mas desejam uma solução para trazer seus designs para um site.
2. uma maneira de transmitir produção de linha para alguém que não deseja criar sua própria estrutura.

pessoalmente, tenho meus próprios métodos e não desejo seguir esse caminho, porque já aprendi a codificar CSS, HTML e jQuery. Eu vejo um benefício nisso para pessoas que não têm idéia e estão tentando aprender a codificar. Teria sido bom ver algo assim há cerca de cinco anos. Além disso, como você declarou, levaria mais tempo para implementar isso em seus métodos de produção atuais.

EDIT: não tentando aumentar o seu thread, mas também estou me perguntando a mesma coisa, mas no que diz respeito ao WordPress. Usei levemente o WordPress, mas não sei se uma estrutura é benéfica. Planejei seguir o caminho antiquado até encontrar um grande benefício.

O Bootstrap é bom como ponto de partida para um layout responsivo. Mas no que diz respeito ao design, acho que falta bastante. Ele tem uma aparência meio 'bootstrappy', que por ser um modelo é extremamente usada.

Mas você deve ter em mente para que o bootstrap foi criado, para trazer consistência aos aplicativos internos criados pelo twitter, e se você usá-lo para isso, ou mesmo se é um desenvolvedor que deseja aprimorar rapidamente a Web aplicativo sem muita reflexão, talvez como um mvp ou protótipo seja uma ferramenta realmente ótima.