Página desenvolvida para exemplificar a utilização do CSS para animações e outras microinterações com auxílio do Javascript (VanillaJS) e ainda, a aplicação do Flexbox CSS para o layout.

Essa aplicação foi desenvolvida com o intuito de fornecer uma visualização prática às aplicações de interações com CSS e JS, sem a utilização de frameworks, apenas uma biblioteca que facilita a aplicação e entendimento do Flexbox, The Grid CSS.

Será utilizada para apresentações de workshops sobre padrões de CSS e exemplo para estudo de interações que podem engajar mais o usuário.

A interface foi desenvolvida com o propósito de mostrar microinterações e responsividade do sistema.

O projeto foi desenvolvido utilizando Javascript (Vanilla JS, sem frameworks) e CSS com SASS.

Também utilizado o Task Runner Gulp para processar os arquivos SCSS, minificar arquivos e gerar o server com browser sync e watch.

• CSS
  • Flexbox - The Grid CSS
  • Animations
  • @ Media Querys
  • Transition e transform
  • Material Design Shadows SCSS Mixins
  • Google Material Icons Self hosting
• JS (Vanilla JS)
  • Arrow functions
  • Funções ternárias
  • Event Listeners
• Task Runner Gulp
• Pré-processador CSS SASS

Clone o projeto para sua máquina

$ git clone https://github.com/louisberns/hosp-redesign-ex.git

Instale as dependências do projeto com NPM ou Yarn

$ npm i
// ou
$ yarn

Rode o projeto com o Gulp

$ gulp default