Tutoriais Rails Girls

Adicione design à sua aplicação com HTML e CSS

Traduzido por @MADPT aka Miguel Ângelo

Esse guia assume que você já construiu o app do Rails Girls seguindo o tutorial de desenvolvimento do app.

1.Desenhe o cabeçalho

.navbar {
    min-height: 38px;
    background-color: #f55e55;
}

Agora atualize a página e verifique as mudanças. Você pode tentar alterar a cor ou fonte do cabeçalho. Você pode verificar a referência de cor aqui http://color.uisdc.com/.

Instrutor(a): fale sobre a propriedade display, inline e block.

.navbar a.brand { font-size: 18px; }
.navbar a.brand:hover {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
}

Instrutor(a): explique os 4 estados de um link

2.Desenhe a tabela

<table>

com

<table class="table">`
<%= image_tag(idea.picture_url, :width => 600) if idea.picture.present? %>

Tente mudar a largura e veja o que vai acontecer

.container a:hover {
  color: #f55e55;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}

3.Adicione estilo ao rodapé

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

Tente adicionar mais coisas em footer, depois ajuste sua posição.

4.Adicione estilo ao botão

  Adicione estas linhas ao ficheiro app/assets/stylesheets/ideas.css.scss

.container input[type="submit"] {
  height: 30px;
  font-size: 13px;
  background-color: #f55e55;
  border: none;
  color: #fff;
}

Instrutor(a) explique como usar border em css, tente modificar o estilo do botão como em volta da esquina, adicione sombra ou cor, etc.

Outros Guias