CSS

Utilizando arquivos estáticos no Flask

No último artigo dessa trilha, vimos como retornar páginas HTML em requisições Flask e, assim, melhorar a interação da nossa aplicação com seu usuário. Porém, normalmente, há o uso de arquivos estáticos (JS, CSS e IMG) para melhorar a aparência das nossas páginas e, consequentemente, a experiência do usuário. Sendo assim, veremos neste artigo como incorporar estes arquivos ao nosso projeto Flask.

Criando diretório dos arquivos estáticos

É uma boa prática adotada pela comunidade que todos os arquivos estáticos de uma aplicação Flask sejam armazenados em um diretório “static” na raiz do projeto e, dentro deste diretório, uma nova pasta contendo os tipos de arquivos estáticos (CSS, JS e IMG), como podemos ver abaixo:


Para este projeto, iremos usar o Bootstrap como CSS. Para isso, realizamos o download do arquivo .min.css do framework (https://getbootstrap.com/docs/4.3/getting-started/download/) e armazenamos no diretório “static/css”, como vimos na imagem acima.

Ao realizar este procedimento, o Flask já estará apto a utilizar este arquivo CSS no projeto, bastando apenas importá-lo em nosso template.

Flask - Fundamentos
Curso de Flask - Fundamentos
CONHEÇA O CURSO

Utilizando arquivos estáticos no template

Agora que já configuramos nosso projeto para armazenar arquivos estáticos, precisamos importá-lo em nosso template. Para isso, é muito simples. O primeiro passo é criar uma tag link no head do arquivo HTML e referenciar nosso arquivo bootstrap.min.css:

Agora, no href do link, indicamos onde se encontra o arquivo estático que queremos utilizar. No nosso caso, ele se encontra em static/css/bootstrap.min.css. Sendo assim, temos que passar, como primeiro parâmetro do método url_for, o diretório raiz dos arquivos estáticos. Após isso, informamos o restante do caminho até o arquivo no atributo filename, como vemos acima.

Agora, já estamos aptos a usar o arquivo do bootstrap em nossos templates e, com isso, personalizar nossas páginas HTML. Utilizando como base o tema Jumbotron do bootstrap, conseguimos criar uma página com todo o poder do framework:

Concluindo

A utilização de arquivos estáticos em projetos Flask é, realmente, muito simples. Apenas precisamos criar um diretório para comportar estes arquivos e importá-los em nossos templates utilizando o método url_for do Jinja2.

Porém, sabemos que o conteúdo de uma página HTML nem sempre é estático. Muitas vezes este conteúdo é enviado pela requisição e exibido no HTML… Bom, como fazer isso? É exatamente o que veremos no próximo artigo desta série 🙂

CSS: Aprenda a Criar o Efeito de Flip Cards

Olá Web Developer! Hoje vamos aprender a criar o efeito de Flip Cards com CSS puro.

Esse efeito é muito interessante, e nos permite fazer com que um elemento gire. É um ótimo exercício para estudar animações e transformação 3D com CSS. Veja como ficará o resultado:

Iniciando o Espaço 3D

Como a animação CSS que vamos criar será 3D, precisamos criar um container para essa animação, indicando a sua profundidade. Vamos chamar esse container de flip-container. Ele servirá como o “espaço 3D” onde nossos elementos vão ficar.

<div class="flip-container" >

</div>

No CSS nós indicamos a profundidade do nosso container. Isso é feito com a propriedade perspective, que indica o quanto um objeto está longe do usuário. A profundidade é aplicada aos elementos filhos, e não ao próprio elemento com a propriedade de perspectiva.

Também aproveitamos para definir a altura e largura desse elemento.

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

Imagine esse container como o cubo da imagem abaixo:

Container 3D de imagem

Definindo o container das imagens

Como queremos um efeito de um cartão que gira, vamos criar um elemento que será container das duas imagens. Imagine ele como o elemento laranja da imagem abaixo:

Container de imagens 3D

Portanto, é esse elemento que vamos girar depois. Vamos chamá-lo de flipper

<div class="flip-container" >
    <div class="flipper" >

    </div>
</div>

Vamos definir sua largura e altura como 100%. Assim ele ficará com o mesmo tamanho do seu container. Para que ele mantenha a profundidade que definimos em seu elemento pai (flip-container) quando formos girá-lo, passamos o valor preserve-3d à propriedade transform-style.

.flipper{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

Definindo a Parte da Frente e de Trás

Para podermos separar melhor o que será frente e atrás, vamos criar um container para cada um: front e back.

<div class="flip-container">
  <div class="flipper">
    <div class="front">

    </div>
    <div class="back">

    </div>
  </div>
</div>

Assim será fácil reutilizar este efeito, pois basta colocarmos o que quisermos em cada uma das divs. Para este exemplo utilizarei uma imagem em cada div, mas você pode colocar o que quiser.

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</div>

Girando os elementos

Já vou mostrar como girar os elementos para facilitar o entendimento do que faremos depois.

Como dito anteriormente, o que vamos girar é o elemento flipper. Como queremos que ele mostre a outra face, girando na horizontal, vamos usar a propriedade transform e girá-lo 180 graus no eixo Y.

Imagem 3D - eixo de rotação

Então basta adicionarmos transform: rotateY(180deg) ao elemento flipper. Podemos fazer isso de várias maneiras, como colocar essa propriedade em uma classe CSS e adicionar a classe no flipper em um clique.

Neste exemplo faremos com que essa propriedade seja aplicada ao flipper assim que o usuário passar a seta do mouse em cima do elemento flip-container.

.flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Para que a rotação não ocorra de forma instantânea, e sim como uma transição, vamos adicionar o tempo de transição ao flipper com a propriedade transition. Vamos definir a velocidade da transição para a propriedade transform como 0,8 segundos.

.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

Arrumando a Posição dos Elementos

Ficamos com uma div em cima e outra embaixo. Para que as duas fiquem na mesma posição, vamos definir front e back com position: absolute. Para respeitarem a posição de seu elemento pai (flipper), vamos definir sua posição como relative.

Também vamos definir front e back com altura e largura como 100%, para que eles fiquem com o tamanho total de seu container.

.flipper{
    position: relative;
    ...
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}

Arrumando a Parte Visível

Já temos os elementos da frente e de trás posicionados. Porém, o elemento que é declarado por último sempre fica por cima. Isso faz com que agora nós apenas possamos enxergar a imagem que foi colocada em back.

Primeiro vamos girar back a 180 graus. Como ele inicialmente estará de costas para nós, vamos rotacioná-lo.

.back{
    transform: rotateY(180deg);
}

Agora teremos o front de frente para nós e o back de costas. Quando passarmos o mouse por cima, o front ficará de costas e o back de frente.

Para finalizar este efeito, podemos simplesmente indicar ao CSS que não queremos que seja exibida a parte de trás dos elementos. Assim veremos apenas o elemento que estiver de frente para nós. Fazemos isso passando o valor hidden para a propriedade backface-visibility.

.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

Efeito no Clique sem JavaScript

Podemos fazer esse efeito de Flip Card ocorrer após um clique usando apenas CSS. Basta usarmos um Checkbox escondido para definir quando o elemento deverá girar.

Primeiro adicione um checkbox antes de flip-container.

<input type="text" type="checkbox" id="switch" />

E vamos mudar a regra que indica quando o elemento deverá girar. Usando :checked podemos indicar uma regra que ocorre quando um checkbox está marcado.

Troque a regra em que colocamos o .flip-container:hover pela regra a seguir:

#switch:checked ~ .flip-container .flipper {
  transform: rotateY(180deg);
}

Veja que com isso o nosso elemento irá girar quando clicarmos no checkbox.

Podemos fazer o checkbox ser marcado ao clicar no nosso elemento. Basta usar o elemento <label> e indicar o id do nosso checkbox. Assim os cliques feitos no <label> são redirecionados ao checkbox.

Então vamos trocar a div flip-container por um label:

<input type="checkbox" id="switch" />

<label class="flip-container" for="switch" >
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</label>

Veja que agora você pode marcar o checkbox simplesmente clicando na imagem.

Para finalizar, basta esconder o checkbox com display: none.

#switch{
    display: none;
}

Você ainda pode mudar a direção da rotação, tendo os seguintes resultados:

O que é Ionic?

O Ionic é um Framework Open Source gratuito sobre a licença MIT para desenvolvimento de aplicações mobile híbridas.

Aplicações híbridas são aplicativos móveis construídos de maneira alternativa a aplicações nativa. São construídos, geralmente, utilizando HTML+CSS+JavaScript, desta maneira se tornaram extremamente populares, pois permite o desenvolvimento multiplataforma, utilizando o mesmo HTML para diferentes sistemas operacionais.

Aqui no Blog possuímos um artigo “App Nativo x App Híbrido: existe o melhor?” onde você pode conferir mais detalhes.

Ionic - Criação de aplicações mobile
Curso de Ionic - Criação de aplicações mobile
CONHEÇA O CURSO

Caso você não saiba o que é um Framework

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, é um conjunto de bibliotecas utilizadas para criar uma base onde as aplicações são construídas, um otimizador de recursos. Tem como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

Aqui no blog também possuímos um artigo sobre “Para que serve um Framework”.

Sendo assim, o que é o Ionic?

Desenvolvido por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co., sua primeira versão teve seu lançamento em 2013 e atualmente encontra-se na versão 4.

Como dito acima, é um Framework para criação de aplicações móveis e desktop de alto desempenho e qualidade, que utiliza as tecnologias web HTML, CSS e JavaScript.

Como diz em seu site, o Ionic ajuda as equipes a criarem e distribuírem belos aplicativos híbridos em várias plataformas, possuindo foco na experiência do usuário ou interação do usuário com o aplicativo (controles, interação, gestos, animações).

Projetado para funcionar e ser exibido em diferentes plataformas, possui um design limpo, simples e funcional, com componentes padrões, tipografia, paradigmas interativos e diversos templates.

Além disso, possui um cliente de linha de comando (CLI) para gerenciar todo projeto criado com o Ionic. O CLI é uma ferramenta que cria aplicativos Ionic de forma rápida e fornece vários comandos úteis para facilitar o desenvolvimento utilizando o Framework. Possui um servidor de desenvolvimento integrado, ferramentas de compilação e depuração, entre outros benefícios.

Para instalar o Ionic CLI basta clicar aqui.

Por que aprender Ionic?

Além da principal vantagem no desenvolvimento de aplicações híbridas, muitas outras vantagens podem ser listadas quando pensamos no Ionic, dentre elas:

  • Estabilidade na criação de aplicações híbridas: Apesar de utilizar HTML, CSS e JS para o desenvolvimento das aplicações, o Ionic entrega um produto altamente estável e com desempenho similar ao de aplicativos nativos;

  • Multiplataforma: Com o Ionic, podemos desenvolver um único código que seja executado em diferentes sistemas operacionais, diminuindo o tempo de desenvolvimento de novas aplicações.

  • Menor tempo de desenvolvimento: Por criar aplicações multiplataforma, o tempo no desenvolvimento dessa aplicação se torna algo vantajoso em relação às aplicações nativas, uma vez que todo código criado será reutilizado para qualquer sistema operacional móvel, diminuindo assim o tempo de desenvolvimento;

  • Menor custo: Uma vez que poupamos o tempo em seu desenvolvimento, estamos poupando os custos desta aplicação, fazendo com que, criar aplicações multiplataforma torne-se algo mais rentável e menos custoso;

  • Prototipação: Criar telas no Ionic é extremamente fácil, pois possui uma ferramenta para esta finalidade, o Ionic Creator, que é uma ferramenta de “arrasta e solta” para facilitar as ideias de criação de suas aplicações que pode ser acessada neste link;

  • Documentação: Além de possuir uma grande comunidade, a documentação do Ionic é bastante completa, entre outras.

O futuro do Ionic

Como dito acima, o Ionic Framework encontra-se na versão 4, lançado no ano de 2019. Esta versão mais recente foi reprojetada para funcionar como uma biblioteca independente de componentes da web, com integrações para os mais recentes frameworks JavaScript, como o Angular, Vue e React. Ou seja, com a nova versão do Ionic, podemos criar aplicativos híbridos utilizando qualquer framework javascript, como Vue, Angular e React.

O Ionic é um excelente framework que, com certeza, poderá ser utilizado para criar aplicativos dos mais diversos segmentos. Sendo assim, este framework é um forte candidato a ser o seu próximo queridinho no desenvolvimento de aplicativos móveis.

Principais editores de código para desenvolvimento

Infinitas são as possibilidades na hora de escolher um editor de texto para utilizar no desenvolvimento dos seus projetos. Sendo assim, neste artigo veremos alguns editores de texto e suas principais características.

Brackets

Desenvolvido pela Adobe Systems, o Brackets é um editor de texto que facilita a criação de páginas web, mantendo seu foco principal no desenvolvimento web. Software livre e de código aberto, atualmente é mantido no GitHub sobre a licença MIT pela adobe e qualquer outro desenvolvedor que queira contribuir com suas melhorias. É um editor de texto escrito em JavaScript, CSS e HTML.

Atualmente encontra-se na versão 1.14 e possui disponibilidade de download nos sistemas operacionais Linux, Windows e Mac.

Dentre suas vantagens e características podemos citar:

  • Personalizável por meio de extensões;
  • Editores expandidos: permite visualizar trechos de código utilizados em outros arquivos;
  • Live Preview: Garante a visualização instantânea de alterações ao mesmo tempo que são executadas;
  • Suporte nativo a pré-processadores.

O download da ferramenta pode ser feito acessando no próprio site da Brackets.

Em sua página é possível contribuir, acessar seu suporte, blog, entre outras opções para te ajudar ainda mais na escolha deste editor.

Desenvolvedor Java Pleno
Formação: Desenvolvedor Java Pleno
A formação Desenvolvedor Java nível Pleno da TreinaWeb tem como objetivo a abordagem da API de acesso a bancos de dados relacionais e a API de manipulação de arquivos, respetivamente o JDBC e a I/O API. A definição e manipulação de arquivos XML e o JavaFX - a biblioteca para criação de aplicações desktop oficial do Java, também são abordados nesta formação. Por fim, ainda são abordadas as boas práticas de modelagem de bancos de dados relacionais e os recursos avançados para desenvolvedores dos bancos de dados MySQL e Oracle.
CONHEÇA A FORMAÇÃO

Sublime Text

Desenvolvido em Python, o Sublime Text é um ferramenta que visa a simplicidade e facilidade de uso. Lançado em 2008, é um editor de texto multiplataforma e proprietário que, dentre diversas características, podemos citar:

  • Comunidade ativa;
  • Extensões baseadas em Python;
  • Coloração de sintaxe personalizável;
  • Pré Visualização do código-fonte;
  • Autocomplete.

O download da ferramenta pode ser feita neste link, assim como acompanhar suas novidades, fórum e encontrar seu suporte.

VSCode (Visual Studio Code)

Criado pela Microsoft, o Visual Studio Code é um editor de texto open source, multiplataforma e gratuito com foco na construção de aplicações web.

Além de contar com uma comunidade extremamente ativa e suporte principalmente para a ASP.Net e Node.js., podemos listar como vantagens:

  • Autocomplete de código;
  • Navegação facilitada entre arquivos;
  • IntelliSense: Conclusões inteligentes com base em tipos de variáveis, definições de função e módulos importados;
  • Depuração de código diretamente do editor;
  • Suporte nativo ao Git;
  • Tarefa em execução;
  • Extensível e personalizável.

Para baixar a ferramenta, basta acessar este link, onde você encontrará sua documentação, blog, extensões e muito mais.

NotePad++

Ideal para iniciantes, o NotePad++ é um editor de código atrativo pela sua simplicidade.

Disponível somente para usuários Windows, é um editor open source sobre a licença GPL (General Public License) que além de suportar diversas linguagens de programação, traz como vantagens:

  • Autocomplete;
  • Sistema de definição de linguagem;
  • Divisão de tela;
  • Suporte para macros, plugins e muitos outros.

O download da ferramenta assim como visualizar suas características, comunidade, recursos e muito mais, pode ser feito a partir deste link.

Atom

Desenvolvido pelo GitHub sobre a licença MIT, o Atom é um editor de código open source, disponível para os sistemas operacionais Windows, Linux e Mac.

Semelhante ao Sublime, porém com alguns diferenciais, o Atom possui integração nativa com o GitHub e consegue trabalhar com comandos Git sem necessidade de nenhuma instalação adicional. Dentre várias características, podemos citar:

  • Editor de código multiplataforma;
  • Comunidade ativa;
  • Gerenciador de pacotes integrado;
  • Autocomplete;
  • Interface simples e amigável;
  • Personalizável.

Para baixá-lo, basta acessar neste link onde você também encontará seus temas, documentação, blog e muito mais.

Criando um Portfólio com o Pingendo

Diferente de um currículo, o portfólio é o meio mais completo de expor sua experiência profissional.

Desta forma, você poderá utilizá-lo para compartilhar suas experiências de maneira mais organizada na web.

Neste artigo criaremos uma página web para que você possa utilizar como portfólio pessoal utilizando o Pingendo.

Ferramenta utilizada

Para criação desta página, utilizaremos o Pingendo pelo fato de ser uma ferramenta de fácil uso e extremamente simples.

Com o Pingendo é possível criar páginas web responsivas no estilo “arrasta e solta”. Por este motivo, esta ferramenta é ideal para criação de páginas mesmo que você não possua tanto conhecimento sobre programação.

O primeiro passo é entrar em seu site no link: https://pingendo.com/ e realizar o download da ferramenta.

Ao clicar no “Download”, selecione o seu sistema operacional e a ferramenta começará a ser baixada.

Após baixar a ferramenta, basta instalá-la em seu computador “NEXT-NEXT-FINISH”, e pronto! Inicializaremos a criação do nosso portfólio.

Neste artigo faremos algo bem básico. Uma pequena página para que você tenha apenas uma noção do que a ferramenta proporciona.

Realizando a criação do nosso Portfólio

Após instalar o Pingendo, abriremos a ferramenta para iniciar.

Logo na página inicial já nos deparamos com alguns templates prontos, e podemos utilizar aquele que mais nos agrada, realizando apenas as alterações necessárias.

Lembrando que não estaremos manipulando códigos (HTML/CSS) na criação deste portfólio, já que a ferramenta permite a criação de páginas no estilo “arrasta e solta”. 🙂

Selecionaremos o template desejado, a pasta de destino e clicaremos em CREATE.

Logo após, selecionamos o arquivo “index.html” para editá-lo.

Pronto! A partir daí, podemos começar a editar todo layout conforme nossa necessidade.

A ferramenta é totalmente simples (como dito acima), e ao clicar nos botões ou sobre as caixas de texto, podemos editá-las, alterá-las, excluí-las ou inserir imagens. Fica a cargo da sua criatividade.

Abaixo, mostraremos algumas formas de editar o template utilizado.

Lembrando que não estamos modificando a estrutura do template utilizado, apenas realizando algumas alterações para se encaixar na página que desejamos criar.

Para alterar o texto, basta clicar sobre componente desejado e inserir o novo texto. Na barra lateral direita, é possível aumentar a fonte, centralizar o texto, alterar a cor, entre outras opções.

É possível também excluir todo o componente ou toda seção a qual este componente pertence, como mostra na imagem abaixo:

Outra opção é poder alterar as imagens, como mostra na imagem abaixo. Clicando na imagem padrão do template, basta procurar na lateral direita a URL da nova imagem e inseri-la.

Abaixo, veremos o Portfólio criado com a ferramenta.

Concluindo:

Neste artigo vimos o quão fácil é criar uma página web com o Pingendo, mesmo que você não tenha tanto conhecimento em programação.

Vale ressaltar que, apesar de ser uma ferramenta de fácil utilização, é importante aprender as tecnologias que envolvem a criação de páginas web (HTML/CSS/JavaScript) pois, desta forma, você poderá criar páginas personalizadas ou até mesmo manipular o código dos templates utilizados pelo Pingendo.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

CSS Grid – Um Guia Interativo (Parte 2 – Itens)

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com CSS Grid. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos da grid.
Teremos basicamente um container com alguns itens dentro.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

grid-area

Esta propriedade nós já vimos no post anterior. Ao declarar nomes para as áreas da nossa grid, utilizamos o grid-area para indicar a área onde um item irá se posicionar.

grid-column-start, grid-column-end, grid-row-start e grid-row-end

Indicar nomes para cada área da nossa grid e depois posicionar os itens usando o nome é bem simples. Porém, pode ser que você precise de algo mais flexível do que isso.
Com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end nós podemos indicar em que linha e coluna um item deve iniciar e acabar. Podemos usar tanto número quanto nomes.

grid-column e grid-row

Essas duas propriedades são atalhos para as 4 propriedades anteriores.
Em grid-column nós indicamos o início / fim da coluna, e em grid-row nós indicamos o início e fim da linha. Os valores são separados por /.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Tudo em uma propriedade: grid-area

Podemos também indicar essas 4 posições dentro de apenas uma única propriedade. Para isso também usamos o grid-area. A ordem é inicio-linha / inicio-coluna / fim-linha / fim-coluna

justify-self

Alinha o item da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item horizontalmente para ele preencher sua célula
  • start: alinha o item no início de sua célula
  • end: alinha o item no fim de suas células
  • center: alinha o item no centro de suas células

align-self

Alinha o item da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item verticalmente para ele preencher sua célula
  • start: alinha o item na parte de cima de sua célula
  • end: alinha o item na parte de baixo de sua célula
  • center: alinha o item no centro de sua célula

place-self

Atalho para align-self e justify-self em uma única declaração.

CSS Grid – Um Guia Interativo (Parte 1 – Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o CSS Grid. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como ele funciona.

Já fizemos aqui um guia completo sobre FlexBox. Para conferir:

Guia Interativo FlexBox – Parte 1 (Containers)
Guia Interativo FlexBox – Parte 2 (Itens)

Caso você esteja em dúvida sobre usar Flexbox ou CSS Grid, também já fizemos um post sobre isso: Flexbox ou CSS Grid?

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

O Que É CSS Grid?

O CSS Grid é um sistema de estruturação de layout que o CSS nos fornece. Diferente do Flexbox, que apenas nos permite trabalhar em uma única dimensão, o CSS Grid nos permite configurar layouts em duas dimensões (linhas e colunas). A junção de linhas e colunas formam uma grade, o que dá o nome a esse sistema (Grid).

O CSS Grid é bem poderoso e completo, permitindo que certas coisas sejam feitas de mais de uma maneira, o que pode confundir muitos iniciantes. Portanto, aqui irei mostrar as principais partes da forma mais simples para que você já termine de ler este post sabendo trabalhar com o CSS Grid.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (grid container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Grid Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o grid container.
Teremos basicamente um container com alguns itens dentro. Dependendo do exemplo a quantidade de itens poderá ser alterada.

<div class="container" >
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

Display

Primeiro precisamos definir que o nosso container é do tipo “grid”; Fazemos isso com a propriedade “display”.

.container{
    display: grid;
}

Isso irá criar uma grid do tipo block, significando que o .container irá ocupar a linha inteira.
Caso você queira containers inline, utilize display: inline-grid;

grid-template-columns e grid-template-rows

Como estamos trabalhando com uma grade, precisamos indicar quantas linhas e quantas colunas nossa grade terá.
Para colunas usamos o grid-template-columns e para linhas usamos o grid-template-rows.

Se queremos 3 colunas, não indicamos com o número três. O que fazemos na verdade é indicar qual o tamanho de cada coluna que queremos. A medida pode ser em qualquer unidade (px, em, %, cm, etc). Cada valor deve ser separado por um espaço.

Exatamente da mesma maneira nós declaramos as linhas utilizando a propriedade grid-template-rows.

grid-template-areas

Até agora só declaramos o tamanho das nossas colunas e linhas. Você deve ter notado que nossos itens vão se organizando na grid de acordo com a ordem em que estão no HTML.

Porém, o CSS Grid nos permite ir além disso: podemos dar nomes para cada área da nossa grade e depois indicar onde cada elemento deve ir. Dessa maneira fica bem simples de entender a estrutura da nossa grid. Fazemos isso com a propriedade grid-template-areas.

Vamos alterar um pouquinho o nosso HTML. Iremos colocar as classes header, sidenav, content e footer nos itens da grid para podermos indicar a posição de cada um deles depois.

<div class="container" >
    <div class="item header" ></div>
    <div class="item sidenav" ></div>
    <div class="item content" ></div>
    <div class="item footer" ></div>
</div> 

Para cada item, vamos declarar a propriedade grid-area, que serve para indicar o nome da área em que cada elemento deverá ocupar na grid. Para facilitar eu dei o mesmo nome das classes, mas você pode dar o nome que quiser.

.header{
  grid-area: header;
}
.sidenav{
  grid-area: sidenav;
}
.content{
  grid-area: content;
}
.footer{
  grid-area: footer;
}

Agora vamos ao que interessa: indicar o nome das áreas da nossa grid.
Para dar nomes às áreas de uma mesma linha, escrevemos dentro de aspas "". Ao abrir novas aspas estaremos indicando que estamos indo para a linha seguinte.

No exemplo abaixo nós escrevemos o nome das áreas em uma única linha. Mas para ficar mais simples de entender nós poderíamos ter escrito em linhas separadas. Fica visualmente mais legível:

.container{
    grid-template-areas: "header header" 
                         "sidenav content" 
                         "footer footer";
}

Repetimos header e footer duas vezes porque declaramos duas colunas e queremos que eles ocupem as duas.

Experimente mudar os nomes das áreas de lugar e veja que nossos elementos irão mudar de posição também. Algumas sugestões:

  • “sidenav header” “sidenav content” “sidenav footer”
  • “header header” “content sidenav” “footer footer”
  • “header header” “content sidenav” “footer sidenav”

Se quiser criar uma área sem nome, coloque .. Experimente: “header header” “content sidenav” “. footer”

grid-column-gap, grid-row-gap e grid-gap

Nossos itens estão todos colados. Podemos indicar qual o espaço entre linhas e colunas.
Para isso usamos as propriedades grid-column-gap e grid-column-row.

O grid-gap é um atalho para declarar as duas propriedades em um só lugar.
Se você passar um único valor, os dois serão aplicados para o espaço para linhas e colunas. Se passar dois valores, o primeiro será para linhas e o segundo para colunas.

.container{
    grid-gap: 20px;
    grid-gap: 20px 50px;
}

* O prefixo grid- destas propriedades está sendo removido e já é suportado nos navegadores modernos. Portanto, também pode-se utilizar as propriedades column-gap, row-gap e gap.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

justify-items

Alinha todos os itens da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens horizontalmente para eles preencherem sua célula
  • start: alinha os itens no início de suas células
  • end: alinha os itens no final de suas células
  • center: alinha os itens no centro de suas células

align-items

Alinha todos os itens da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens verticalmente para eles preencherem sua célula
  • start: alinha os itens na parte de cima de suas células
  • end: alinha os itens na parte de baixo de suas células
  • center: alinha os itens no centro de suas células

place-items

Atalho para align-items e justify-items em uma única declaração.

justify-content

O justify-item alinha cada item dentro de sua própria área. Já o justify-content alinha horizontalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a largura do container. Apenas funciona se você não tiver declarado uma largura para as colunas.
  • start: alinha as áreas no início da grid
  • end: alinha as áreas no final da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

align-content

O align-item alinha cada cada item dentro de sua própria área. Já o align-content alinha verticalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a altura do container. Apenas funciona se você não tiver declarado uma altura para as linhas.
  • start: alinha as áreas no topo da grid
  • end: alinha as áreas na base da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

place-content

Atalho para align-content e justify-content em uma única declaração.

grid-auto-columns e grid-auto-rows

Pode ser que você precise criar novas linhas ou colunas, as quais ainda não estão declaradas. Ao serem criadas, qual o tamanho delas?
Estas propriedades nos permitem indicar qual será o tamanho de novas linhas e colunas criadas.

Um exemplo bem simples é caso você não tenha declarado o tamanho das linhas ou colunas. Ao adicionar novos elementos, eles ficarão com o tamanho indicado nestas propriedades.

Nós aprendemos a posicionar os itens da grid passando o nome das áreas.
Porém, há outra maneira (um pouco mais complicada) de se fazer isso. Após indicar o tamanho das áreas e colunas, podemos indicar em que linha/coluna o item começa e em que linha/coluna ele termina. Ficaria assim:

.item{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3
}
/*ou com os atalhos:*/
.item{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
/*ou com esse atalho*/
.item{
    grid-area: 1 / 2 / 2 / 3;
}

Se você declarar, por exemplo, para um item se posicionar em uma linha ou coluna que não foi declarada, ele ficará com as dimensões declaradas em grid-auto-columns e grid-auto-rows também.

grid-auto-flow

Se você possui itens que não possuem uma área declarada para ficar, esta propriedade indica se estes itens devem ir para uma nova linha ou coluna.

grid

Atalho para definir em uma única declaração as seguintes propriedades: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow

Funções e Valores Especiais

O CSS Grid também veio com palavras-chave que guardam valores especiais e também novas funções para dar ainda mais poder à criação de nossos layouts.

Valores Especiais

Ao declarar as dimensões das linhas e colunas, podemos indicar algumas palavras especiais ao invés de valores numéricos:

  • min-content: o elemento ficará com o tamanho mínimo de seu conteúdo
  • max-content: o elemento ficará com o tamanho máximo de seu conteúdo
  • auto: utiliza o espaço disponível

No exemplo a seguir, o primeiro item ficará com o tamanho mínimo de seu conteúdo, ou seja, seu texto. O segundo item ficará com o tamanho máximo necessário para caber seu conteúdo (texto).
Já o terceiro elemento ficará com o espaço que sobrou.

A unidade fr

Além de indicar a dimensão de linhas e colunas com as tradicionais unidades como px, % e em, agora também contamos com o fr.
Esta unidade indica fração.

No código abaixo cada uma das colunas ficará com 1/3 do espaço disponível (1fr + 1fr + 1fr = 3).

.container{
  /***********/
  grid-template-columns: 1fr 1fr 1fr;
  /***********/
}

No código abaixo a primeira coluna ficará com 50px, a segunda com 2/5 do espaço disponível e a terceira, com 3/5 (2fr + 3fr = 5).

.container{
  /***********/
  grid-template-columns: 50px 2fr 3fr;
  /***********/
}

Experimente brincar com os valores das colunas no Playground abaixo:

A função minmax()

Imagine que você tenha uma linha ou coluna que pode variar de tamanho, mas que ela não pode passar de um valor mínimo ou máximo. Esta função nos permite indicar ambas as dimensões limites.

No código abaixo a primeira e terceira coluna terão 1fr de largura. A segunda coluna terá seu tamanho alterado de acordo com a largura de seu container. O tamanho mínimo será 100px e o máximo será 50% da largura do container (isso mesmo, podemos misturar unidades diferentes!).

.container{
  /***********/
  grid-template-columns: 1fr minmax(100px, 50%) 1fr;
  /***********/
}

Isso ajuda muito a ter mais controle do tamanho dos elementos e também nos poupa de escrever vários media queries.

A função fit-content()

Esta função recebe um único parâmetro, o tamanho máximo que um elemento pode chegar. É como se você usasse o min-content, mas com um controle de tamanho máximo que o elemento pode ter.

Uma diferença principal com o minmax() é que o minmax() sempre buscará ocupar o maior espaço possível, enquanto o fit-content() não ocupará mais espaço do que o necessário.

A função repeat()

Quando precisarmos criar mais de uma linha ou coluna com a mesma dimensão, utilize a função repeat() para não ter que ficar escrevendo várias vezes. Primeiro indicamos o número de repetições e depois, o valor a ser repetido.

No código abaixo nossa primeira coluna terá 50px de largura. Depois teremos 3 colunas com 20px e uma última com 1fr.

.container{
  /***********/
  grid-template-columns: 50px repeat(3, 20px) 1fr;
  /***********/
}

Experimente mudar a quantidade de repetições e o valor da dimensão dos itens repetidos no Playground abaixo.

auto-fill e auto-fit

Junto ao repeat() podemos usar as palavras especiais auto-fill e auto-fit. Isso ajuda muito na hora de criar layouts responsivos de forma bem simples.

Nos exemplos abaixo, note que eu não indiquei quantas colunas eu quero. Na função repeat() eu usei os valores auto-fill e auto-fit.

O auto-fill tenta preencher o espaço disponível com quantos itens der, não importando se os itens estão vazios. Já o auto-fit também tenta colocar quantas colunas der, expandindo os itens para caber no espaço disponível.

Veja que, como estamos usando a função minmax(), também temos controle do tamanho mínimo e máximo dos itens.

CSS Flexbox – Um Guia Interativo (Parte 2 – Itens)

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com Flexbox. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos filhos.
Teremos basicamente um container com alguns itens dentro.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
</div>

order

Por padrão, os itens de um Flex Container são exibidos na ordem presente no HTML.

Com a propriedade order nós podemos alterar a ordem dos elementos. O valor deve ser um número inteiro, negativo ou positivo.

flex-grow

Indica o quanto um item pode crescer caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter duas vezes mais espaço do que os outros.

flex-basis

Define o tamanho padrão de um elemento antes do espaço disponível ser distribuído. O valor pode ser em px, %, em, etc.

Se o valor for auto, ele irá olhar para o valor de width e height do item.

Se o valor for content, ele irá olhar para o tamanho do conteúdo do item.

flex-shrink

Indica o quanto um item pode encolher caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter metade do espaço do que os outros.

flex

Esta propriedade é apenas um atalho para flex-grow, flex-shrink e flex-basis, nos permitindo declarar os valores em uma única propriedade.

.item.selected{
    flex: 2 4 50px;
}
HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

align-self

Você deve se lembrar da propriedade align-items que vimos no post sobre as propriedades do container.

A propriedade align-self nos permite sobrescrever o valor desta propriedade para um único item. Assim podemos, por exemplo, colocar um único item no final de uma linha enquanto todos os outros estão no começo.

CSS Flexbox – Um Guia Interativo (Parte 1 – Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o Flexbox. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como o Flexbox funciona.

Se estiver com dúvidas entre usar Flexbox ou CSS Grid, confira o nosso post de comparação: https://www.treinaweb.com.br/blog/flexbox-ou-css-grid/

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

O que é Flexbox?

O Flexbox (Flexible Box) nos permite organizar, alinhar e distribuir itens dentro de um container. Com ele fica mais simples definir o tamanho e o alinhamento vertical e horizontal de itens.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o container.
Teremos basicamente um container com três itens dentro.

<div class="container" >
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

display

Primeiro precisamos definir que o nosso container é do tipo “flex”; Fazemos isso com a propriedade “display”.
No exemplo abaixo, utilize o checkbox para ligar/desligar o Flexbox.

flex-direction

Indica a direção dos itens, definindo o que vamos chamar de eixo principal (main-axis).

  • row (padrão): da esquerda para direita
  • row-reverse: inverso de row
  • column: de cima para baixo
  • column-reverse: inverso de column

flex-wrap

O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha.

Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha.

  • nowrap (padrão): todos os itens ficam em uma única linha
  • wrap: os itens que não cabem na linha são jogados para baixo
  • wrap-reverse: os itens que não cabem na linha são jogados para cima

flex-flow

Esta propriedade é apenas um atalho para flex-direction e flex-wrap, nos permitindo declarar o valor de ambos em uma única propriedade.

.container{
    display: flex;
    flex-flow: row wrap;
}

justify-content

Define o alinhamento dos itens ao longo do eixo principal.

  • flex-start (padrão): os itens ficam junto no começo da linha
  • flex-end: os itens ficam juntos no final da linha
  • center: os itens ficam centralizados na linha
  • space-between: os itens são distribuídos igualmente no espaço disponível. O primeiro item fica no começo da linha e o último fica no final.
  • space-around: os itens são distribuídos igualmente no espaço disponível ao redor deles.
  • space-evenly: os itens são distribuídos igualmente no espaço disponível.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-items

Define o alinhamento dos itens perpendicularmente em relação ao eixo principal.
Pense nele como um justify-content, mas que alinhará os itens no outro eixo.

  • stretch (padrão): estica os elementos para preencherem o container.
  • flex-start: os itens ficam junto no começo do eixo perpendicular
  • flex-end: os itens ficam juntos no final do eixo perpendicular
  • center: os itens ficam centralizados no eixo perpendicular
  • baseline: parecido com o center, mas usando a base da linha como referência. No exemplo abaixo, note como os textos dos itens ficam alinhados.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-content

Alinha as linhas do container.
Por alinhar as linhas, esta propriedade só tem efeito quando há mais de uma linha.

  • stretch (padrão): estica as linhas para preencherem o espaço restante.
  • flex-start: as linhas ficam juntas no começo do container
  • flex-end: as linhas ficam juntas no final do container
  • center: as linhas ficam centralizadas no container
  • space-between: as linhas são distribuídas igualmente. A primeira linha fica no começo do container e a última fica no final.
  • space-around: as linhas são distribuídas igualmente no espaço disponível ao redor delas.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Playground

Para testar, brinque um pouco com cada uma das propriedades para ver as possibilidades:

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.

Django - Templates
Curso de Django - Templates
CONHEÇA O CURSO

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/

Laravel - Framework PHP (Parte 1/3)
Curso de Laravel - Framework PHP (Parte 1/3)
CONHEÇA O CURSO

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 template e seu download, feito através do link: https://www.bootstrapdash.com/product/star-admin-free/

Java - Criação de aplicações web com Spring Boot
Curso de Java - Criação de aplicações web com Spring Boot
CONHEÇA O CURSO

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.