Resumo da Aula sobre o Sistema de Design Primer do GitHub

Olá pessoal, nessa aula eu vou falar do sistema de design primer do GitHub. Isso é nada mais nada menos que classes de CSS que a gente pode usar no nosso aplicativo para poder criar vários componentes da interface de usuário sem a gente ter que escrever os nossos próprios estilos, as nossas classes. Basta usar essas classes que o primer já definiu para poder absorver ou usar a teria o estilo deles e a interface de usuário irá aparecer na maneira do primer. Eu estou aqui no baixo e baixo você ir para primer.style. Isto é PRIMEER.STYLE. Então você pode clicar aqui na aba build CSS Dou Primer também tem componentes de React e view componentes que é para Ruby on Rails. Vou clicar então primer.style.css. Vou dar um exemplo aqui de um botão. Se eu arrastar a barra do esquerdo e clicar em buttons que são botões vamos ver uns exemplos. Por exemplo, para poder criar esse botão aqui onde meu ponteiro está basta definir uma tag button com a classe btn. Então essa classe foi escrita já está escrita no sistema do primer e essa classe vai sonar os estilos. Para poder confirmar isso, basta clicar com o botão direito e espressionar e você vai ver aqui a definição dessa classe ponto btn no dev tools na aba de styles tem aqui ponto btn a definição que você pode fazer aqui como que o primer fez esse botão usando propriedade color e o valor tal background color, border color e assim por diante. Se você quiser outros tipos de botões, basta seguir o guia que eles têm. Tem um exemplo e você copia as classes do código e a estrutura obviamente. Por exemplo, um botão primário vai aparecer com a cor de fundo verde e a cor do texto branca. Para poder tornar o botão primário basta adicionar além da classe btn você adiciona btn traço primary prry maeribs tem essa outline btn outline danger o sinal de que o botão fica vermelho quando você deixa o ponteiro sobre o botão e outros exemplos que você pode seguir tamanho pequeno padrão e grande né small default large certo e se você quiser espressionar e ver como é definir o estilo, basta clicar com o botão direito e espressionar no seu navegador e na aba styles do dev tools só olhar a definição da classe e os seus estilos. Vou fechar o dev tools aqui e eu vou mostrar mais outras. Por exemplo box que é uma caixa tem que é mais básico e tem um lista um dois três quatro com um header que é o primeiro linha com a cor de parente e várias variações dessa interface esse componente de tefaço de usuário chamada box esse aqui tem uma co azul para o header aí é sim por diante outras coisas interações para formulários tem forms e você vai ver vários tipos de aparência para o formulário é só copiar a estrutura a mesma estrutura e as classes o que importa mais as classes né seguir a mesma estrutura tentar seguir estrutura similar a esses exemplos que eles dão e tem se eleita aqui grupo de formulário agrupamento e ele tem aqui ele já aplica os estilos pro label e não sou o que as mensagens de sucesso de erro e mostra como mostrar a mensagem de erro para um input uma caixa de texto mensagem de morning e assim por diante e mostra labels aqui você já usou o get hub você pode ver que essas construções são familiares é o label são esses negócios aqui a etiquetas tem várias cores é só seguir essas classes para poder ser criadas tá bom então esse é uma visão geral desse sistema se você quiser instalar eu vou dar um exemplo aqui a get instarter é onde você clica para ter as funções de como instalar se você estiver usando o npm ou qualquer ou o yarn é só instalar o pacote at a rouba primer barra css e você pode importar dessa maneira se for no você usar o scss também funciona se você falar só em portas aspas a rouba prime barra css tá e fecha aspas também funciona da mesma maneira então se você não tiver isso não tiver nenhum bunda pode só tentar se quiser como eu vou fazer agora só copiar o link do cdn para poder só para testar e você tem um tag de link com hr href né esse link aqui que do am pkg que vai te dar a versão mais nova 19 incluindo o menor e o patch eu vou copiar esse link eu tô aqui no meu editor de texto o vscode eu queria um arquivo index ponto html e a tag de html dentro do head antes do fechamento de rede vou colar aquela tag deixa eu colocar aqui quebra de texto a tag link com a garraf aquele é para poder ter essa folha de chiles do primer já disponível então vou também eu poderia estar vc um servidor local para poder rodar isso abrir só o arquivo mesmo no navegador mas eu vou usar uma extensão do meu editor de texto que eu procurei html preview vou estar lá e vou ver e funciona direito então toga o preview control shift v e o shift v e colocar dividir para baixo e dividir para baixo é só uma página aqui tá aqui o preview no lado de baixo então vamos fazer um exemplo aqui eu já tenho a folha de estilos carregada né fazer o exemplo do botan se lembra que se você põe um tag de botan botão deixa tá aqui sem o estilo um lado aqui embaixo e você pode colocar classe né btn e ele já se torna aquele botão se quiser primar e ver espaço btn primary ele se torna aquele botão verde você vê aqui e tem também umas utilidades aqui no de adição na espaço que é bem conveniente cadê a infografia utilidades margem ou parê da colocar margem então tem essas abreviações que você pode usar m significa margem seguir de traço seguir de um número esse número é o nível né por exemplo se eu colocar aqui no botão m traço 2 ele coloca margem ao redor do botão à esquerda direita assim me abaixo de nível 2 que se você olhar nessa tabela nível 2 corresponde a 8 pixels se você clicar para inspecionar obviamente eu não tenho esse preview não tem dev tools né deixa eu ver aqui e não é muito legal deixa eu ver só abre essa janela no navegador teve melhor e aí e aí aqui abrir navegador porque lá não tem dev tools acho que tem mas não sei como abrir sei lá vou inspecionar aqui esse botão a not que o ponto m traço 2 realmente é a sua margem de 8 pixels em todos os lados né você clica aqui você ver sacou meio que marrom bebe bebe a pedola do botão que é margem e se você quiser usar a pedra é parecida é chamada p p adiciona margem na hora que agora o botão tem se eu atualizar e clicar aqui perto do botão tem a seu clicar em ponto ls para remover o ver o botão sem amar sem o p2 com p2 no que ele seta a pattern dentro do botão né o espaço entre o conteúdo do botão e a borda pra nível 2 que é 8 px né 8 px e não esqueça que vai sobre escrever o que já tinha definido pelo btn né parece que o btn outra coisa que é ponto btn já definia um pad de 5 né 16 né 5 acima e abaixo e 16 nos lados parece né eu tirar o p2 é é então esse aí é o o pad em no utilities aqui se você quiser ajustar por exemplo margem no topo margem bot um lado levo é só colocar abreviação dessa palavra depois do p por exemplo se eu quiser colocar só o p a direita que é r right né você colocar nível 4 e ver que ele já molda né nível 6 no notebook espaço a direita dentro do botão aumentou né então p é padding r right direita traço o nível que é 6 que corresponde aqui nesse caso a 40 px você pode inspecionar no dev to do poder da tabela lá que eles dizem 4 desculpa 6 é 40 px aqui tá então que mostra as outras abreviações p pra padding t top r right b bottom le left a x seria a horizontal que é o left e right ao mesmo tempo por exemplo px 6 adicionaria 40 pixels à esquerda e à direita olha que a esquerda é o direito no navegador e pro y p y seria padding acima e abaixo desminuir o 6 que é 40 px aí tá bom e tem vários outros aqui pode lá um lida e também essas classes utilitárias ou de ajuda pra borda né pra box shadow cores né pode mudar a cor aqui usando essas classes e assim por diante e aí e aí pessoal ah então esse é o uma breve introdução ao sistema de design do que o github usa na qgate hub criou chamado primer css né prime acss podindo lá no website primer ponto style barra css tem também a página do repositor no github que é o primer barra css se você pesquisar o clica aqui a um lugar deve ter um link pro github aqui embaixo é de despejo um github ah e a qualquer maneira é contribuindo o app só é prime barra github se você quiser você olha aqui a url github ponto com barra prime barra css eu copio a s a web e aí e se você olhar o código aqui src buttons que a gente fez a button para sss mostra aqui a definição de ponto btn e todas as propriedades tal e tal e tal btn primary que a gente usou e usam a cor que usa uma variável de css e assim por diante tá então por essa é só e até a próxima