Le Scone

Restaurante

Projeto final do curso de SASS da Origamid.

Descrição

A landing-page foi desenvolvida com o pré-processador SASS, para fazer a compilação em CSS. Foram utilizados vários métodos do SASS, para otimizar a escrita do código CSS.

• Variáveis
• Aninhamento de elementos
• Mixin: argumentos e conteúdo
• Extend
• Operadores
• Condicionais
• Métodos de cores
• Funções
• Loop: for
• Loop: while
• Loop: each

Instruções

A primeira seção é uma introdução mostrando o horário de funcionamento do restaurante, sua localização e contato. A seção seguinte é um cardápio com as principais porções de entrada e os pratos principais.

Na seção de contato, o cliente pode inserir seus dados para fazer uma reserva e também conferir a localização no mapa.

Caso você seja um desenvolvedor, use as instruções abaixo para instalar as dependências e sugerir alterações para a aplicação.

É possível verificar o conteúdo estudado durante o curso, selecionando o histórico de commits.

Não é necessária a instalação de dependências de desenvolvimento para esse projeto, mas é preciso usar alguma ferramenta para observar o arquivo style.scss e compilar o código para um arquivo style.css. Para fazer isso, basta instalar globalmente o SASS usando o NPM:

npm install -g sass

Após a instalação do SASS, você pode simplesmente abrir o seu editor de código (ex.: VSCode) e clonar o repositório.

git clone https://github.com/PedroPaivaDev/study-origamid-sass

Para fazer o SASS observar as alterações feitas no arquivo style.scss, abra o seu terminal e digite o comando especificando os caminhos dos arquivos desde a raiz do projeto:

sass --watch sass/style.scss:css/style.css

É recomendada a instalação da extensão live-server, para que a página seja recarregada a cada alteração feita no código.

Evolução do projeto

O curso foi dividio em três partes, que podem ser vistas nas branchs do projeto e nos deploys abaixo:

Parte	Conteúdo desenvolvido
Fundamentos do SASS	Essa branch foi criada para armazenar os testes de uso dos métodos e funções
SASS na prática	Foi importado o projeto Bikcraft do curso de Design da Origamid e refatorado o seu CSS usando o SASS
Projeto Final	A landing page foi escrita do zero, considerando as melhores práticas de uso do SASS