O Bootstrap se tornou um Framework de Front-end muito utilizado nas aplicações atualmente. Não é a toa que ele é um dos projetos com mais forks no Github. Nesta palestra você vai entender a fundo sua estrutura, construída com o Node.js e o projeto que serve os downloads personalizados, o Bootstrap server, de modo que você será capaz de entender a fundo como ele foi estruturado, além de ficar sabendo o que vem aí com o Bootstrap 3.
5. também sou apaixonado por Open Source...
Twitter Bootstrap em português
jQuery sliding
jQuery Destaque
WP-Agenda
https://github.com/alexanmtz/bootstrap
http://www.github.com/alexanmtz
Wednesday, July 10, 2013
6. Style guide é onde tudo começa...
Definições dos elementos que compõe uma página, de forma independente
Wednesday, July 10, 2013
7. Entendendo o
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
2
tags: Bootstrap, jQuery, HTML5, Less, Node.js, CSS3, Responsive, Styleguide
Docs
HTML5
CSS3
4 Node.js
3
6
7
8
Style Guide
5 Jquery
Responsive
Customização
Wednesday, July 10, 2013
8. Por que rápido?
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
bootstrap-server
bootstrap-min.css
bootstrap-min.js
26KB css
8.9KB js
Wednesday, July 10, 2013
9. Por que intuitivo?
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
O HTML do Bootstrap é padronizado e bastante declarativo
Wednesday, July 10, 2013
10. Bootstrap em fases
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
11. Popularidade em 26 de Junho de 2013
52.115
16.802
fonte:
Github
Wednesday, July 10, 2013
18. Bootstrap inspirando novos templates
http://expo.getbootstrap.com
Com o mesmo HTML e CSS você tem vários templates para websites e apps
Wednesday, July 10, 2013
37. Vantagens filosofia Bootstrap
Atributos Data ao invés de Javascript declarativo
Extensões naturais do HTML e CSS
O Front-end é um produto
Animações por CSS3
ex: atributo placeholder introduzido no HTML5
ex: <body data-spy=”scroll” data-target=”.bs-docs-sidebar”>
1
2
3
4
Wednesday, July 10, 2013
38. desenvolvimento para o Bootstrap
Plugin Javascript
Tirando vantagem do Data api
Wednesday, July 10, 2013
39. desenvolvimento para o Bootstrap
Plugin Javascript
Animações por CSS3
Wednesday, July 10, 2013
40. desenvolvimento para o Bootstrap
Less
Use variáveis para gerar CSS customizados
controle
de z-index
por variáveis
Wednesday, July 10, 2013
41. desenvolvimento para o Bootstrap
Less
Variação de cores através de funções
controle
de z-index
por variáveis
Wednesday, July 10, 2013
42. Bootstrap de agora em diante
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
45. Bootstrap 3.0 mas por que Mobile First?
A ergonomia do de um dispositivo móvel
nos leva a diferentes considerações sobre
usabilidade
Wednesday, July 10, 2013
47. Building checando se está tudo nos conformes
Rodando o JSHINT, compilando LESS e compilando e minificando o Javascript
Wednesday, July 10, 2013
48. Bootstrap na globo.com
Os desenvolvedores se reuniram
Precisamos
padronizar
os produtos!
Vamos construir
um framework!
Enquanto isto na Globo.com
Wednesday, July 10, 2013