Tutoriais Rails Girls

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. Delete CSS scaffold indesejado

Abra app/assets/stylesheets/application.css, e substitua a linha

body { padding-top: 100px; }

com

body { padding-top: 60px; }

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

<li class="nav-item active">
  <a class="nav-link" href="/ideas">Ideas</a>
</li>

adicione

<li class="nav-item">
  <%= link_to 'New Idea', new_idea_path, class: "nav-link" %>
</li>

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.

Instrutor(a): 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

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present?%>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

Instrutor(a): 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 ideias 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 ideia, e você será levado para a página de detalhes da ideia. 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

<p id="notice"><%= notice %></p>

<div class="row">
  <div class="col-md-9">
    <%= image_tag(@idea.picture_url, width: '100%') if @idea.picture.present? %>
  </div>

  <div class="col-md-3">
    <p><b>Name: </b><%= @idea.name %></p>
    <p><b>Description: </b><%= @idea.description %></p>
    <p>
      <%= link_to 'Edit', edit_idea_path(@idea) %> |
      <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> |
      <%= link_to 'Back', ideas_path %>
    </p>
  </div>
</div>

Instrutor(a): Explique o que o novo código significa linha por linha.

E agora?

Outros Guias