Arquivo

Posts Tagged ‘twitter bootstrap’

Extendendo o Twitter Bootstrap

03 - 13 2 comentários

Na busca de estilização para um input file encontrei algumas novidades que melhoram e extendem o framework twitter bootstrap.

Jasny Bootstrap

JasnyBootstrapExtended JasnyBootstrapHeroUnit

Diferenciais:

Bootsnipp

bootsnipp

Snippets, códigos prontos de layout com twitter bootstrap.

Acelerando desenvolvimento ASP.NET MVC com Twitter Bootstrap

Imagine o seguinte cenário:

Você precisa desenvolver um projeto web, mas não tem afinidade com CSS.

As possibilidades que imagino são:

1. Investir num designer profissional para o projeto.

2. Se aventurar no design.

3. Utilizar um template pronto.

4. Criar um novo design com o amigável Twitter Bootstrap.

Já estou utilizando em novos projetos. E é ótimo.

Há muitos pontos fortes como:

  • Sistema de grid. Muito fácil posicionar os elementos na página com ele.
  • Design responsivo: Suporte a tamanhos de tela diversos. (Mobile, Tablets etc.)
  • Tipografia
  • Blocos de Código: Facilita a inserção de blocos de código.
  • Tabelas: Estilização fácil de tabelas.
  • Formulários: Facilita a inserção de formulário com caixas de busca, checkboxes, selects etc. com estilos de validação dentre outros.
  • Botões: diversos estilos de botões.
  • Mini Ícones: mini ícones para utilizar livremente.
  • Componentes: Dentre diversos componentes para dropdowns, labels, badges, tipografia, thumbnails, alerts, progress bars, dentre outros.
  • Pugins Javascript: Bootstrap também acompanha atualmente 12 plug-ins jquery. * Requer a última versão do jQuery linkada na página.

Exemplo de tela construída com o Twitter Bootstrap:

 

Veja mais motivos pra utilizar o Twitter Bootstrap no Site Oficial

Conheça mais sites construídos com o bootstrap no tumblr Built with Bootstrap

 

Outros links:

Artigo em português sobre o Twitter Bootstrap: http://abruno.com/blog/twitter-bootstrap/

Prototipando com Placehold.it

05 - 12 3 comentários

Desenvolvendo um novo website ASP.NET MVC 3 com C#, precisei posicionar um carousel na página, e queria preenchê-lo com alguns items de tamanho: 900 x 300.

Possibilidades:

1. Utilizar algum editor e criar uma imagem com o tamanho 900 width x 300 height.

2. Usar o serviço placehold.it.

PrintScreen do site Placehold.it

Obviamente optei pela opção de utilizar o Placehold.it. É um serviço muito útil nessa situação.

Utilizando o serviço rapidamente obtemos vários tipos de placeholders para prototipar nossos sites:

  • Placeholder de tamanho 150×150 contendo texto:

Código HTML: <img src=”http://placehold.it/150×150&text=placehold.it+e+muito+bom!”/&gt;

  • Placeholder de tamanho 300×300 com background preto e foreground branco:

Código HTML: <img src=”http://placehold.it/300/000000/eeeeee&text=placehold.it+quebra+um+galho!”/&gt;

 

E por fim o carousel que criei com a ajuda do Twitter Bootstrap e do Placehold.it:

Item de carousel usando imagem do Placehold.it

Viagem e Voo

Dicas para viagens, férias e voos nacionais e internacionais

Ivan Guimarães Meirelles

Analista Desenvolvedor

Void Podcast

Vazio e sem retorno de valor

Elemar DEV

Negócios, tecnologia e desenvolvimento

2,000 Things You Should Know About WPF

Everything a WPF Developer Needs to Know, in Bite-Sized Chunks

Gabriel RB.net

Blog técnico, com dicas, códigos, novidades e problemas do dia-a-dia programando.

Alexandre Valente's Blog

Experiências em tecnologia e assuntos diversos

%d blogueiros gostam disto: