Layoutit: Otimize seu trabalho

Layoutit Design Relax

Layoutit, criando sites muito mais rápido

Layoutit é uma ferramenta que ajuda a criar páginas HTML e CSS utilizando o Bootstrap, já criando suas páginas com o layout responsivo, se adaptando a qualquer resolução de tela, já falamos sobre isso no blog, caso queiram ler mais sobre layout responsivo clique aqui.

LayoutIt home design relax
Home do site

Meus Deus, mas eu não conheço nada sobre Bootstrap, minha vida acabou? Largo tudo o viro hippie? Vou vender missanga? Não tenho futuro?

Não gente calma!!!

Caso você não tenha a menor ideia do que seja Bootstrap, não tem problema, o layoutit é tão simples de mexer que o único pré requisito é saber um pouco de HTML e CSS, porque no final ele gera o arquivo pra você utilizar aonde e como quiser.

Usaremos de exemplo o modelo mais básico que a ferramenta oferece, Modelo de início.

Vejam esse menu na lateral esquerda da página.

Aqui você tem o sistema de grid onde você montará a estrutura da página, você pode colocar quantas colunas quiser mas no total para ser válido e a ferramenta aceite tem que somar 12.

O base css é aonde você encontra os títulos, parágrafos, tabelas, formulários e etc, os components é aonde encontrará menus, botões, abas de navegação e etc.

Eles fornecem também o javascript de algumas coisas já prontas, acabou a dor de cabeça com banners em carrossel por exemplo, ele já te dá isso pronto, além de barras de navegação, alertas, entre outras coisas.

Para inserir qualquer componente é só clicar no drag, arrastar e soltar, muito difícil né, você também pode alterar algumas coisas básicas como cor, tamanho de fonte e alinhamentos.

Pronto finalizei minha página.

Agora clique no preview, aí você verá antes de exportar o código como o seu site está, podendo também modificar os elementos de posição.

LayoutIt preview esign relax

Para fazer exportar o código clique em download, você poderá copiar e colar o código HTML ou baixar um arquivo.zip que terá o HTML, o CSS e o Javascript.

LayoutIt - download design relax

A ferramenta também tem uma opção share, onde gerará um link que você pode compartilhar com outras pessoas antes de baixar, isso é muito útil pois poupa trabalho você pode mandar o link pro seu cliente e ele aprovar ou não antes de você fazer o download e começar a personalizar o site.

LayoutIt share

Vejam a definição que o próprio site do Layoutit fala sobre a ferramenta.

“LayoutIt! NÃO é um construtor de site. É o kick-off para cada projeto frontend que você precisa desenvolver.

LayoutIt! tem todos os elementos e componentes de Bootstrap para fazer seu programação frontend mais fácil sem a necessidade de ser um especialista em JavaScriptt, HTML5 ou CSS3. Você constrói o que você precisa para começar, depois você o codifica do jeito que você mais gosta!”

Clique aqui e divirta-se.

http://www.layoutit.com/

design-relax-foto

Escrito por: Rafael de Rezende Basso

Designer gráfico e web, atualmente trabalha em um e-commerce, formado pela Metodista em Mídias Digitais e pela Panamericana em Design gráfico, amante de uma boa cerveja com os amigos e SPFC de coração.

Portfólio: http://www.rrbdesign.com.br

 

 

2 thoughts on “Layoutit: Otimize seu trabalho

    1. Olá Marcelo Obrigado por comentar em nosso site.
      Sim a ferramenta é 100% grátis, a mais ou menos um ano as funções de java script ainda não estavam habilitadas, talvez tenha sido isso que estava faltando quando você acessou.
      Use a vontade a ferramenta e qualquer dúvida não hesite em nos enviar uma mensagem.

      Design Relax

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *