O Semantic UI é um framework de desenvolvimento web que auxilia o desenvolvedor a criar sites e sistemas web bonitos e responsivos de maneira rápida e intuitiva.
Ele trata palavras e classes como conceitos permutáveis. As classes utilizam a sintaxe de idiomas naturais, com relações substantivo/modificador, ordem de palavras e pluralidade para vincular conceitos intuitivamente.
O Semantic utiliza o JavaScript de forma simples, utilizando chamadas simples que acionam as funcionalidades. Qualquer decisão arbitrária em um componente é incluída como configuração que pode ser modificada pelos desenvolvedores.
Semantic UI também possui uma depuração simplificada, pois o registro de desempenho permite rastrear os gargalos sem procurar nos rastreamentos da stack.
Ele vem equipado com um sistema de herança intuitivo e variáveis temáticas de ato nível que permitem ao desenvolvedor possuir uma total liberdade de projeto, desenvolvendo uma interface de usuário uma vez e implantando com o mesmo código em qualquer lugar.
É projetado para ser dimensionado responsivamente, pois as variações de design que são incorporadas aos elementos permitem que você escolha como o conteúdo será ajustado, tanto para tablet como para celular.
Também possui integrações com as bibliotecas mais utilizadas na atualidade: React, Angular, Meteor e Ember, entre muitas outra que ajudam a organizar a UI ao lado da lógica do app.
INSTALAÇÃO:
Você pode utilizar o Gulp para instalar o Semantic UI no seu projeto com Node.js:
npm install -g gulp
npm install semantic-ui --save cd semantic/ gulp build
Ou pode adicioná-lo diretamente no seu arquivo HTML:
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="semantic/dist/semantic.min.js"></script>
Alguns elementos importantes do Semantic UI são:
Buttons:
Podemos facilmente criar buttons estilizados com apenas uma linha de HTML:
<button class="ui button active">Button</button>
Ou botões animados:
<div class="ui animated button" tabindex="0">
<div class="visible content">Próximo</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
Ícones:
Podemos adicionar ícones facilmente ao projeto:
<i class="american sign language interpreting icon"></i> <i class="assistive listening systems icon"></i> <i class="audio description icon"></i> <i class="blind icon"></i> <i class="braille icon"></i>
Listas:
<div class="ui list"> <div class="item">Maçã</div> <div class="item">Peras</div> <div class="item">Laranjas</div> </div>
Você pode verificar mais elementos diretamente no site: https://semantic-ui.com/
Gostou deste artigo? Comente abaixo!
Referências: https://semantic-ui.com/introduction/getting-started.html