Adicione design Usando HTML & CSS
Criado por Alex Liao, @alexliao
Traduzido por José Viera @NetoDevel
Agora o aplicativo está funcionando bem, mas ainda se parece com scaffold. Vamos adicionar algum design para torná-lo parecido com um site profissional. Quando terminar este tutorial, o aplicativo será parecido com esse.
1.Ajuste o layout da aplicação
Abra app/assets/stylesheets/application.css
, e substitua a linha
com
Finalmente, exclua o arquivo app/assets/stylesheets/scaffolds.scss
porque nós realmente não precisamos do estilo padrão gerado pelo Rails.
Agora vamos atualizar a página na url http://localhost:3000/ideas. Você não vai encontrar muita mudança, mas é uma boa preparação para as etapas seguintes.
2.Refinar a navegação
Considerando que “ideia” é o objeto mais importante na sua aplicação, nós vamos colocar o botão “New Idea” na barra de navegação para torná-lo sempre disponível.
Abra app/views/layouts/application.html.erb
, e abaixo da linha
adicione
3.Design para a lista de ideias
Agora é hora de fazer a página de listar ideias parecer mais profissional. Para isso, vamos substituir o layout da tabela com um layout div.
Coach: Fale um pouco sobre a tabela vs div.
Abra app/views/ideas/index.html.erb
em seu editor de texto e substitua todas as linhas com
Coach: Explique o que o novo código significa linha por linha, e fale um pouco sobre o grid do Bootstrap
Atualize! Nós ficamos com uma boa lista de ideias com design bonito. Clique no botão “New Idea”, e crie mais idéias com o texto real e imagens bonitas, a página ficará muito melhor com o conteúdo. Há um princípio de web design contemporâneo: o conteúdo é a melhor decoração.
4.Design para a página de detalhes da ideia
Clique no título de uma idéia, e você será levado para a página de detalhes da idéia. Agora ainda é scaffold gerado pelo Rails, então vamos melhorar a página.
Abra app/views/ideas/show.html.erb
em seu editor de texto e substitua todas as linhas com
Coach: Explique o que o novo código significa linha por linha.
E agora?
- Use o seu novo conhecimento para projetar um novo formulário para ideia
- Adicione mais design para as páginas como você deseja
- Siga os outros guias para aprender mais sobre Rails