Keynote por dentro do bootstrap

Entendendo o
Alexandre Magno
http://alexandremagno.net
Wednesday, July 10, 2013

Quem sou eu?

Apaixonado por música

tenho uma banda

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

Style guide é onde tudo começa...
Definições dos elementos que compõe uma página, de forma independente

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

Por que rápido?
bootstrap-server
bootstrap-min.css
bootstrap-min.js
26KB css
8.9KB js

Por que intuitivo?
O HTML do Bootstrap é padronizado e bastante declarativo

Bootstrap em fases
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!

Popularidade em 26 de Junho de 2013
52.115
16.802
fonte:
Github

Popularidade Integração com outros frameworks

Frameworks similares ao Bootstrap
http://foundation.com

http://skeleton.com

“Mark Otto”

Tecnologias que compõe o Bootstrap

Bootstrap inspirando novos templates
http://expo.getbootstrap.com
Com o mesmo HTML e CSS você tem vários templates para websites e apps

Customizando turbinando o Bootstrap

Prototipar websites e apps com o jestrap

Bootstrapers sites que usam o Bootstrap
Grid formatado
Design limpo
Botões deﬁnidos
Formulário padrão

Bootstrepes sites que não usam o Bootstrap
Grid formatado
Design limpo
Botões deﬁnidos
Responsive!

Bootstrepes sites que “ousam” com o Bootstrap
Modificação mais intensaWednesday, July 10, 2013

Bootstrapers ferramentas para o Bootstrap

Bootstrap agora é responsive
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!

Não se esqueça da metatag
SERÁ

Será só imaginação

a metatag viewport é realmente necessária?

Responsive no Bootstrap

Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários

Responsive no Bootstrap com Media Queries

Responsive no Bootstrap
Classes utilitárias

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

desenvolvimento para o Bootstrap
Plugin Javascript
Tirando vantagem do Data api

Plugin Javascript
Animações por CSS3

Less
Use variáveis para gerar CSS customizados
controle
de z-index
por variáveis

Less
Variação de cores através de funções
controle
de z-index
por variáveis

Bootstrap de agora em diante
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!

Bootstrap 3.0 construído com Mobile First

Bootstrap 3.0 mas por que Mobile First?
A ergonomia do de um dispositivo móvel
nos leva a diferentes considerações sobre
usabilidade

Estrutura dos arquivos

Building checando se está tudo nos conformes
Rodando o JSHINT, compilando LESS e compilando e minificando o Javascript

Bootstrap na globo.com
Os desenvolvedores se reuniram
Precisamos
padronizar
os produtos!
Vamos construir
um framework!
Enquanto isto na Globo.com

Várias tecnologias -> n front-ends?

Várias tecnologias -> 1 front-end?

Que joguem a primeira pedra
Usar o Bootstrap?

Nos grupos de discussão
Enquanto isso...

Somente
traduziram
e trocaram
o nome!

E Outros...

Opinião do @fat

Tradução primeira não-oficial recomendada pelo Bootstrap

Pull Requests aceitos no Bootstrap

Mande um pull-request
para gente ;-)

E vem aí
Bootstrap Mobile First

Perguntas?
Blog: blog.alexandremagno.net
Twitter: alexanmtz
github: github.com/alexanmtz

Keynote por dentro do bootstrap

Mais conteúdo relacionado

Mais procurados

Semelhante a Keynote por dentro do bootstrap

Keynote por dentro do bootstrap