Semantic UI

É um framework front-end desenvolvido sobre a ideia de PROGRESSIVE TRUTHFULNESS (focado em chegar ao resultado final de forma progressiva).

Material desenvolvido no curso básico de Semantic UI da SchoolofNet, ministrado pelo instrutor Erik Figueiredo. Neste curso foram abordados os seguintes tópicos:

• Containers;
• Grids;
• Cores;
• Formulários;
• Versão Pré-compilada (Download Zip);
• Versão Para alteração (Instalada com NPM ou YARN).

O conteúdo do curso foi dividido em duas fases, a primeira utilizando a forma mais simples de se usar o "Semantic UI", fazendo o seu download a partir do seu próprio site. A segunda instalando o Semantic UI a partir de linha de comando, através da ferramenta de instalação de pacotes do NodeJS denominada de NPM.

Como tenho preferência pela utilização do YARN ao invés do NPM para instalação de pacotes, e também, tenho preferência por trabalhar em ambientes dockerizados, fiz algumas adaptações na segunda fase do curso, implementando um container docker para rodar a aplicação e fazendo uso do Ambientum para instalar e gerar o build do Semantic UI.

O Ambientum é um conjunto de imagens Docker desenvolvidas, mantidas e distribuidas pela CODECASTS. E ele pode lhe ajudar com algumas coisas incríveis, os 3 cenários mais comuns estão listados a seguir:

• Rodar Laravel e/ou Vue.JS em Desenvolvimento.
• Rodar Laravel e/ou Vue.JS em Produção (Includindo Integração Contínua).
• Substituir dependências locais com comandos que rodam no Docker.

Sem sombra de dúvidas, o Ambientum irá facilitar a sua vida em muito, principalmente no que diz respeito a ambientes de desenvolvimento dockerizados, mas antes de você começar a brincar com o Ambientum, alguns conhecimentos são necessários:

• O básico sobre Docker e Containers.
• Estar confortável usando a linha de comando.
• Saber operar o docker-compose.
• Ler o README do Ambientum.

Não se preocupem, o readme está escrito em dois idiomas: Inglês e Português.

Bom após ter lido toda a documentação do Ambientum você já está apto a utiliza-lo, então vamos por a mão na massa.

n yarn

Com isto, o yarn se encarregará de instalar o Semantic UI e todas as dependências necessárias, incluíndo o Gulp, ferramenta que utilizaremos para trabalhar com o framework, inclusive gerar o seu build.

Terminado a instalação do Semantic UI, vamos gerar o primeiro build, para podermos então executar o container docker e efetivamente visualizarmos o conteúdo desenvolvido no navegador. E para isto executamos o seguinte comando:

n gulp build-ui

Framework instalado, build gerado, só nos resta então agora rodar o container e vermos o resultado. Então bora lá.

Em nosso terminal, estando dentro da pasta fase_2 do nosso projeto, vamos rodar o seguinte comando:

docker-compose up

Feito isto basta agora acessarmos no nosso navegador o endereço http:https://localhost:9090