bootstrap

Templates gratuitos para aplicações administrativas

Com a necessidade da criação de aplicações em um menor tempo possível, é cada vez mais viável a utilização de templates prontos para reduzir o tempo de desenvolvimento. Por isso, diversos templates, principalmente para áreas administrativas, foram sendo criados e compartilhados na internet, dos quais veremos alguns neste artigo.

AdminLTE

O AdminLTE é um template administrativo css gratuito todo construído sobre o Bootstrap 3. Em sua recente atualização, algumas novidades foram adicionadas, tais como: Reescrita completa do JavaScript, suporte NPM e Bower, além de sua documentação. Open source, o AdminLTE é uma excelente opção aos desenvolvedores que buscam componentes responsivos e reutilizáveis.

A partir do link (https://adminlte.io/themes/AdminLTE/index2.html) é possível ter um Live Preview do template e testar todas as suas funcionalidades antes de realizar seu download.

O download da ferramenta pode ser feito através do link: https://adminlte.io/

CoreUI

O CoreUI é um template gratuito baseado no Bootstrap 4 para criação de interfaces administrativas funcionais e sofisticadas. Trabalha com uma grande variedade de frameworks, tais como: Angular, Laravel e React, o que permite que este template seja utilizado nos mais diversos projetos.

A partir do link (https://coreui.io/demo/#main.html) é possível ter um Live Preview do template e analisar sua vasta biblioteca de componentes, que trás consigo as vantagens em adicionar diversos botões, formulários e muitos outros componentes para facilitar o desenvolvimento.

Seu download pode ser feito através do link: https://coreui.io/

Light Bootstrap

Seguindo a mesma linha dos dois templates citados anteriormente, o Light Bootstrap é um template administrativo gratuito baseado no Bootstrap 4, desenhado para ser bonito e simples, além de facilitar a criação de aplicações administrativas. Provê uma grande coleção de elementos que possibilita a criação de apps das mais variadas formas.

Sua barra lateral pode ser alterada entre 6 cores diferentes (preto, azul, verde, laranja, vermelho e roxo), tornando sua experiência muito mais confortável.

É possível acessar sua Live Preview através do link (https://demos.creative-tim.com/light-bootstrap-dashboard/).

Seu download pode ser realizado acessando o link: https://github.com/creativetimofficial/light-bootstrap-dashboard

Material Dashboard

O Material Dashboard, apesar de ser construído utilizando o Bootstrap 4, possui uma interface inspirada nos padrões de design do Google, o Material Design.

Seu visual é limpo e elegante, tornando-se uma ótima alternativa. Além disso, o Material Dashboard possui 60 componentes dos mais variados tipos e três páginas de exemplo para você iniciar seus projetos.

Sua Live Preview pode ser acessada no link (https://demos.creative-tim.com/material-dashboard/examples/dashboard.html?_ga=2.925873.104232430.1547748278-1145022817.1547748278) onde é possível ter uma breve visualização do template, antes de realizar seu download.

Após analisar suas funcionalidades, o download pode ser feito através do link: https://www.creative-tim.com/product/material-dashboard

Star Admin

Com uma aparência fantástica, o Star Admin é, com certeza, uma ótima opção a considerar quando queremos desenvolver um sistema administrativo. Também construído utilizando o Bootstrap 4, este template possui um visual único e arrojado, tornando sua aparência um ponto fortíssimo.

Além disso, o Star Admin possui uma grande coleção de widgets e componentes para os mais variados usos.

A partir do link (http://www.bootstrapdash.com/demo/star-admin-free/jquery/index.html) é possível acessar a Live Preview deste tamplete e seu download, feito através do link: https://www.bootstrapdash.com/product/star-admin-free/

Conclusão

Neste artigo vimos alguns templates para utilizarmos no desenvolvimento de aplicações administrativas e o quanto eles agilizam a criação de novos projetos.

Estilizando formulários automáticos do Django com Bootstrap

No artigo passado “Criando formulários automaticamente com Django“, vimos o quão simples é a criação de formulários automáticos com o Django. Porém, os formulários gerados utilizam HTML puro, ou seja, não há nenhuma estilização para melhorar o visual da aplicação. Sendo assim, neste artigo veremos como estilizar os formulários gerados automaticamente com o Django utilizando o Bootstrap.

Instalando e configurando o crispy-forms

O primeiro passo para estilizar os formulários de uma aplicação é instalar a biblioteca crispy-forms, é ela quem irá estilizar os formulários da nossa aplicação. Para isso, vamos até a aba Project Interpreter do PyCharm, buscamos por django-crispy-forms e instalamos a biblioteca:

Após isso, vamos até o arquivo settings.py do projeto e registramos a biblioteca. Para isso, no array INSTALLED_APPS, adicionamos a seguinte linha:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]

Com isso, indicamos ao nosso projeto que faremos uso da biblioteca crispy-forms. O próximo passo é determinar qual framework utilizaremos para estilizar nossos formulários. O crispy-forms possui suporte aos seguintes:

  • bootstrap
  • bootstrap3
  • bootstrap4
  • uni-form
  • foundation

Para definir qual será utilizado, precisamos adicionar a configuração CRISPY_TEMPLATE_PACK logo após o array INSTALLED_APPS do arquivo settings.py e determinar qual framework será utilizado. Neste artigo usaremos o bootstrap4, conforme podemos ver abaixo:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

Estilizando os formulários

Após instalar e configurar o crispy-forms, precisamos configurar o formulário para utilizar o bootstrap4. Para isso, no arquivo responsável por renderizar o formulário de cadastro de usuários, precisamos carregar a biblioteca crispy-forms, importar o bootstrap via CDN e, por fim, indicar que usaremos o a biblioteca para estilizar o formulário do Django. No final, o conteúdo do formulário possuirá a seguinte estrutura:

<!DOCTYPE html>
{% load crispy_forms_tags %} ## Carregando a biblioteca
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cadastro</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> ## Importando o bootstrap
</head>
<body>
<main class="container">
{{ form|crispy }} ## Determinando que usaremos o crispy forms
<button class="btn btn-primary">Cadastrar</button>
</main>
</body>
</html>

Ao final, o formulário que antes era assim:

Será renderizado assim:

Tudo isso, novamente, de forma automática e sem escrever uma única linha de código HTML. 😀

Os principais frameworks CSS

Utilizados cada vez mais, os frameworks ganharam espaço no desenvolvimento e no coração de desenvolvedores front-end.

O framework é um facilitador no desenvolvimento de diversas aplicações, e sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, são templates que provém diversas funções que podem ser utilizadas em qualquer projeto e com o resultado bem bacana.

Traz consigo diversas séries de classes e funções predefinidas que na hora do desenvolvimento torna-se agregadores de otimização de projetos, seja eles em aplicativos, sistemas ou interface.

No mercado diversas são as opções disponíveis de frameworks, e ver sobre cada um deles é uma excelente forma de encontrar aquele que poderá se adequar ao projeto desejado. Neste artigo falaremos sobre alguns desses frameworks e suas características.

Bootstrap

O Bootstrap é um framework desenvolvido pelo Twitter, que traz consigo características bem definidas de inicialização rápida, ou seja, possuem estilos predefinidos (prontos). Com a utilização do Bootstrap é possível a criação de sites responsivos, que são aqueles que se adaptam ao tamanho da tela que estará sendo utilizada pelo usuário.

As características dos componentes também podem ser levados em consideração, já que seus modelos utilizam de uma mesma característica onde, além da harmonia na criação de projetos, possui um design padrão de arredondamento de bordas, conforme as figuras abaixo.

Abaixo temos o exemplo dos botões, que incluem seus vários estilos predefinidos.

Seguindo esta mesma característica de arredondamento de bordas, temos o exemplo do componente de Cards, que combinam muito bem com outros componentes disponíveis no Bootstrap.

É uma ferramenta de código-fonte aberto que auxilia no desenvolvimento HTML, CSS e JavaScript, criando experiências mais amigáveis aos que utilizam e facilitando a vida dos desenvolvedores.

É possível através do link https://getbootstrap.com/ realizar seu download e encontrar toda sua documentação, além de visualizar templates prontos e diversos componentes como os vistos acima para começar ainda hoje sua utilização.

MaterializeCSS

A utilização do MaterializeCSS facilita a criação de interfaces dentro do padrão do material design feito pela Google, que tem como intuito de unificar a experiência do usuário na usabilidade dos seus softwares seja em smartphones, desktops ou tablets.

Outra característica do Material Design incorporado no MaterializeCSS são seus ícone e formatos, assim como a boa inspiração de cores. Uma ferramenta que possui bastante recursos visuais e muito mais leve, se comparado a outros frameworks.

Com design mais quadrados, se comparado ao Bootstrap, seus componentes não deixam a desejar quando o quesito é beleza. Algumas imagens abaixo podem comprovar que é possível a criação de aplicações cheias de estilo.


(A imagem acima, mostra três diferentes tipos de botões do MaterializeCSS.)


(A imagem acima, mostra o componente de paginação que auxilia na divisão de conteúdos longos.)

O download pode ser feito através do link https://materializecss.com/ assim como visualizar seus diversos temas e componentes.

Foundation

Completamente personalizável, o Foundation é um framework que possui como forte característica sua responsividade, sem a necessidade de adicionar classes, facilitando assim a criação de sites, aplicativos e muito mais.
Conta com uma equipe bastante empenhada no fornecimento de serviços e cursos como forma de suporte.

Possui design mais profissional, com cores bem definidas e formatos de componentes mais quadrados, como podemos observar na imagem abaixo, que difere bastante dos componentes já apresentados acima.

Diversas são as empresas que utilizam o framework Foundation, como: Adobe, ebay, HP, Amazon, Samsung, dentre outras.

O download pode ser feito a partir do link https://foundation.zurb.com/ onde é possível encontar diversos tutoriais e cursos acerca de sua utilização.

Semantic UI

O Semantic UI utiliza as tecnologias jQuery e LESS, tornando a criação de aplicações com o HTML conciso, o JavaScript intuitivo e um debug simplificado.

Utilizando o Semantic UI é possível a criação de layouts agradáveis para o usuário final, além de design responsivo. O uso do framework suporta animações 3D e fornece uma variedade de componentes de interface do usuário, repleto de recursos como a inclusão de um estado “desativado” a imagens e ícones que podem ser formatados com diferentes tamanhos e cores.

Utiliza princípios de linguagem natural, o que torna sem dúvida o código mais legível e de fácil entendimento. Conta com uma documentação bem organizada e guias sobre como começar sua utilização que pode ser acessada através do link https://semantic-ui.com/ onde é possível realizar também o download do framework, visualizar seus temas, elementos, integrações e muito mais.

Abaixo apresentamos um exemplo de um dos seus componentes, o botão, que possui animações ocultas, proporcionando uma excelente experiência ao usuário. Ao passar o mouse sobre os botões, é possível notar diversas interações entre eles.

Torna-se assim, uma excelente opção para desenvolvedores que buscam praticidade e simplicidade.

Conclusão

Neste artigo vimos os principais frameworks CSS disponíveis atualmente além de suas características e funcionalidades. Desta forma, a escolha cabe a partir da necessidade de cada projeto e do seu desenvolvedor.

JUNTE-SE A MAIS DE 150.000 PROGRAMADORES