Mais de 55 ferramentas CSS: pré-processadores, plugins, editores e geradores de gradiente

Publicados: 2016-12-30

CSS significa Cascading Stylesheet. CSS é uma linguagem de marcação usada com HTML para projetar páginas da web. As páginas HTML não ficam ótimas, mas com CSS, você pode torná-las bonitas e atraentes. Se você está planejando aprender o desenvolvimento de temas do WordPress, antes de tudo, você deve aprender HTML e CSS.

Mais artigos da série Theme Development Tools

  • Página principal da série de ferramentas de desenvolvimento do WordPress
  • Baixe 15 livros gratuitos para dominar HTML, CSS, JavaScript, jQuery, Bootstrap e WordPress
  • Lista definitiva dos 30 melhores Chrome, extensões do Firefox, tutoriais e ferramentas para desenvolvedores da Web
  • 38 cursos em vídeo gratuitos para aprender HTML, CSS, PHP, jQuery, JavaScript, Git e muito mais

Neste artigo, compartilharemos as melhores ferramentas CSS para desenvolvedores iniciantes e avançados do WordPress. Se você é iniciante absoluto e não sabe nada sobre HTML ou CSS, você pode baixar 38 cursos gratuitos e 15 ebooks gratuitos para aprender HTML, CSS e outras linguagens de programação do zero.

12 ferramentas CSS: pré-processadores CSS, aplicativos e complementos

  1. Less CSS : Less é um pré-processador de CSS, o que significa que ele estende a linguagem CSS, adicionando recursos que permitem variáveis, mixins, funções e muitas outras técnicas que permitem que você faça CSS mais sustentável, temático e extensível.

  2. SASS afirma ser a linguagem de extensão CSS de nível profissional mais madura, estável e poderosa do mundo. SASS tem quase uma década e há um número infinito de frameworks construídos com Sass, incluindo Compass, Bourbon e Susy, só para citar alguns.

  3. Stylus é um pré-processador de CSS, que estende a funcionalidade do CSS regular. oferece funcionalidade lógica poderosa, capacidade de executar via Node.js / JavaScript, (sem Ruby), capacidade de executar como parte da configuração do Node.js, sintaxe limpa e mínima, mas flexível.

  4. CodeKit ($ 32) é um aplicativo muito poderoso e popular para usuários de MAC. CodeKit pode compilar Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown e Javascript. Oferece navegadores de atualização automática e com Bower integrado, você pode instalar mais de 6.000 componentes com um único clique, incluindo Bootstrap, jQuery, Modernizr, Zurb Foundation e até WordPress.

  5. PrePros ($ 29) : Prepros é uma ferramenta premium para compilar LESS, Sass, Compass, Stylus, Jade e muito mais com prefixo CSS automático. Ele vem com servidor embutido para testes entre navegadores. Está disponível para Windows, Mac OS X e Linux. Ele oferece prefixação CSS automática, atualização automática do navegador, minificação de arquivos, otimização de imagem, servidor embutido e muitos outros.

  6. Emmet : Um plugin gratuito para diferentes editores de código escreverem código de forma rápida e fácil. Emmet é escrito em JavaScript puro e funciona em diferentes plataformas: navegador web, Node.js, Microsoft WSH e Mozilla Rhino.

  7. Fire.App : Uma ferramenta semelhante ao CodeKit, para Windows, é o fire.app (também roda em Linux e Mac). Adora Sass/Compass, mas odeia interface de linha de comando? Fire.app tem suporte Sass/Compass de primeira classe, assim como nosso Compass.app. Chega de prefixos CSS de fornecedores e imagens de sprite artesanais!. Fire.app funciona na plataforma Mac, Linux e Windows. O processo de instalação é tão fácil quanto clicar e arrastar.

  8. Snippets é um programa gratuito para gerenciar seu código. ajuda você a organizar e reutilizar trechos de código em diferentes projetos, compartilhar trechos publicamente e com sua equipe. Isso está disponível para Mac e Windows.

  9. Koala App é um aplicativo GUI para compilação Less, Sass, Compass e CoffeeScript, para ajudar os desenvolvedores da Web a usá-los com mais eficiência. Koala pode ser executado em Windows, Linux e Mac.

  10. As edições de CSS e as alterações de imagem do LiveReload são aplicadas ao vivo. CoffeeScript, SASS, LESS e outros simplesmente funcionam. O LiveReload monitora as alterações no sistema de arquivos. Assim que você salva um arquivo, ele é pré-processado conforme necessário e o navegador é atualizado.

  11. Scout App é um aplicativo multiplataforma que entrega o poder do Sass & Compass nas mãos de web designers. O Scout ajuda a tornar seu fluxo de trabalho CSS mais rápido, oferecendo mais controle, otimização e organização.

  12. Crunch 2 Crunch permite que você escreva Less, Sass, CoffeeScript, Markdown* e, em seguida, salve automaticamente CSS, JavaScript e HTML depois de fazer as alterações. Quer escrever apenas CSS simples? XML? Haskell? Código MUSH? Crunch permite que você faça isso também. Crunch 2 é um editor que permite que você faça o que quiser. Porque Crunch te ama.

