[Tutorial] Gerando estrutura de aplicação web com NodeJS + Yeoman

Aprendemos a instalar o NodeJS no ubuntu 14.04 LTS uns dias atrás, agora vamos entender porque o NodeJS é tão popular entre os desenvolvedores front-ends. Vamos trabalhar com alguns componentes que deixam nossa vida mais automatizada, trazendo redução de tempo na produção dos projetos realizados, e alguns eles são: Yeoman Gulp Bower Sass(Scss) jQuery Modernizr O Conceito Imagine só, todo projeto seja ele de estudo ou de produção tem que criar toda uma estrutura de pastas e arquivos para poder começar a trabalhar, levando em consideração que precisaremos configurar o Gulpfile.js, Bower.json, linkar jQuery,Modernizr, fazer os testes, estruturar o Sass(scss) e … Continuar lendo [Tutorial] Gerando estrutura de aplicação web com NodeJS + Yeoman

Tutorial: Criando um Grid de Colunas com Sass

Objetivo: Criar um grid de colunas verticais com duas cores no background, que calculam automaticamente a quantidade que precisa para encaixar na tela do usuário. HTML Nosso HTML será básico e terá somente uma class dentro da tag <header class=”header”><!– empty –></header> CSS Para o CSS iremos utilizar o pre-compilador Sass, então estou levando em consideração que você já tenha instalado em sua maquina e funcionando. Primeiro vamos resetar margin, padding, e fazer com o box leve em consideração suas bordas,paddings,margins e definir um background geral. *, *:after *:before{ margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: … Continuar lendo Tutorial: Criando um Grid de Colunas com Sass

Tutorial: Criando um Componente com Sass em 10 minutos

Os desenvolvedores de hoje reconhecem que, ao começar um projeto web precisamos ter o máximo possível de código reaproveitável, não importa se é HTML, CSS, Javascript, Ruby ou PHP, Java, .NET, enfim precisamos ter coleções ou componentes prontos para usar, adiantando o processo de criação e nos dando mais tempo para outras tarefas. Então vamos criar  um componente CSS para lidar com diferentes tipos de mensagens de alerta,onde é o caso perfeito para que possamos implementar alguns conceitos de Sass (Syntactically Awesome StyleSheets) Definindo o HTML Você pode utilizar qualquer elemento HTML que trabalhe como bloco(block), uma div,section,article.. trabalharemos com … Continuar lendo Tutorial: Criando um Componente com Sass em 10 minutos