Website-With-Bootstrap

🖥️ Sobre o projeto

Este projeto foi criado enquanto eu aprendia o básico sobre Bootstrap e suas diversas funcionalidades. Esse website foi completamente realizado utilizando os arquivos fonte do Bootstrap com Sass.

Durante todo o processo, não copiei uma linha sequer dos códigos na documentação do Bootstrap, foram todos feitos aos poucos e estudando cada detalhe.

Apesar de ser um website bastante simplório (apenas com finalidade de aprendizado), ele foi pensado nos deficientes visuais, portanto, todo o website foi realizado baseado nas tecnologias assistivas, como os leitores de tela.

🚀 Tecnologias utilizadas

HTML 5
Sass (3.7.4)
Bootstrap (4.5.2)
jQuery (3.5.1)
Popper.js (1.16.1)

⚙️ Pré-requisitos e ferramentas

Pré-requisitos 🕵️

Possuir o Git instalado e configurado no computador;
Possuir um gerenciador de pacotes, seja o Yarn ou npm;
Por fim, possuir o Node.js instalado no computador.

Clonando o repositório 🌀

No terminal git:

    # Clonar o repositório
    $ git clone https://github.com/GabrielReira/Website-With-Bootstrap.git
    # Entrar no diretório
    $ cd website-with-bootstrap

Instalando pacotes 📦

Primeiramente, você precisa baixar e instalar as principais ferramentas no seu computador.

    # Para baixar o Bootstrap
    $ npm install bootstrap
    # Para instalar o jQuery
    $ npm install jquery
    # Para instalar Popper.js
    $ npm install popper.js

O Bootstrap exigirá um compilador de Sass, então também é necessário fazer sua instalação.

    # Instalando o Sass
    $ npm install -g sass

Para mais detalhes de instalação do Bootstrap na sua máquina você pode acessar o próprio site do Bootstrap, ou esse do npm que aborda maneiras rápidas de instalação do pacote Bootstrap através do próprio npm, yarn, Composer, NuGet etc.

🔥 Inicialização do projeto

Primeiro, acesse o diretório onde o repositório foi clonado, então instale os módulos listados como dependências no arquivo package.json.

    # Acesse o diretório
    $ cd C:\Users\gabriel\Desktop\Website-With-Bootstrap
    # Instale as dependências
    $ npm install

Tenha em mente que para fazer qualquer alteração trabalhando com Bootstrap é necessário compilar os arquivos modificados para que o seu navegador possa interpretá-los da maneira correta.

Compilando arquivos scss 🧠

Crie uma pasta de nome 'compiler' dentro de 'node_modules/bootstrap', que é onde ficará os arquivos compilados de scss para css. Então compile o arquivo scss num arquivo css para o navegador poder interpretá-lo.

    # Compilando o arquivo scss em css
    $ sass --watch node_modules/bootstrap/scss:node_modules/bootstrap/compiler

Compilando pasta styles 🎨

Para fazer qualquer alteração no arquivo style.css é necessário compilar a pasta styles no sass.

    # Compilando a pasta styles
    $ sass --watch web/styles:node_modules/bootstrap/compiler

Compilando Font Awesome 🔡

O pacote do Font Awesome já vem com um diretório onde fica os arquivos scss e outro com os arquivos já compilados em css, então não precisa compilá-los para o diretório 'node_modules/bootstrap/compiler'.

    # Compilando o Font Awesome
    $ sass --watch node_modules/@fortawesome/fontawesome-free/scss:node_modules/@fortawesome/fontawesome-free/css

Compilando tudo com apenas um comando 👨‍💻

Caso você realize muitas alterações no projeto, é possível compilar todos os arquivos de uma só vez.

    # Compilando todos os arquivos
    $ sass --watch node_modules/bootstrap/scss:node_modules/bootstrap/compiler web/styles:node_modules/bootstrap/compiler node_modules/@fortawesome/fontawesome-free/scss:node_modules/@fortawesome/fontawesome-free/css

Obs.: Fique atento caso você troque as pastas de diretório ou renomeie algum arquivo.

📜 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Por Gabriel Reira