Ainda na página que abre automaticamente no início do Brackets, vamos fazer alguns testes.

Na coluna esquerda, podemos selecionar o arquivo CSS só para dar uma olhada nele. Veja que os títulos h1 até h6 estão configurados para a cor #222. Vamos voltar a visão do "index.html" selecionando na coluna da esquerda. Se ainda não colocou no "live preview", faça isso agora e deixe o navegador e o Brackets abertos. Marque qualquer TAG de título, pode ser uma "h1" por exemplo, e pressione Ctrl+e. Você verá abrir no Brackets, dentro do código HTML, uma linha destacada com a parte do arquivo CSS, inclusive com os números das linhas, que controla esta TAG selecionada e no navegador os elementos correspondentes ficam marcados também. Parando o cursor sobre a propriedade "color", aparece um balão com a amostra da cor. Vamos ver a mágica de alterar o CSS e ver a "live preview" no navegador, tudo isso de dentro do código HTML na linha que abrimos com o Ctrl+e. Para isso, troque o #222 para #003399 e veja o resultado ao vivo. Legal, não é?

Agora, experimente selecionar dar um Ctrl+e e trocar o "background-color" para #ff8000. Sentiu a praticidade?

Para a extração de arquivo PSD, deixo um vídeo: É muito prático e acelera muito o desenvolvimento. Imagine pegar o PSD aprovado com tudo nele e extrair os elementos como imagens, fontes e cores, por exemplo.

Espero que apreciem a ferramenta. Eu vou usar muito.

Abraços e até uma próxima oportunidade.

Fontes

• spartanix.com
• http://brackets.io
• Adobe: Creative, marketing, and document management solutions
• Web Upd8: Ubuntu / Linux blog
• One moment please...