Slim Waza

gistfile1.slim

header

  .row.nav-header

    .container

      .nav-header__logo
        img src="/"

      nav.nav-header__menu
        ul
          li
            a href="/" Sobre
          li
            a href="/" Projetos
          li
            a href="/" Serviços
          li
            a href="/" Contato

.row.hero

  .container

    h1.hero__title Nós Somos WAZA
    p.hero__text Lorem lipsum dolor sit amet consectue lorem dorem.
    a.btn.btn__light href="/" Conheça o nosso trabalho


.row.history-home

  .container

    h2.section-title Nossa História
    p.section-title__legend-title Lorem lipsum dolor sit amet consectue lorem dorem.

    video.history-home__container-video width="320" height="240"
      source src="movie.mp4" type="video/mp4"
      source src="movie.ogg" type="video/ogg"

    p
      | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    p
      | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

.row-works-home

  .container

    h2.section-title.color-white Últimos Trabalhos
    p.section-title__legend-title.color-white Lorem lipsum dolor sit amet consectue lorem dorem.

    .works-grid

      .works-grid__item
        img src="/"
        h3 Lorem Dorem
        p Lorem ipsum...

      .works-grid__item
        img src="/"
        h3 Lorem Dorem
        p Lorem ipsum...

      .works-grid__item
        img src="/"
        h3 Lorem Dorem
        p Lorem ipsum...

      .works-grid__item
        img src="/"
        h3 Lorem Dorem
        p Lorem ipsum...

    a.btn.btn__light

.row.clients-home

  .container

    h2.section-title.color-purple Últimos Trabalhos
    p.section-title__legend-title.color-purple Lorem lipsum dolor sit amet consectue lorem dorem.

    .tesmonial
      .testmonial__people
        img src="/"
        p Rafael Torales
        span Design do Startae
      .testmonial__text
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.row.contact-home

  .container

    h2.section-title.color-white Fale com a gente
    p.section-title__legend-title.color-white Lorem lipsum dolor sit amet consectue lorem dorem.

    .contact-home__form-content
      form action="/"
        input type="text" id="nome" placeholder="Nome"
        input type="text" id="email" placeholder="Email"
        input type="text" id="telefone" placeholder="Telefone"
        input type="text" id="msg" placeholder="Mensagem"
        button type="submit" value="Enviar"

    .contact-home__txt-contact
      ul
        li.contact-home__list-end
          | Superquadra Norte 214
          | Bloco A, Sala 214
          | Asa Norte
          | Brasília, Brasil
        li.contact-home__mail
          | oi@waza.io
        li.contact-home__tel
          | +55 61 3344-3344

footer
  span waza studio 2014. Alguns direitos reservados.

Fala Diego, você mandou muito bem cara. Tenho alguns poucos comentários para acrescentar. Vamos lá!

Linha #1:

https://gist.github.com/diegodap/b2fe9d2cf50ea6a497c1#file-gistfile1-slim-L1

Eu aplicaria as classes da linha 3 diretamente na tag header. Desta forma temos menos indentações no código e deixamos ele mais direto.

header.row.nav-header

Da forma com que eu fiz na minha implementação ficou mais ou menos assim:

header.row.well--small
  .container

    nav.nav.nav--primary
      = link_to 'Waza', '/', class: 'nav__brand'

      ul.nav__list
        li.nav__item = link_to 'Sobre', '/', class: 'nav__link'
        li.nav__item = link_to 'Projetos', '/', class: 'nav__link'
        li.nav__item = link_to 'Serviços', '/', class: 'nav__link'
        li.nav__item = link_to 'Contato', '/', class: 'nav__link'

Linha #12:

https://gist.github.com/diegodap/b2fe9d2cf50ea6a497c1#file-gistfile1-slim-L12

Seguindo aquele raciocínio de componentização, se mudássemos o markup do HTML do seu menu de ul para ol o css já quebraria pois desse jeito teríamos que aplicar os estilos ao ul e li. Agora se colocássemos classes isso já ficaria mais flexível e menos fácil de quebrar.

      ul.nav__list
        li.nav__item = link_to 'Sobre', '/', class: 'nav__link'
        li.nav__item = link_to 'Projetos', '/', class: 'nav__link'
        li.nav__item = link_to 'Serviços', '/', class: 'nav__link'
        li.nav__item = link_to 'Contato', '/', class: 'nav__link'

Linha #27:

https://gist.github.com/diegodap/b2fe9d2cf50ea6a497c1#file-gistfile1-slim-L27

Você foi quase certo aqui, só a forma de nomear o modifier que ficou um pouquinho diferente de como é usado no BEM.

Ao invés de:

.btn.btn__light

Seria:

.btn.btn--light

Já o underline duplo, seria para elementos filhos de um componente. Coloquei um exemplo de modifier no último filho do .nav para deixar mais claro a diferença. Exemplo:

.nav
  .nav__item Item
  .nav__item Item
  .nav__item.nav__item--last Item

Esse mesmo probleminha aconteceu em outros lugares. Se quiser dar uma geral.

---

Cara, o resto ficou muito bom! Tá mandando muito bem, na forma como estruturou, na forma como nomeou as classes.

Se quiser fazer mais um review com base nos meus feedbacks ou se tiver alguma dúvida é só falar.

Abraço!