Apostila_Bluetrip

UNIVERSIDADE FEDERAL DO PARANÁPró-Reitoria de Gestão de Pessoas

Coordenadoria de Desenvolvimento de Pessoas

BlueTrip

JULHO/2010

SUMÁRIO1.1 FRAMEWORK BLUETRIP CSS.........................................................................................................................3

1.2 FRAMEWORK BLUETRIP CSS - USANDO BLUETRIP CSS PARA CRIAR UM LAYOUT DE

PÁGINA DE BASE WEB.............................................................................................................................................4

1.3 FRAMEWORK BLUETRIP CSS - ADICIONANDO OS ARQUIVOS DE CSS.............................................7

1.4 FRAMEWORK BLUETRIP CSS – REMOVENDO O GRID.........................................................................10

2.1 ADICIONANDO BORDAS PARA AS COLUNAS DA WEB PAGE COM CSS BLUETRIP.....................13

2.2 ADICIONANDO BORDAS A WEB PAGE BLUETRIP COLUNAS COM CSS - REVIEW: GENÉRICO

SPAN X CLASSES CSS.............................................................................................................................................14

2.3 ADICIONANDO BORDAS PARA AS COLUNAS DA WEB PAGE BLUETRIP COM CSS -

ADICIONANDO FRONTEIRAS PARA COLUNAS DE PÁGINA WEB............................................................17

2.4 ADICIONANDO BORDAS PARA AS COLUNAS DAS WEB PAGES BLUETRIP COM CSS -

ATRIBUIÇÃO DE CLASSES CSS FANCY PARA CABEÇALHOS HTML......................................................20

3.1 USANDO O FRAMEWORK CSS BLUETRIP E CLASSES THIN E CAPS ...............................................24

3.2 USANDO O FRAMEWORK BLUETRIP CSS – CLASSES THIN E CAPS - ANÁLISE: AS CLASSES

CSS FANCY................................................................................................................................................................25

3.3 USANDO O FRAMEWORK CSS BLUETRIP E CLASSES THIN E CAPS - TRABALHANDO COM A

CLASSE CSS THIN....................................................................................................................................................28

3.4 USANDO O FRAMEWORK CSS BLUETRIP E CLASSES THIN E CAPS - USANDO A CLASSE CSS

CAPS............................................................................................................................................................................31

4.1 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP...............................................35

4.2 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP - REVIEW: CLASSES CSS

THIN E CAPS.............................................................................................................................................................36

4.3 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP - STYLING LISTAS

DESORDENADAS HTML........................................................................................................................................42

UNIVERSIDADE FEDERAL DO PARANÁPRÓ-REITORIA DE GESTÃO DE PESSOASCOORDENADORIA DE DESENVOLVIMENTO DE PESSOASUNIDADE DE CAPACITAÇÃO E APERFEIÇOAMENTO DE PESSOAS

Página 2Curso de Desenvolvimento Web – BlueTrip2

4.4 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP - STYLING LISTAS

ORDENADAS HTML................................................................................................................................................46

5.2 STYLING DEFINIÇÃO LISTAS COM O CSS BLUETRIP FRAMEWORK - REVIEW: LISTA SEM

ORDEM E ORDENADA...........................................................................................................................................51

5.3 STYLING DEFINIÇÃO LISTAS COM O CSS BLUETRIP FRAMEWORK - LISTAS DE DEFINIÇÃO

COM STYLING RAPIDAMENTE BLUETRIP.....................................................................................................57

5.4 STYLING DEFINIÇÃO LISTAS COM O CSS BLUETRIP FRAMEWORK - STYLING DIFERENTES

CABEÇALHOS HTML.............................................................................................................................................61

6.1 MAIS USOS PARA AS CLASSES CSS THIN E CAPS NO BLUETRIP ......................................................65

6.2 MAIS USOS PARA AS CLASSES CSS THIN E CAPS NO BLUETRIP - REVISÃO: LISTAS DE

DEFINIÇÃO DE ESTILO COM BLUETRIP.........................................................................................................66

6.3 MAIS USOS PARA AS CLASSES CSS THIN E CAPS CSS NO BLUETRIP - SUBORDINAÇÃO

CLASSES FINA CSS PARA ELEMENTOS H3.....................................................................................................69

6.4 MAIS USOS PARA AS CLASSES CSS THIN E CAPS CSS NO BLUETRIP - CAPS CSS ATRIBUINDO

CLASSES AOS ELEMENTOS H2 E H3.................................................................................................................73

7.1 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR...............................................77

7.2 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR - RESULTADOS DE

MENSAGENS COM SUCESSO BLUETRIP..........................................................................................................78

7.3 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR - MOSTRANDO

ANÚNCIOS E AVISOS COM BLUETRIP..............................................................................................................82

7.4 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR - RESULTADOS DE ERROS

.......................................................................................................................................................................................86



1.1 Framework BlueTrip CSS

Se você está procurando um framework CSS para iniciantes, não procure mais. Esta série apresenta o framework CSS BlueTrip. Nesta primeira parte, vou explicar como desenvolver um projeto básico de página web usando as classes principais CSS fornecidos pelo framework. Como você verá em breve, este processo é bastante simples, mesmo que atualmente não tenha um profundo conhecimento de CSS.

Se você está atualizado com as últimas tendências que regem o mundo do web design moderno, então certamente você estará ciente da crescente popularidade dos frameworks CSS. Na verdade, há um grande número de designers que usam extensivamente em seus projetos hoje em dia. Frameworks permitem aos usuários criar layouts complexos página web que serão processados de forma consistente em diferentes browsers, sem ter que criar páginas web a partir do zero.

Tal como acontece com outras partes de software com vista a reduzir o tempo de desenvolvimento, frameworks CSS tem prós e contras que devem ser cuidadosamente avaliados. Naturalmente, uma de suas armadilhas mais importante é que as classes CSS incluída com eles não têm significado semântico verdadeiro. Alguns designers “puristas” se recusam a utilizar os frameworks, contudo, esse efeito colateral será simplesmente irrelevante.

Os frameworks CSS, como BluePrint, por exemplo, inclui recursos verdadeiramente úteis, como estilos de comprovada capacidade e redefinir a capacidade de criar layouts de páginas web usando uma grade consistente. Em suma, independentemente das opiniões que você pode ter (ou já ouviu falar) sobre elas, frameworks CSS estão aqui para ficar, e os mais poderosos merecem um olhar mais atento.