10 plugins CSS personalizados do WordPress

Se você deseja personalizar o CSS no WordPress, pode usar muitos plugins gratuitos ou recursos internos de edição CSS disponíveis no personalizador desde o WordPress 4.7. Selecionamos uma lista de 10 plugins CSS gratuitos, que ajudam você a modificar e salvar CSS personalizado facilmente.

Você também pode ler este tutorial para aprender como editar CSS no tema do WordPress usando as ferramentas do desenvolvedor do Chrome e como adicionar seta nos menus do WordPress com CSS sem usar jQuery ou PHP.

15 geradores de gradiente CSS

  1. editor de gradiente colorzilla
  2. editor de gradiente cssmatic
  3. gerador de gradiente do angrytools
  4. gradientgenerator. com/
  5. css3generator.com/
  6. gerador de gradiente cssportal
  7. uigradients.com: Pronto para usar belos gradientes de cores
  8. gradientes lineares css3factory
  9. gerador de gradiente gradcolor
  10. gradiente RGB perbang
  11. gerador de gradiente paintbycode
  12. gerador de gradiente virtuosoft
  13. gradientes radiais westciv
  14. gradientes lineares westciv
  15. Gerador de gradiente CSS3

10 editores CSS online gratuitos

  1. Editor de CSS on-line pelo Portal CSS
  2. Laboratórios CSSdeck
  3. Editor de HTML e CSS em tempo real do ScratchPad
  4. Gerador de código CSS3 online por EnjoyCSS
  5. cssdesk
  6. jsfiddle : Teste seu JavaScript, CSS, HTML ou CoffeeScript online
  7. Editor CSSmate
  8. CSS Embelezar e Minimizar
  9. playweave HTML5, CSS3 e JavaScript
  10. SelfCSS – Editor CSS WYSIWYG

10 Extensão do Chrome para modificar CSS

  1. Visualizador de CSS
  2. Stylebot
  3. CSS do usuário
  4. Editor CSS ao vivo
  5. Salvamento automático de ferramentas de desenvolvimento
  6. Salvar CSS
  7. Testador de Web Design Responsivo
  8. Inspetor Responsivo
  9. Redimensionador da janela de visualização
  10. Redimensionamento de guias - layouts de tela dividida

Palavras finais

Isso é tudo para esta lista de ferramentas CSS para web designers e desenvolvedores. Você pode usar essas ferramentas CSS gratuitas para personalizar estilos facilmente e salvar suas alterações. As extensões do Chrome são muito úteis para salvar suas edições de CSS, sem sair das ferramentas de desenvolvedor do Chrome.

Com pré-processadores CSS, você pode escrever CSS com eficiência. Espero que você vai adorar essas ferramentas. Este artigo faz parte da nossa Série de Ferramentas de Desenvolvimento de Temas. Não se esqueça de participar do nosso boletim informativo de desenvolvimento de temas do WordPress para baixar o livro gratuito e receber os artigos e tutoriais mais recentes sobre o desenvolvimento de temas do WordPress.

Nota : Este artigo foi publicado originalmente em createwptheme.com, republicado aqui com permissão.