These are chat archives for mktvirtual/guias

3rd
Jun 2014
Hugo
@hugobessaa
Jun 03 2014 13:37
O que acham de colocarmos guias de instalação lá também? Facilita se alguém levar projeto pra casa ou em máquinas novas.
Só um conjunto de links levando para os guias mesmo
Renato Galvão
@renatogalvones
Jun 03 2014 13:45
Eu acho manero!
Hugo
@hugobessaa
Jun 03 2014 13:49
Hahahha. Tu mesmo que iria curtir
Hugo
@hugobessaa
Jun 03 2014 14:39
Bruno, conseguiu pegar algo do JavaScript hoje de manhã?
Renato Galvão
@renatogalvones
Jun 03 2014 15:00
  • Use nomes de variável com significado semântico.
    ```scss
    // bad
    $color-red: #f00;
    color: $color-red;

    // good
    $color-red: #f00;
    $color-text: $color-red;
    color: $color-text;

Eu acho que ter duas variáveis com o mesmo valor não é lá muito viável. Prefiro que as variáveis de cor tenham somente nomenclaturas relativas à cor. Não ao elemento onde vai ser utilizada. O que acham?

Hugo
@hugobessaa
Jun 03 2014 15:03
O problema disso é o seguinte: você fica preso ao nome da cor, não da função. Todos os detalhes do site (links, menu, bordas e botões) seguem uma cor $color-red. O designer muda para laranja. O que acontece? Teremos que catar cada $color-red dentro deste contexto e trocar por $color-orange. Em vez disso, podemos ter um $color-detail ou $color-brand e mudar a cor dele
Isso simplifica muita coisa
Renato Galvão
@renatogalvones
Jun 03 2014 15:12

Deixa ver se eu entendi. Desse modo teríamos que ter $color-links-header, $color-links-sidebar, $color-borders, $color-buttons e por aí vai.... é isso? Não ficaria mto poluído?

Acho que facilitaria pra mudar uma cor, mas acho que se o layout mudar pode acabar atrapalhando.

O que a gente poderia fazer é tentar se basear no styleguide. Seguir as nomenclaturas de lá. Pode ser um caminho.
Hugo
@hugobessaa
Jun 03 2014 15:16

Não seria bem isso. Na verdade depende da especificidade do layout. Layouts muito complicados realmente exigem um nível maior de detalhamento.

Tomemos como exemplo o site da Mkt.

Ali temos Quatro cores principais. O cinza escuro, o verde, o amarelo e o branco. Ali teríamos, por cima, $color-background $color-brand $color-content $color-text--light $color-text--dark. E mais as variáveis para dar nome a cada cor.

Podemos até utilizar alguma função para estabelecer a cor do texto. Como esta que criei.
Renato Galvão
@renatogalvones
Jun 03 2014 15:21
Acho que o melhor caminho pode ser o styleguide mesmo. Mas podemos ver com o GROU o que muda geralmente quando há alguma data especial e talz. Assim sempre utilizamos aquele "padrãozinho" de nomenclatura, pelo menos como base e incrementamos de acordo com o projeto/layout.