Neste grupo de artigos que exploraremos em profundidade o framework BlueTrip CSS (http://bluetrip.org), que pretende reunir os melhores recursos fornecidos pelo BluePrint CSS e Tripoli, entre os principais.

Pessoalmente, tenho usado BlueTrip CSS por alguns meses para a criação de designs de página web e achei muito fácil de aprender. Além disso, ele vem com um grupo puro de reset, impressão e estilos de texto que irá tornar sua vida muito mais fácil.

Apresentaremos como é possível a construção de layouts de páginas web com o framework CSS BlueTrip, para que possa começar rapidamente a usá-lo em seus projetos web.



1.2 Framework BlueTrip CSS - Usando BlueTrip CSS para criar um layout de página de base web

Como já exposto na introdução, a curva de aprendizado BlueTrip CSS é extremamente simples. Ele oferece uma grade de fundo composto por 24 colunas, que pode ser estendido por todo o documento da Web em conformidade com as exigências de um layout específico da página web. Desse ponto em diante, é possível puxar e empurrar os elementos à vontade, bem como cabeçalhos de estilo, parágrafos, listas e assim por diante. Com base nesse esquema de design simples, vou criar a marcação de uma página web básica, que irá usar algumas das classes que medem CSS que vêm com o framework.

Abaixo, está a página web exemplo, que exibe a grade de fundo. Dê uma olhada no exemplo de código correspondente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Basic example on using BlueTrip</title>

</head>

<body>

<div class="container showgrid">

<div class="span-24">

<h1>BlueTrip CSS Grid example showing the grid</h1>

</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>


http://www.devarticles.com/





</div>

<div class="span-8 last">


</div>



</div>



</div>

</div>

</body>

</html>

Se você trabalhou com o CSS antes, você vai entender como funciona a marcação acima. Enfim, a primeira coisa a notar é que todo o layout da página web é envolvido em um recipiente em geral, que tenha sido atribuída duas classes CSS, chamado de "container" e "showgrid", respectivamente.

Como você pode imaginar, a primeira dessas classes é responsável por centralizar o conteúdo do documento web inteira, enquanto o último é encarregado de exibir a grade de fundo. É muito simples.



O resto da marcação é auto-explicativo. Ele usa um conjunto de classes que medem, apelidado genericamente "span-x", onde X é o número de colunas que será gerado por uma div específica. Neste exemplo, decidi criar primeiro uma coluna para o cabeçalho, em seguida, uma seção de corpo composto de três recipientes e, finalmente, uma área de rodapé composta de duas divs. É válido mencionar o uso do "x-span passado" classe CSS, que é utilizado para localizar a última coluna na grade de base.

Neste ponto, esperamos que você compreendeu a lógica que está por trás de criação de layouts de página da Web básica com BlueTrip. Então, vou adicionar ao documento anterior web os arquivos CSS que irá processar o layout conforme o esperado.

Este tópico será abordado em detalhes na próxima seção.



1.3 Framework BlueTrip CSS - Adicionando os arquivos de CSS

Na seção anterior, que construiu a estrutura do esqueleto de um layout básico da página web, você pôde se familiarizar com o uso das classes CSS fundamentais previstas pelo quadro CSS Blueprint. No entanto, em seu estado atual, a página em questão não carrega nenhum arquivo CSS necessário para tornar o layout correto.

Então é hora de corrigir isso agora. Basicamente, o quadro vem com três folhas de estilo do núcleo. O primeiro é encarregado de fornecer os estilos que serão utilizados nas telas do computador, o segundo será utilizado para a impressão, e o último arquivo CSS é um conjunto de hacks que abordam algumas incompatibilidades relacionadas com Internet Explorer. (isso soa familiar a você?).

Abaixo, está a definição completa do (X) HTML arquivo criado anteriormente, desta vez incluindo o arquivo CSS:



<head>


<title>Basic example on using BlueTrip (showing the background grid)</title>

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">

<link rel="stylesheet" href="css/print.css" type="text/css" media="print">



</head>

<body>






</div>



</div>



</div>



</div>



</div>



</div>

</div>

</body>

</html>



Se você tentar executar o arquivo de exemplo anterior em seu próprio navegador, você deve obter o seguinte resultado:

Esse exemplo de layout de página web é simples, é útil para demonstrar como uma folha de estilo CSS como este pode ajudá-lo na execução de diferentes tipos de projetos web rapidamente. Se o significado semântico de divs não é uma grande preocupação para você (mas deve ser), então BlueTrip CSS deve ser definitivamente ser uma boa alternativa, convém examinar.

Agora que você aprendeu como criar um layout básico de página Web, com BlueTrip, vou terminar este capítulo introdutório da série, mostrando outro arquivo de amostra, o que irá esconder a grade de fundo da tela.



1.4 Framework BlueTrip CSS – Removendo o Grid

Vimos como criar um layout simples de página web, onde o grid de fundo era visível. Logicamente, esta grade deve ser usada como um guia para o posicionamento de elementos no documento web, embora deva ser escondido quando usado em ambientes de produção.

Como isso pode ser feito? Bem, é realmente simples. Remover o "showgrid" classe CSS a partir do container principal fará o truque. O exemplo a seguir mostra como ocultar a grade de fundo do display:



<head>


<title>Basic example on using BlueTrip (hiding the background grid)</title>





</head>

<body>

<div class="container">



</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.





Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>



</div>



</div>



</div>



</div>

</div>

</body>

</html>

Se você experimentar o (X)HTML no seu navegador, você verá que o grid foi removida. Como a classe CSS "showgrid", foi retirado da div do container principal. Sugiro que você faça



testes com este exemplo, posicionar elementos na página web, assim você pode produzir duas versões diferentes do layout a ser desenvolvido.

Considerações finais.

Neste capítulo introdutório da série, eu expliquei como desenvolver um projeto básico página web usando as classes principais CSS fornecidos pelo framework CSS BlueTrip. Como você viu por si mesmo, esse processo foi bastante simples, mesmo se você não tem um fundo conhecimento de CSS.

No próximo artigo, discutiremos a estrutura para a adição de colunas de uma página web, e as fronteiras também.



2.1 Adicionando bordas para as colunas da Web Page com CSS BlueTrip

Nesta segunda parte de uma série que introduz o framework BlueTrip CSS, vou mostrar como usar algumas classes CSS práticas para adicionar bordas para as colunas de uma página web e criar cabeçalhos H2.

Sem dúvida, frameworks CSS ajudam a encurtar o tempo necessário para o desenvolvimento de sites web. Como você deve saber, existem poucos poderosos contendores que ganharam popularidade considerável ao longo do tempo. Isto é devido às suas funcionalidades úteis, tais como a inclusão de bem confiáveis para novas funcionalidades, texto e estilo web forma completa, as folhas de estilo para impressão e assim por diante.

Dentre as inúmeras CSS frameworks disponíveis atualmente, que se tornaram a ferramenta preferida de muitos web designers, BlueTrip é muito possivelmente uma das mais populares. Alega reunir as melhores características fornecidas pelo CSS BluePrint e do Trípoli, e que parece ser mais do que um truque de marketing.

Então, se você estiver interessado em aprender a trabalhar com o CSS BlueTrip, então esta série de artigos pode ser o que você está procurando. Se você já leu o tutorial introdutório, então você sabe como criar layouts de página da Web básica com BlueTrip.

Neste artigo específico, eu expliquei como usar o framework genérico span x classes CSS para construção de duas páginas web simples. No primeiro caso, a grade de fundo usado para alinhar elemento no documento web foi exibida na tela, enquanto no segundo exemplo, a grade foi escondido da vista, graças à manipulação do "showgrid classe CSS", que foi atribuído alternadamente e removido da marcação.

No entanto, estou apenas arranhando a superfície dos recursos oferecidos pela BlueTrip. Na próximas linhas vou explicar como usar algumas das classes de seu CSS para adicionar molduras às colunas de uma página web e aplicar os estilos elegantes de cabeçalhos de HTML.



2.2 Adicionando bordas a Web Page BlueTrip colunas com CSS - Review: genérico span x classes CSS

Abaixo eu reintroduzi um dos exemplos que usei no artigo anterior, para mostrar como usar o BlueTrip CSS e construir um layout de página web. Ele funciona usando o framework genérico "span-x classes" CSS. Aqui está:



<head>


<title>Basic example on using BlueTrip (showing the background grid)</title>





</head>

<body>




</div>



</div>







</div>



</div>



</div>



</div>

</div>

</body>

</html>

Como mostrado acima, a criação de um layout de uma simples página web com BlueTrip é apenas uma questão de utilizar o genérico "span-x" e "passado classes" CSS de acordo com o tipo de projeto que precisa ser construído. Neste caso, o documento anterior usa classe CSS showgrid "adicionais" para exibir a grade de fundo, mas, naturalmente, em ambientes de produção deve ser retirado.



Sem dúvida, a compreensão da lógica que implementa BlueTrip para criar colunas de posição através de uma página web é muito simples, mesmo quando as classes CSS utilizados durante este processo falta um sentido verdadeiramente semântico. Assim, supondo que você esteja familiarizado com os conceitos básicos de trabalho com o anterior "span-x", é hora de explorar mais algumas funcionalidades do framework.

Assim, em consonância com os conceitos utilizados na introdução, na próxima seção vou explicar como usar uma outra classe CSS fornecidos pelo BlueTrip para adicionar fronteiras sutis para as colunas de uma página web.



2.3 Adicionando bordas para as colunas da Web Page BlueTrip com CSS - Adicionando fronteiras para colunas de página web

Tal como acontece com todos os recursos oferecidos pelo BlueTrip, adicionar bordas para as colunas de uma página web é reduzido para atribuir uma classe CSS genérico, não surpreendentemente chamado de "fronteira", com elementos selecionados.

No entanto, para compreender mais claramente como adicionar algumas fronteiras sutis para determinados recipientes, abaixo eu codificado um exemplo totalmente novo que usa a classe CSS para realizar esta tarefa em apenas alguns passos simples:



<head>


<title>Basic example on using BlueTrip (using the border class)</title>





</head>

<body>



<h1>BlueTrip CSS Grid example using the border class</h1>

</div>

<div class="span-8 border">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure





dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>



</div>



</div>



</div>



</div>

</div>

</body>

</html>

Como você pode ver, o exemplo acima parece muito semelhante ao que você viu no segmento anterior, com uma ligeira diferença: um par de colunas da página web tem sido



atribuída a "fronteira" classe CSS, o que adiciona uma borda do lado direito desses elementos, desta forma torná-los um pouco mais elegante.

Além disso, aqui está uma imagem simples que mostra como o documento da Web anterior é processado pelo navegador, após a incorporação das fronteiras. Aqui está:

Agora que você aprendeu a atribuir as fronteiras para colunas em uma página web usando a "fronteira" de classe CSS, vou explicar como usar uma outra classe fornecida pelo BlueTrip para a construção de alguns cabeçalhos fantasia HTML.



2.4 Adicionando bordas para as colunas das Web pages BlueTrip com CSS - Atribuição de classes CSS fancy para cabeçalhos HTML

Na realidade, o framework CSS BlueTrip, por padrão, vem equipado com algumas classes úteis CSS que pode ser usado para temperar o olhar de diferentes elementos de um documento web. Neste caso particular, eu vou mostrar como usar uma dessas classes, chamado de "fancy", para dar um estilo elegante com elementos baseados em texto.

O exemplo abaixo demonstra como atribuir a esta classe para todos os cabeçalhos H2 incluída em uma página web.



<head>


<title>Basic example on using BlueTrip (using the fancy class)</title>





</head>

<body>



<h1 class="fancy">BlueTrip CSS Grid example using the fancy class</h1>

</div>


<h2 class="fancy">Level 2 heading</h2>




</div>




</div>




</div>




</div>




</div>

</div>



</body>

</html>

A partir do exemplo acima, para ver como é simples transformar o cabeçalhos H2 em elemento elegante usando a "fancy", da classe CSS BlueTrip. Uma vez que a amostra de código fala por si, abaixo, a imagem que mostra como a página web anterior é exibido no navegador:

Nada mal, hein? Como você provavelmente concordará comigo, BlueTrip torna realmente fácil para adicionar "fancy" estilos de cabeçalhos de HTML em um documento web. No exemplo acima, esses estilos foram adicionados a uma H2, mas, naturalmente, esse processo pode ser aplicado a outros elementos de texto, como parágrafos e listas.

E com este último hands-on exemplo, estou terminando este segundo tutorial sobre como trabalhar com o framework CSS BlueTrip. Como sempre, sinta-se livre para editar todas as amostras de código mostrado neste artigo, para que possa obter uma melhor compreensão do uso de classes CSS que vêm junto com BlueTrip.

Considerações finais

Neste segundo capítulo da série, eu mostrei-lhe como usar algumas classes úteis do CSS que vem com o framework BlueTrip para adicionar molduras às colunas de página web e criar cabeçalhos H2.



No artigo seguinte, exploraremos mais classes CSS fornecidas pelo framework, que será usado para exibir as variações de cabeçalhos de HTML. Não perca a próxima parte!



3.1 Usando o Framework CSS BlueTrip e Classes Thin e Caps

Nesta terceira parcela de uma série sobre o quadro CSS BlueTrip, discuto o uso das classes CSS thin e caps que vêm com BlueTrip. Essas classes podem ser muito úteis para adicionar um toque mais elegante de cabeçalhos em HTML, de listas, e assim por diante.

Caso você não tenha ouvido falar sobre isso ainda, BlueTrip é um framework CSS poderoso, que combina os melhores recursos fornecidos por dois contendores popular neste terreno, que é BluePrint CSS e Tripoli, respectivamente. Então, se você quiser encurtar o tempo de desenvolvimento necessário para a construção de seus sites usando o framework BlueTrip CSS, em seguida, este grupo ou artigos que você vai encontrar um guia completo que vai lhe mostrar como trabalhar com as suas características mais relevantes. Estes incluem a habilidade para criar layouts de páginas complexas da web, assim como suas numerosas classes agrupadas CSS, acessível para denominar cabeçalhos, parágrafos, listas, e assim por diante de forma muito rápida e simples.

Naturalmente, se você é um leitor paciente e passou os dois tutoriais anteriores desta série, você tem um background sólido na construção de projetos de página simples da web e estilos H2 com BlueTrip. Nesses dois tutoriais que eu desenvolvi alguns exemplos básicos que demonstrou como realizar essas tarefas por meio do genérico "span-x" e "fancy" classes CSS que vem incluído por padrão no framework.

Na verdade, é extremamente simples para prover cabeçalhos HTML e outros elementos de web baseado em texto de página com um estilo elegante, através das classes CSS que vêm com BlueTrip. Também é válido ressaltar que o framework apresenta algumas outras classes que permitem que você vire cabeçalhos e parágrafos em elementos extravagantes.

Assim, com base nesta capacidade de BlueTrip, nas próximas linhas vou dar uma olhada nas classes CSS "thin" e "caps". Estes podem ser usados para criar variações elegantes de todos os elementos de página de texto baseado em web, incluindo as mencionadas anteriormente.



3.2 Usando o Framework BlueTrip CSS – Classes Thin e Caps - Análise: as classes CSS fancy

Antes de mostrar como trabalhar com as classes CSS thin e caps oferecido pelo estilo de cabeçalhos HTML BlueTrip, eu gostaria de reintroduzir um exemplo desenvolvido no capítulo anterior desta série. É demonstrado como adicionar um estilo elegante de alguns elementos H2 de um documento web, utilizando o quadro de "fancy" classe CSS. Este exemplo parece-se com este:



<head>


<title>Basic example on using BlueTrip (using the fancy class)</title>





</head>

<body>



<h1 class="fancy">BlueTrip CSS Grid example using the fancy class</h1>

</div>









</div>




</div>




</div>




</div>




</div>

</div>

</body>

</html>



Como mencionei antes, no exemplo acima, a classe CSS "fancy" que vem com BlueTrip tem sido atribuído a alguns elementos H2 de um documento de base web, desta forma tornando-os cabeçalhos mais elegantes. Isso é demonstrado pela imagem abaixo:

Enquanto o exemplo em questão é um pouco simplista, ele mostra como é fácil produzir variações interessantes de um elemento HTML comum usando apenas uma única classe CSS.

No entanto, o quadro também dá aos webdesigners BlueTrip a possibilidade de usar outros estilos CSS para fornecer determinados elementos do texto-base com um look extravagante. Na seção seguinte, examinaremos mais de perto uma nova classe CSS de tag chamada "thin", que pode ser utilizado para fazer os elementos selecionados na página web um pouco "mais fino".



3.3 Usando o Framework CSS BlueTrip e Classes Thin e Caps - Trabalhando com a classe CSS thin

Se você não estiver completamente satisfeito com a aparência visual alcançado quando se utiliza a "fancy" da classe CSS que você aprendeu antes, o quadro BlueTrip prevê outras classes que produzem variações úteis de qualquer elemento baseado em texto incluído em um documento web.

Para demonstrar mais claramente este conceito, vou desenvolver um tipo neste novo exemplo. Ela vai atribuir uma outra classe CSS chamada "thin" para alguns cabeçalhos H2 dentro de uma página web básica para torná-los mais finos. O exemplo parece este:



<head>


<title>Basic example on using BlueTrip (using the thin class)</title>





</head>

<body>



<h1 class="thin">BlueTrip CSS Grid example using the thin class</h1>

</div>


<h2 class="thin">Level 2 heading</h2>






</div>




</div>




</div>




</div>




</div>

</div>



</body>

</html>

No exemplo anterior, a amostra apenas cria um layout simples usando o já familiar "span-x classes" CSS que você aprendeu nos capítulos anteriores desta série, mas atribui a classe CSS "thin" para um H2 com poucos elementos, dando uma aparência mais elegante. Naturalmente, essa classe especial (e outros, naturalmente) pode ser aplicado a qualquer elemento baseado em texto da página web, então eu sugiro que você faça isso como lição de casa.

Além da amostra de código acima, aqui está uma imagem complementar que mostra como os cabeçalhos H2 da página de exemplo são apresentados após a atribuição da classe CSS "thin" a eles. Aqui está:

Não é tão ruim, certo? Inegavelmente, BlueTrip oferece aos designers de web com uma base sólida de classes CSS que lhe permite alterar a aparência dos cabeçalhos HTML, parágrafos, listas e assim por diante com muita facilidade. E falando do aspecto visual de elementos baseados em texto, o que se deseja fazê-los ser exibido inteiramente em letras maiúsculas no navegador?

Bem, graças à existência de outra classe CSS que vem com BlueTrip chamado "caps", este processo pode ser realizado com aborrecimentos menores. Eu gostaria de terminar este tutorial, mostrando-lhe um uso simples da classe específico



3.4 Usando o Framework CSS BlueTrip e Classes Thin e Caps - Usando a classe CSS caps

Na realidade, a tampa superior de qualquer elemento da página web baseada em texto com BlueTrip é reduzida a atribuir ao elemento de uma classe CSS específica denominada "caps". Desde a sua utilização é muito semelhante a trabalhar com a thin e fancy, classes discutidas anteriormente, neste caso específico, eu só vou criar um exemplo simples, assim você pode ver como ele funciona.

Dito isto, aqui está o exemplo de código que mostra como usar as tampas de classe CSS.



<head>


<title>Basic example on using BlueTrip (using the caps class)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using the caps class</h1>

</div>


<h2 class="caps">Level 2 heading</h2>






</div>




</div>

<div class="span-8 last"><h2 class="caps">Level 2 heading</h2>


</div>




</div>




</div>

</div>

</body>



</html>

Aqui você tem. Como demonstrado no exemplo anterior, as tampas de classe CSS que foi atribuído para todos os cabeçalhos H2 da página web anterior. Assim, esses elementos serão apresentados em letras maiúsculas na tela, como claramente demonstrado pela captura de tela a seguir:

Como mencionei anteriormente, o CSS BlueTrip permite que você altere a aparência visual dos elementos com base em texto de uma forma muito rápida e simples, mantendo um significado semântico mais rigorosas, com referência às classes CSS que ele usa. Esta não é aplicável quando as colunas de posicionamento em um documento web. Mas como você sabe, tudo na vida tem um custo, e isso não é uma exceção.

Então agora você sabe como usar a thin e caps classes CSS fornecidas por BlueTrip, para produzir variações elegantes de cabeçalhos de H2. Se você ainda tiver dúvidas sobre como trabalhar com estas classes, sugiro que você tente atribuí-los a outros elementos do texto-base para ver como eles afetam a sua aparência visual.


E isso é tudo para o momento. Nesta terceira parcela da série, eu discuti o uso dos thin "e" caps "classes CSS” que vêm com BlueTrip, que pode ser realmente útil para adicionar um toque mais elegante de cabeçalhos HTML, listas, e assim por diante.



No próximo capítulo, eu vou continuar a explorar as potencialidades oferecidas pela BlueTrip útil, desta vez para exibir as listas ordenados e não ordenados.



4.1 Styling sem ordem e lista ordenada HTML com BlueTrip

Bem-vindo à quarta parte de uma série de sete artigos sobre o CSS BlueTrip. Nesta parte, veremos como usar o CSS de estilos padrão para melhorar a aparência visual de ambas listas HTML os ordenados e não ordenados. Este é um processo fácil e simples.

Se você já se perguntou o que faz um framework CSS, uma ferramenta de webdesign sólida, então você perceberá que ele deve fornecer um conjunto de classes confiável de redefinição de estilo e uma grade de fundo limpo, padronizando o estilo comum e elementos HTML de formas diferentes , tais como cabeçalhos e parágrafos, listas e links, formulários e tabelas, e assim por diante.

Felizmente, hoje há um grupo de frameworks de CSS que servem a maioria desses requisitos. Esta lista inclui BlueTrip, que pretende reunir os melhores recursos oferecidos pelo BluePrint CSS e Trípoli (daí seu nome). Então, se você é um web designer que está à procura de um guia completo que mostra como trabalhar com este enquadramento CSS popular, então este grupo de artigos pode ser o material que você precisa.

E agora que você foi introduzido com o objetivo principal desta série, é um bom momento para rever os temas que foram abordados no último artigo. Nesse artigo eu desenvolvi alguns exemplos básicos que demonstrou como usar o thin "e" caps "classes CSS que vêm com BlueTrip para produzir algumas variações elegantes de cabeçalhos de H2.

No entanto, quando se trata de estilo elementos da página web baseada em texto de forma rápida, BlueTrip oferece inúmeras possibilidades interessantes e atraentes. Dessa forma, na quarta parte desta série eu vou discutir como estilo de ambas listas os ordenados e não ordenados usando classes CSS padrão fornecidas pelo BlueTrip.



4.2 Styling sem ordem e lista ordenada HTML com BlueTrip - Review: classes CSS thin e caps

Na edição anterior eu expliquei como atribuir a thin e caps, classes CSS que vêm com BlueTrip ao estilo de alguns cabeçalhos H2 em uma página web básica. Abaixo, reintroduzi alguns exemplos desenvolvidos em artigo que mostra como realizar este processo de uma forma simples. Aqui estão elas:

(example on using the 'thin' CSS class)



<head>


<title>Basic example on using BlueTrip (using the thin class)</title>

<link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection">

<link rel="stylesheet" href="../css/print.css" type="text/css" media="print">



</head>

<body>



<h1 class="thin">BlueTrip CSS Grid example using the thin class</h1>

</div>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud





exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>




</div>




</div>




</div>




</div>

</div>

</body>



</html>

(example on using the 'caps' CSS class)



<head>


<title>Basic example on using BlueTrip (using the caps class)</title>

<link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection">

<link rel="stylesheet" href="../css/print.css" type="text/css" media="print">



</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using the caps class</h1>

</div>




</div>






</div>




</div>




</div>




</div>

</div>

</body>

</html>

Como você pode ver a partir de amostras de código acima, é extremamente fácil de produzir variações de cabeçalhos de H2 e outros elementos de web baseado em texto página por meio do thin e caps, classes CSS. No primeiro caso, a saída gerada pelo browser será semelhante à imagem a seguir:



Enquanto no segundo exemplo, os cabeçalhos H2 será exibido todos os títulos, já que é a finalidade do caps (classe). Aqui está uma imagem que mostra como complementar esses estilos e como são renderizados na tela:



Bem, nesta fase você certamente lembra de como usar as classes anteriores CSS em casos concretos. Assim, é hora de explorar outros recursos oferecidos pela BlueTrip.

Como já expresso na introdução, BlueTrip fornece outros estilos padrão que serão aplicadas automaticamente a outros elementos de página web comum, como listas não ordenadas HTML. Assim, no segmento seguinte, eu estou indo para um código de exemplo que demonstram como realizar essa tarefa.



4.3 Styling sem ordem e lista ordenada HTML com BlueTrip - Styling listas desordenadas HTML

Tal como acontece com outros frameworks CSS, BlueTrip permite que você defina estilos padrão para ambas listas HTML, sem ordem e ordenada. Neste caso, vou criar um exemplo totalmente novo para você, que irá mostrar como listas unordered são exibidas no navegador quando usado o arquivo "screen.css do framework.

Veja como exemplo este novo aspecto:



<head>


<title>Basic example on using BlueTrip (using unordered lists)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using unordered lists</h1>

</div>









<ul>

<li>List Item 1</li>


<li>List Item 3

<ul>

<li>Sub List Item 1</li>

<li>Sub List Item 2

<ul>




</ul>

</li>

</ul>

</li>

</ul>

</div>




</div>






</div>




</div>




</div>

</div>

</body>

</html>

Fiel à forma, a amostra de código acima é muito simples de seguir. Tudo que faz é criar um layout de página de base web, onde um de seus recipientes inclui um conjunto de listas não ordenadas aninhadas HTML. Até agora, isso não é nada incomum, porém, as coisas vão se tornar mais interessante se você olhar para a imagem abaixo, que mostra como essas listas são exibidas no browser. Aqui está:



A partir da figura acima, é claro, para ver como é simples e rápido o estilo de listas desordenadas pode ser quando se utiliza o framework CSS BlueTrip. Claro, não poderia ser o melhor estilo que pode ser atribuído a estes elementos da página web, mas eles parecem muito elegante e profissional.

Depois de ter explicado brevemente o HTML com listas desordenadas e estilo com BlueTrip, agora mostraremos como fazer o mesmo processo com as listas ordenadas.



4.4 Styling sem ordem e lista ordenada HTML com BlueTrip - Styling listas ordenadas HTML

Como eu disse anteriormente, o último exemplo que vou criar, para este tutorial irá demonstrar como o estilo de listas ordenadas com BlueTrip. Tal como acontece com listas não ordenadas HTML, o quadro prevê um estilo padrão para esses elementos que fazem lhes o olhar muito polido.

O exemplo de código a seguir cria uma página web básica em que algumas listas ordenadas foram incluídas:



<head>



<link rel="stylesheet" href="css /screen.css" type="text/css" media="screen, projection">




</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using ordered lists</h1>

</div>









<ol>



<li>List Item 3

<ol>


<li>Sub List Item 2

<ol>




</ol>

</li>

</ol>

</li>

</ol>

</div>




</div>


<h2 class="caps">Level 2 heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>






</div>




</div>

</div>

</body>

</html>

Mesmo que a amostra de código acima tenha aparência muito semelhante à desenvolvida no segmento anterior, neste caso, mostra como uma lista ordenada HTML é exibido com os estilos BlueTrip aplicada a ele. Naturalmente, este exemplo seria incompleta se eu não mostrasse a captura de tela que retrata a saída do navegador. Aqui está:



Definitivamente, a compreensão de como trabalhar com listas ordenadas e BlueTrip é um processo extremamente simples, por isso não vou gastar mais tempo explicando como funciona o exemplo anterior. No entanto, vou encorajá-lo a tentar incluir outros elementos HTML para ver como eles são processados usando os estilos padrão fornecidos pelo framework.


Nesta quarta parte da série, eu expliquei como usar os estilos padrão fornecidos pelo BlueTrip para melhorar a aparência visual de ambas listas HTML os ordenados e não ordenados. Como você viu, este é um processo simples, pelo que não deverá ter grandes problemas apreender a sua lógica.

No próximo artigo, vou discutir como trabalhar com listas de definição quando se utiliza o framework CSS BlueTrip.



5.1 Styling Definição listas com o CSS BlueTrip Framework

Bem-vindo à quinta parte de uma série de sete artigos sobre o framework CSS BlueTrip. Nesta parte, você vai aprender o estilo de listas de definição com BlueTrip e como atribuir o seu padrão "estilo de classes" CSS para um H2 alguns cabeçalhos e H3. Você verá a flexibilidade que lhe permite aplicar estilos diferentes para os elementos da página web de forma rápida e simples.

Recentemente, um framework CSS novo ganhou popularidade considerável com webdesigners. Muitas devido à sua capacidade de estilo marcante. Estas capacidades permitem aos desenvolvedores criar layouts de páginas web consistente muito rapidamente e com menor esforço.

Estamos falando do BlueTrip, uma estrutura impressionante, que afirma reunir em uma única peça de software com os melhores recursos fornecidos por outros dois frameworks, BluePrint e Tripoli. Assim, se você se sentir intrigado e quer saber como começar a usar o BlueTrip CSS para o desenvolvimento de seus sites, então esta série de artigos pode ser o que você precisa.

E agora que você sabe o que esperar desse grupo de tutoriais, é hora de revisar os tópicos que foram abordados na última. Na parte específica da série, eu expliquei como usar os estilos padrão fornecidos pelo BlueTrip para a aparência visual das listas HTML ordenadas e não ordenadas. Foi um processo fácil de entender.

Como você deve ter percebido, porém, o framework CSS BlueTrip vem com muitos padrões CSS e outras classes que permitem facilmente o estilo de outros elementos comuns em HTML, como formulários, tabelas e listas de definição, etc.

Portanto, neste quinto capítulo da série eu vou explicar a definição de estilo de listas com BlueTrip. Além disso, você vai aprender a atribuir as classes CSS thin que você aprendeu nos artigos anteriores para outros cabeçalhos HTML.



5.2 Styling Definição listas com o CSS BlueTrip Framework - Review: lista sem ordem e ordenada

Antes de eu mostrar-lhe como dar uma aparência mais atraente para as listas de definição, utilizando BlueTrip, eu gostaria de reintroduzir um par de exemplos criados no tutorial anterior. Estes exemplos demonstram como executar esta tarefa para as duas listas: ordenada e sem ordem.

Veja como esses exemplos foram desenvolvidos originalmente:

(example on styling unordered lists)



<head>







</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using unordered lists</h1>

</div>






<ul>



<li>List Item 3

<ul>


<li>Sub List Item 2

<ul>




</ul>

</li>

</ul>

</li>

</ul>

</div>




</div>







</div>




</div>




</div>

</div>

</body>

</html>

(example on styling ordered lists)



<head>









</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using ordered lists</h1>

</div>




<ol>



<li>List Item 3

<ol>


<li>Sub List Item 2

<ol>




</ol>

</li>

</ol>

</li>

</ol>



</div>




</div>




</div>




</div>




</div>

</div>

</body>

</html>



Inegavelmente, os dois exemplos de código mostrados acima são extremamente simples de seguir. Estruturam o HTML para listas ordenadas e sem ordem em duas páginas web.

No entanto, o mais importante desses exemplos é a saída que eles produzem, já que eles usam os estilos CSS fornecidos pelo padrão BlueTrip. As imagens seguintes mostram como as listas são exibidas no navegador:

Neste momento espero recordar as listas de estilo HTML com BlueTrip. Na sequencia, demonstraremos como este mesmo processo pode ser realizado por meio de listas de definição.



5.3 Styling Definição listas com o CSS BlueTrip Framework - listas de definição com styling rapidamente BlueTrip

A definição de listas de estilo CSS usando o padrão BlueTrip não difere muito da utilização da lista HTML ordenada e não ordenada. Tudo que é necessário neste caso, é incluir as listas de definição em uma página web; BlueTrip simplesmente faz o resto automaticamente.

Afim de esclarecer a forma como BlueTrip lida com listas, aqui está uma outra amostra de código que incorpora estes elementos em uma página web simples. Abaixo temos outro exemplo :



<head>


<title>Basic example on using BlueTrip (using definition lists)</title>

<link rel="stylesheet" href=".css/screen.css" type="text/css" media="screen, projection">




</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using definition lists</h1>

</div>








<dl>

<dt>Definition list title 1</dt>

<dd>Description list 1</dd>




</dl>

</div>




</div>




</div>




</div>






</div>

</div>

</body>

</html>

Como você pode ver, o arquivo web acima inclui uma lista de definição simples. As coisas realmente interessantes iniciam aqui, se você experimentar este exemplo em seu navegador, então você terá uma saída muito semelhante ao abaixo:



BlueTrip fez seu trabalho, a definição da lista mencionada anteriormente foi fornecida com uma boa aparência. Claro, é sempre possível melhorar os estilos atribuídos a diferentes elementos HTML por padrão do framework, mas agora isso vai ser deixado como lição de casa para você.

Agora que apresentei listas de definição de estilo, é hora de explorar alguns outros recursos fornecidos pelo framework. Com essa idéia em mente, na última seção deste tutorial vou explicar como atribuir as classes CSS que você aprendeu nos tutoriais anteriores da série de H2 e H3 cabeçalhos de HTML.



5.4 Styling Definição listas com o CSS BlueTrip Framework - Styling diferentes cabeçalhos HTML

Em um capítulo anterior da série, expliquei brevemente como atribuir a classe CSS fornecidos pelo BlueTrip a alguns elementos H1. Agora é hora de mostrar-lhe como executar esta tarefa com cabeçalhos H2 e H3 também.

O exemplo de código abaixo faz isso:



<head>


<title>Basic example on using BlueTrip (using h2 and h3 heading levels with fancy class)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using h2 and h3 heading levels with fancy class</h1>

</div>









</div>





</div>





</div>

<div class="span-16"><h2 class="fancy">Level 2 heading</h2>



</div>







</div>

</div>

</body>

</html>

O exemplo de código acima demonstra como atribuir a classe CSS para todos os cabeçalhos H2 e H3 incluídos nos documentos web pertinentes. Desde que o código fala por si, sugiro que você olhe a imagem abaixo, que mostra a saída gerada pelo browser:

Neste ponto, você aprendeu como transformar cabeçalhos H2 e H3 em elementos elegantes usando a classe CSS com BlueTrip. Edite todas as amostras de código criado neste artigo, assim, você pode obter uma base mais sólida em inúmeras funcionalidades oferecidas por este framework CSS popular.




Neste quinto capítulo da série, você aprendeu o estilo de listas de definição com BlueTrip e como atribuir o seu padrão de classes CSS para alguns cabeçalhos H2 e H3. A partir dos exemplos desenvolvidos anteriormente fica claro ver que o framework lhe permite aplicar estilos diferentes para os elementos da página web de forma rápida e simples.

No próximo artigo, vou discutir a forma de atribuir as classes CSS thin e caps revista em artigos anteriores a elementos H2 e H3.



6.1 Mais usos para as Classes CSS Thin e Caps no BlueTrip

Nesta sexta parte de uma série de sete artigos sobre o framework CSS BlueTrip, você vai aprender como atribuir as classes CSS thin e caps para os elementos H2 e H3 de uma página web. O uso dessas classes faz com que os elementos pareçam mais elegantes e visualmente atraente.

Se você é um webdesigner que quer encurtar o tempo necessário para criar os layouts de página utilizada com seus próprios web sites, então você talvez queira dar uma olhada no framework CSS BlueTrip. É uma biblioteca sólida que lhe permitirá criar todos os tipos de layouts atraentes usando apenas algumas classes CSS útil para posicionar elementos em um documento web e dar-lhes um aparência visual elegante.

Naturalmente, se você leu os capítulos anteriores desta série, então agora você tem uma base sólida de como tirar proveito das características mais relevantes oferecidos por BlueTrip. Nesses tutoriais expliquei, não só como criar layouts de página da Web básica com suas classes CSS padrão, mas como estilo de diferentes tipos de listas em HTML de uma forma rápida e fácil.

E por falar em classes CSS o padrão fornecido pelo BlueTrip, você certamente lembra que em um artigo anterior, abordei o uso dos chamados, "thin" e "caps", respectivamente. Neste caso particular, foram atribuídos a todos os elementos H2 incluída em uma página web amostra.

No entanto, também é possível atribuir essas classes para outros elementos de texto HTML da mesma forma sem esforço. Portanto, neste sexto artigo desta série vou explicar como aplicar as classes thin e o caps de cabeçalhos H3, ampliando ainda mais sua experiência na utilização do BlueTrip.

Agora que você sabe o que esperar deste artigo, é hora de ver como transformar o cabeçalho HTML H3 em elementos elegantes, graças à magia da BlueTrip. Vamos começar!



6.2 Mais usos para as Classes CSS Thin e Caps no BlueTrip - Revisão: listas de definição de estilo com BlueTrip

No caso de você não ter lido o artigo anterior, onde discutiram a forma de listas de definição de estilo por meio de estilos CSS padrão dado por BlueTrip. Abaixo, incluí um exemplo que mostra como realizar essa tarefa em alguns passos simples.



<head>


<title>Basic example on using BlueTrip (using definition lists)</title>

<link rel="stylesheet" href=".css/screen.css" type="text/css" media="screen, projection">




</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using definition lists</h1>

</div>








<dl>






</dl>

</div>




</div>




</div>




</div>







</div>

</div>

</body>

</html>

Do exemplo acima, fica claro o quão simples é o estilo de listas de definição usando as classes CSS fornecidos por padrão pelo BlueTrip. Neste caso, o código do arquivo anterior (X)HTML é muito fácil de seguir, assim. vamos prestar atenção à figura seguinte, que mostra a saída correspondente gerado pelo browser:

Bem, agora que você lembrou que a lista de definição de estilo HTML com o framework CSS BlueTrip, é hora de explorar algumas das suas outras características úteis. Na seção seguinte, discutiremos como atribuir as (já familiares) classes CSS thin para os elementos H3 de uma página web básica.



6.3 Mais usos para as Classes CSS Thin e Caps CSS no BlueTrip - Subordinação classes fina CSS para elementos H3

Como já expresso na seção anterior, é possível atribuir a classe CSS thin fornecidos por padrão pelo BlueTrip a qualquer elemento HTML baseado em texto. No tutorial anterior da série, expliquei como usar a classe com cabeçalhos de H2, mas neste caso específico, veja como esse mesmo processo pode ser aplicado a cabeçalhos H3 também.

Basicamente, a amostra de código que realiza esta tarefa é a seguinte:



<head>


<title>Basic example on using BlueTrip (using h2 and h3 heading levels with thin class)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using h2 and h3 heading levels with fancy class</h1>

</div>









</div>





</div>





</div>





</div>







</div>

</div>

</body>

</html>

Como mostrado acima, é extremamente simples transformar elementos H2 e H3 para os mais finos, atribuindo-lhes a classe CSS thin. Além do mais, a imagem a seguir devem lhe dar uma idéia clara de como estes elementos são renderizados no browser depois de ser denominado:

Vimos como é fácil criar um layout de página, através do BlueTrip. Mas há mais para ver. Também é possível converter elementos do texto-base HTML em suas versões de letras maiúsculas, por meio das classe CSS que você aprendeu em um artigo anterior desta série.



Com esta idéia em mente, na próxima seção vou desenvolver um outro exemplo semelhante ao que você acabou de ver, mas desta vez os cabeçalhos H2 e H3 serão estilizados com a classe caps.



6.4 Mais usos para as Classes CSS Thin e Caps CSS no BlueTrip - caps CSS Atribuindo classes aos elementos H2 e H3

Na realidade, transformando os cabeçalhos H2 e H3 em elementos de letras maiúsculas em apenas um local de configuração e atribuir-lhes os estilos da classe CSS BlueTrip, e nada mais. O exemplo a seguir demonstra o uso desta classe com os dois cabeçalhos H2 e H3. Aqui está:



<head>


<title>Basic example on using BlueTrip (using h2 and h3 heading levels with caps class)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using h2 and h3 heading levels with caps class</h1>

</div>










</div>





</div>





</div>





</div>







</div>

</div>

</body>

</html>

A partir da amostra do código acima, verifica-se que o cabeçalho superior H2 e cabeçalhos H3 é um processo simples que pode ser resolvido com um esforço menor.

Considerando que o exemplo anterior é realmente fácil de seguir, você deve olhar para a tela a seguir, que mostra como esses cabeçalhos HTML são exibidos na tela depois de terem sido desenhados com as classes CSS:

Como você deve ter deduzido, é possível, também, maiúsculas para todos os elementos do texto-base de um documento HTML web usando a classe caps. Nesse caso particular, decidi realizar esta tarefa só com cabeçalhos de H2 e H3, mas é possível testá-lo com listas, parágrafos, e assim por diante. As possibilidades são infinitas.

E, finalmente, sentir-se livre para editar todas as amostras de código mostrado neste artigo



para ajudá-lo a construir uma melhor experiência no uso dos estilos mais relevantes que vêm defindos por padrão com o framework CSS BlueTrip. A experiência vai ser educativa e porque não, também divertido!


Neste sexto episódio da série, você aprendeu a atribuir as classes CSS thin e caps fornecidos pelo BlueTrip dos elementos H2 e H3 de uma página web. Como você viu nas figuras complementares que acompanhou cada uma das amostras de código anterior, o uso dessas classes faz com que os elementos pareçam mais elegantes e visualmente atraentes.

Seguindo em frente, no último artigo demonstraremos como trabalhar com três classes úteis que vêm com esse quadro, chamado "sucesso", "alerta" e "erro", respectivamente. Como os nomes sugerem, elas podem ser usadas para informar os utilizadores de uma forma visual limpa e quando alguns desses eventos ocorrem.



7.1 Usando Classes CSS do BlueTrip: Success, Notice e Error

Bem-vindo ao artigo final de uma série sobre o framework CSS BlueTrip. Composto de sete tutoriais abrangentes, esta série mostra as principais classes CSS que vêm junto com BlueTrip através de uma variedade decente de exemplos de código.

Entre os numerosos frameworks CSS disponíveis hoje em dia, BlueTrip é definitivamente um dos mais populares entre os designers de web. Ele vem com um conjunto de características marcantes que permitem aos programadores criar todos os tipos de layouts de páginas web de um modo verdadeiramente fácil. Portanto, se você estiver interessado em aprender como colocar essa biblioteca CSS para trabalhar para você por meio de um guia acessível, então você deve começar lendo este artigo agora.

É hora de revisar os tópicos que foram discutidos no último tutorial. Numa parte da série, expliquei como converter cabeçalhos HTML H2 e H3 em elementos elegantes, atribuindo-lhes as classes CSS thin e caps fornecidos pelo BlueTrip.

Logicamente, este processo foi demonstrado para fins de exemplo, pois você está livre para aplicar essas classes de todos os elementos com base em texto de uma página web, não apenas a alguns cabeçalhos de HTML. É válido ressaltar, porém, que BlueTrip também vem com um conjunto útil de três classes predefinidas, chamada de "sucesso", "advertência" e de "erro", respectivamente, para informar os usuários sobre a ocorrência destes eventos específicos, de forma visual e apelativa.

Na maioria dos casos, essas classes devem ser aplicados para divs, ou para exibir os erros e mensagens de advertência, ou quando um determinado processo foi concluído com êxito. Mas, naturalmente, podem ser ligados a outros elementos HTML como bem disponível.

Em resumo, nesta última parte da série que apresentarei as classes CSS e em como usá-los em casos concretos. Agora, vamos deixar as preliminares e concluir este estudo do framework CSS BlueTrip.



7.2 Usando Classes CSS do BlueTrip: Success, Notice e Error - Resultados de mensagens com sucesso BlueTrip

Como expressei no começo, BlueTrip oferece três classes CSS predefinidas que pode ser utilizado para mostrar os erros, avisos e mensagens de sucesso com facilidade. Primeiro, eu vou criar um exemplo simples que demonstram como trabalhar com o "sucesso" da classe CSS. Neste caso particular, a classe será atribuída a um parágrafo, o exemplo de código que faz isso é o seguinte:



<head>


<title>Basic example on using BlueTrip (using success class)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using success class</h1>

</div>




<p class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,





quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>




<p class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>




<p class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>





</div>








</div>

</div>

</body>

</html>

Como visto no exemplo acima, o "sucesso" da classe CSS tem sido atribuído a alguns parágrafos, que reconhecidamente não é nada espetacular. No entanto, se você der uma olhada na figura a seguir, você terá uma idéia melhor de como esta classe pode ser usado para exibir todos os tipos de mensagens de confirmação:

Como você pode ver, o "sucesso" da classe CSS atribui uma cor de fundo verde para os parágrafos selecionados, indicando aos usuários que qualquer medida tomada por eles tem sido realizado com êxito. Muito provavelmente você vai querer usar outros estilos para mostrar esse tipo de mensagem para os visitantes, mas o padrão de "sucesso" da classe CSS pode valer a pena dar uma olhada.

Agora espero que você tenha aprendido a trabalhar com esta classe CSS útil do BlueTrip, é



hora de dar uma olhada no outro, destinado a ser usado para exibir os alertas e avisos em geral. Essa classe é chamada "aviso", e será analisado em detalhe na seção seguinte.



7.3 Usando Classes CSS do BlueTrip: Success, Notice e Error - Mostrando anúncios e avisos com BlueTrip

Mostrando anúncios e avisos: trabalhar com o aviso de classe CSS

Como o próprio nome indica, o anúncio de classe CSS fornecidos pelo BlueTrip é usado para exibir os anúncios e avisos. É isso aí. Então, qual é a diferença entre esta "classe" de sucesso discutido na seção anterior? Bem, não tão real, uma vez que quando um elemento é denominado com o aviso de "classe", será atribuída uma cor de fundo amarelo.

O exemplo de código abaixo mostra como usar essa classe CSS com alguns parágrafos:



<head>


<title>Basic example on using BlueTrip (using notice class)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using notice class</h1>

</div>








<p class="notice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>





</div>





</div>





</div>







</div>

</div>

</body>

</html>

Se você examinar o exemplo acima, você vai perceber que é praticamente idêntica à que foi criada no segmento anterior, exceto por uma diferença sutil: existem três pontos que foram atribuídos a "notificação" classe CSS.

Logicamente, o exemplo de código em si não vai dizer muito sobre como olhar estes números, mas a imagem que se segue deve dissipar eventuais dúvidas que você possa ter:



Como você pode ver, o anúncio de classe CSS deve ser utilizado para exibir algum tipo de aviso em um site, nos casos apropriados, e pode ser facilmente melhorado, adicionando estilos personalizados também.

Tão longe, tão bom. Agora que você já compreendeu a lógica que está por trás de aplicação das classes CSS de "aviso" para os elementos de um documento web, é hora de analisar outro padrão classe CSS junto ao BlueTrip. Neste caso, estou falando sobre o "erro" de classe, que deve ser usado para exibir mensagens de erro em uma página web.



7.4 Usando Classes CSS do BlueTrip: Success, Notice e Error - Resultados de erros

O último exemplo de código neste artigo será destinada a ilustrar como trabalhar com a classe CSS de "erro" junto ao BlueTrip. Como você pode imaginar, essa classe deve ser utilizada para exibir vários tipos de mensagens de erro, e uma simples demonstração de seu uso é mostrado no exemplo de código abaixo:



<head>


<title>Basic example on using BlueTrip (using error class)</title>





</head>

<body>



<h1 class="caps">BlueTrip CSS Grid example using error class</h1>

</div>




<p class="error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat





nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>




<p class="error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>




<p class="error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>





</div>







</div>

</div>

</body>

</html>

Neste caso, a classe CSS de "erro" foi atribuído a alguns parágrafos para fazê-los se destacarem do resto dos elementos que compõem a página web. Naturalmente, a melhor maneira de entender como essa classe CSS faz o seu negócio é através de uma imagem ilustrativa abaixo:

Como você pode ver acima, cada ponto que tem sido atribuído a classe CSS de "erro", agora tem uma cor de fundo vermelho, o que o torna ideal para a exibição de informações relacionadas a falhas em geral.

E com este último exemplo, estou concluindo o tutorial final desta série sobre as potencialidades do framework CSS BlueTrip. Edite todas as amostras de código incluído neste artigo, para que você possa adquirir mais prática usando esta biblioteca CSS styling muito útil.




Esperemos que toda a experiência tenha sido instrutivo para você, uma vez que este grupo de artigos que foram fornecidos com um guia acessível a dominar as principais características que vêm com o framework CSS BlueTrip.

Tal como acontece com outros frameworks populares, o grande inconveniente do BlueTrip é que ele usa classes CSS que não são semanticamente significativos. Do ponto de vista purista, este é um ponto negativo. Por outro lado, se você precisa reduzir o tempo que leva para criar seus sites, BlueTrip é uma boa opção a considerar.



8 Referências Bibliográficas

1. BlueTrip: http://bluetrip.org/

2. Artigos sobre o framework CSS Bluetrip: http://bluetrip.org/forum/35

http://bluetrip.org/forum/35

http://bluetrip.org/

Apostila_Bluetrip

Documents

ea commodo

duis aute

consectetur

dolore magna

grade de fundo

resultados

h3 heading

voc vai aprender