Estamos muito bem amparados com o framework Bootstrap do Twitter, vemos sua utilização em massa, seja em tutoriais pela facilidade de implementação e de explicação, seja na aplicação em páginas web.

Não com objetivo de ferir sua utilização (até porque eu utilizo o Bootstrap na maioria dos meus projetos…ainda), mas você já se questionou quanto ao padrão que estamos seguindo e o que mais temos aprendido? Levanto essa questão, pois utilizar o mesmo padrão lhe faz seguir um estilo comum a todos, principalmente quando a ferramenta não é bem utilizada.

Nesse segmento web as atualizações são constantes e sempre ir em encontro a inovação é,  indiretamente, uma obrigação para todo desenvolvedor web que pretende subestimar seus próprios limites e não menos importante seus clientes.

Com base na atualização, busquei algo novo relacionado ao front-end, e vou dizer, achei o Semantic Ui.

Porque Semantic UI

Utilizei o Bootstrap tempo o bastante para me familiarizar e enxerguei que para criação de site é muita apreciada e rápida, sim e como é. Porém, como tudo na vida tem seu lado ruim, com o Bootstrap eu sempre precisava utilizar algum plugin externo para uma nova utilidade, funcionalidade e/ou animação.

Navegando entre as opções de framework na web, dentre elas: UiKit, Foundation, Pure (da Yahoo), me identifiquei com o Semantic Ui. Tentarei resumir seus pros e contras no que se refere ao ambiente de desenvolvimento de páginas web.

Por que eu utilizaria “isso”?

Você pode se perguntar porque utilizar algo diferente estando muito bem com o Bootstrap. Calma, te respondo…digamos que você queira “animar”, estilizar e adicionar um buscador de opções para melhorar o “<select>” em sua página. O que você faz?  Sim, entra o google e… “select custom animation jquery”, ou algo do tipo. Sim, não minta…você faz isso…eu faço isso também…(fazia)…com o Semantic Ui, não mais.

O estrutura de formulários do Semantic Ui já vem encapsulado com, se você desejar, essas opções. E vai mais além, “<option>” com imagens com por exemplo flag de países.

Tem mais, muito mais

O Semantic Ui possui uma gama de elementos e coleções que podem ajudar nos seus projetos web. Vamos lá:

• Validador de formulário;
• Busca auto sugestiva a partir de json;
• Preloadings que sobrepõe conteúdos;
• Div’s sticky, onde a div a companha o scroll automaticamente (isso é muito bom);
• Menus (horizontal, vertical, responsivo, mobile, oculto, iconificados, etc);
• Modal (com sub-modal, com opção de confirmação, com background black);
• Tooltips fantásticos;
• Inúmeras transições;
• Customização em less.

Além dessas opções exclusivas, claro e óbvio que possui as padrões que todo framework bom deve possuir por obrigação (accordion, tabs, dropdown, etc).

O que mais me chama atenção aqui é a maneira com que tudo isso foi desenvolvido, em um padrão bem simples em seu visual e útil para o profissional web com animações sucintas.

Não tem contras? Mas é claro…que tem!

Se você já está bem habituado com o Boostrap ou outro framework, vai se sentir ou pouco fora de casa, pois o Semantic Ui utiliza uma estrutura de classes nomenclaturada. Por exemplo, não utiliza número na sua tipagem de grids como no bootstrap (col-md-{numero}). Onde no Bootstrap 3 você possui doze colunas, aqui você utiliza dezesseis colunas, no entanto com a nomenclatura seguindo a sequência: “one, two, …, sixteen”.

A princípio tenho que admitir que senti uma esquisitice em utilizar essa estrutura e fiquei meio “slow” nos primeiros passos, mas em pouco tempo isso acaba fluindo, até porque isso é comum para que inicia em algo novo.

Veredito

Antes de mais nada, o objetivo desse post não é lhe convencer a abandonar sua ferramenta favorita ou aquela mais produtiva a seu ambiente, o objetivo é que você compreenda que sempre há novas tecnologias sendo criadas/atualizadas.

O Semantic Ui é uma das ferramentas que me identifiquei e vi seu potencial, pode ser que o Bootstrap venha “fantástico” na sua versão 4. Mas nada impede que você pesquise, leia e teste algo que possa melhorar seus projetos, o tempo de execução e surpreender seu cliente, afinal ele é o checkmate nessa jogada.

Então o grande diferencial em todo projeto é, você profissional,  que utiliza a ferramenta.

Aqui, abordei algumas das principais características iniciais, mas você pode iniciar e tirar suas dúvidas quanto a esse framework.

Acesse o site do Semantic Ui e explore o máximo que puder. Como sugestão aconselho que você crie uma página simples com alguns exemplos dos principais elementos que você utiliza.

Depois de um bom estudo você pode voltar aqui e dar seu feedback.