Pure.CSS - Guia rápido

Pure é uma folha de estilo em cascata (CSS) desenvolvida por YAHOO. Ajuda na criação de sites mais rápidos, bonitos e responsivos.

Algumas de suas características mais importantes são as seguintes -

  • Design responsivo embutido
  • CSS padrão com pegada mínima
  • Conjunto de módulos CSS pequenos e responsivos
  • Livre para usar

Design Responsivo

O Pure tem um design responsivo embutido de forma que o site criado com o Pure se redesenhe de acordo com o tamanho do dispositivo. Pure tem uma grade de fluido móvel de 12 colunas que oferece suporte a classes responsivas para tamanhos de tela pequenos, grandes e médios.

As classes puras são criadas de forma que o site possa caber em qualquer tamanho de tela. Os sites criados com o Pure são totalmente compatíveis com PCs, tablets e dispositivos móveis.

CSS padrão

Pure usa CSS padrão apenas e é muito fácil de aprender. Não há dependência de nenhuma biblioteca JavaScript externa, como jQuery.

Extensível

Pure é por design muito minimalista e plano. Ele foi projetado considerando o fato de que é muito mais fácil adicionar novas regras CSS do que substituir as regras CSS existentes. Ao adicionar algumas linhas de CSS, a aparência do Pure pode ser personalizada para funcionar com um projeto da web existente.

Suporta sombras e cores fortes. As cores e tons permanecem uniformes em várias plataformas e dispositivos. E o mais importante de tudo, é de uso totalmente gratuito.

Existem duas maneiras de usar o Pure -

  • Local Installation - Você pode baixar o arquivo pure.css em sua máquina local e incluí-lo em seu código HTML.

  • CDN Based Version - Você pode incluir o arquivo pure.css em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

  • Vamos para https://purecss.io/start/ para baixar a versão mais recente disponível.

  • Coloque o arquivo pure-min.css baixado em um diretório do seu site, por exemplo, / css.

Exemplo

Você pode incluir o css arquivo em seu arquivo HTML da seguinte forma -

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
	  
   </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Versão baseada em CDN

Você pode incluir o arquivo pure.css em seu código HTML diretamente da Content Delivery Network (CDN). yui.yahooapis.com fornece conteúdo para a versão mais recente.

Estamos usando a versão yui.yahooapis.com CDN da biblioteca em todo este tutorial.

Exemplo

Agora vamos reescrever o exemplo acima usando pure.css do PureCSS.io CDN.

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
   </head>
  
   <body>
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3"><p>First Column</p></div>
            <div class = "pure-u-1-3"><p>Second Column</p></div>
            <div class = "pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Pure.CSS tem várias classes especiais para criar um design responsivo.

Sr. Não. Nome e descrição da classe
1

.pure-u-*

Define o contêiner para ocupar o espaço necessário em qualquer dispositivo.

2

.pure-u-sm-*

Define o contêiner para ocupar o espaço necessário em um dispositivo com largura ≥ 568 px.

3

.pure-u-md-*

Define o contêiner para ocupar o espaço necessário em um dispositivo com largura ≥ 768px.

4

.pure-u-lg-*

Define o contêiner para ocupar o espaço necessário em um dispositivo com largura ≥ 1024px.

5

.pure-u-xl-*

Define o contêiner para ocupar o espaço necessário em um dispositivo com largura ≥ 1280px.

No exemplo a seguir, vamos criar uma grade responsiva com uma linha com quatro colunas. As colunas devem ser empilhadas em telas pequenas, devem ocupar largura: 50% em telas de tamanho médio e devem ocupar largura: 25% em telas grandes.

Isso é feito adicionando .pure-u-1 aula para telas pequenas, .pure-u-md-1-2 para telas de tamanho médio, e .pure-u-lg-1-4para telas grandes. Redimensione a página para ver a resposta da grade ao tamanho da tela.

Exemplo

purecss_responsive_design.htm

<html>
   <head>
      <title>The PURE.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;			
         }	 
      </style>
   </head>
   <body> 
   
      <div class = "grids-example">       	  
         <div class = "pure-g">
            <div class = "pure-u-1-1">
               <div class = "graybox">
                  <p>These four columns should stack on small screens, 
                  should take up width: 50% on medium-sized screens, and should 
                  take up width: 25% on large screens.</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>First Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Second Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Third Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>Fourth Column</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1">
               <div class = "graybox">
                   <p>This column is to occupy the complete space of a row.</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-2-5">
               <div class = "graybox">
                  <p>This column is to occupy the two-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-3-5">
               <div class = "graybox">
                  <p>This column is to occupy the three-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>   
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 1: This column is to occupy the one-third of the
                  space of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 2: This column is to occupy the one-third of the space 
                     of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 3: This column is to occupy the one-third of the space of a 
                     row on all devices.</p>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

Resultado

Verifique o resultado.

Pure.CSS fornece o conceito de Pure Grid com dois tipos de classes, pure-g, uma classe de grade e classes de unidade, pure-u-*. A seguir estão as regras para usar grades puras.

  • As larguras das unidades estão em frações. Por exemplo, pure-u-1-2 representa 1/2 ou 50% da largura, pure-u-2-5 representa 2/5 ou 40% da largura e assim por diante.

  • Filhos de Pure Grid (elemento com classe pure-g) devem usar pure-u ou pure-u-* nomes de classe.

  • Todo o conteúdo deve fazer parte de uma unidade de grade para ser renderizado corretamente.

Tamanhos de unidade de grade

Pure Grid vem com tamanhos de unidade de 5º e 24º. As ilustrações a seguir mostram os exemplos de algumas das unidades disponíveis, que podem ser anexadas apure-ui-. Por exemplo, para criar uma célula de 50% de largura, você pode usar um estilo csspure-ui-1-2.

5 th unidades baseadas

purecss_5th_based.htm

<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class="grids-example">       	  
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">2-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-2-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">3-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-3-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">4-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-4-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

Resultado

Verifique o resultado.

24 th unidades baseadas

purecss_24th_based.htm

<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class = "grids-example">       	  
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-24</div>
            <div class = "grid-unit-details pure-u-1">
			      <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-12</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-12"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">2-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-2-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">3-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-3-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-8</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-8"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">4-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-4-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-6</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-6"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">5-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-5-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-4</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-4"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">6-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-6-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">7-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-7-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-3</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-3"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">22-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-22-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">23-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-23-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1</div>
            <div class ="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">24-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-24-24"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

Resultado

Verifique o resultado.

Pure.CSS tem um CSS muito bonito e responsivo para designs de formulários. São usados ​​os seguintes CSS -

Sr. Não. Nome e descrição da classe
1

pure-form

Representa um formulário interno compacto.

2

pure-form-stacked

Representa um formulário empilhado com elementos de entrada abaixo dos rótulos. Para ser usado com a forma pura.

3

pure-form-aligned

Representa um formulário alinhado com elementos de entrada abaixo dos rótulos. Para ser usado com a forma pura.

4

pure-input-rounded

Exibe um controle de formulário com cantos arredondados

5

pure-button

Embeleza um botão.

6

pure-checkbox

Embeleza uma caixa de seleção.

7

pure-radio

Embeleza um rádio.

Exemplo

purecss_forms.htm

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <form class = "pure-form pure-form-aligned">
         <fieldset>
            <div class = "pure-control-group">      
               <label for = "name">Username</label>
               <input id = "name" type = "text" placeholder = "Username" required>
            </div>
			
            <div class = "pure-control-group"> 
               <label for = "email">Email</label>
               <input id = "email" type = "text" placeholder = "Email Address" required>       
            </div>
			
            <div class = "pure-control-group">   
               <label for = "comments">Comments</label>
               <input id = "comments" type="text" placeholder = "Comments">       
            </div>
			
            <div class = "pure-controls">
               <label  for = "married" class = "pure-checkbox">
                  <input id = "married" type = "checkbox" checked = "checked">
                  Married
               </label>
               <br>
			   
               <label  for = "single" class = "pure-checkbox">
                  <input id = "single" type = "checkbox">
                  Single
               </label>
               <br>
			   
               <label for = "dontknow" class = "pure-checkbox">
                  <input id = "dontknow" type = "checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
			
            <div class = "pure-controls">
               <label for = "male" class = "pure-radio">
                  <input id = "male" type = "radio" name = "gender" value = "male" checked>
                  Male
               </label>
               <br>
			   
               <label for = "female" class= "pure-radio">
                  <input id = "female" type = "radio" name = "gender" value = "female">
                  Female
               </label>
               <br>
			   
               <label for = "dontknow1" class = "pure-radio">
                  <input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
                  Don't know (Disabled)
               </label>
               <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
			   
            </div>
         </fieldset>
      </form>       
   </body>
</html>

Resultado

Verifique o resultado.

Pure.CSS tem um CSS muito bonito e responsivo para personalizar a aparência de um botão. São usados ​​os seguintes CSS -

Sr. Não. Nome e descrição da classe
1

pure-button

Representa um botão padrão. Pode ser usado para estilizar um link e um botão também.

2

pure-button-disabled

Representa um botão desativado. Para ser usado junto com o botão puro.

3

pure-button-active

Representa um botão pressionado. Para ser usado junto com o botão puro.

Exemplo

purecss_buttons.htm

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <style>
         .success,
         .error,
         .warning,
         .secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
         }
         
         .success {
            background: rgb(28, 184, 65); /* green */
         }

         .error {
            background: rgb(202, 60, 60); /* maroon */
         }

         .warning {
            background: rgb(223, 117, 20); /* orange */
         }

         .secondary {
            background: rgb(66, 184, 221); /* light blue */
         }

         .xsmall {
            font-size: 70%;
         }

         .small {
            font-size: 85%;
         }

         .large {
            font-size: 110%;
         }

         .xlarge {
            font-size: 125%;
         }
      </style>	  	  
   </head>
	
   <body> 
      <h2>Standard Buttons</h2>
      <button class = "pure-button">Click Me</button>
      <button class = "pure-button pure-button-active">Click Me</button>
      <button class = "pure-button pure-button-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class = "pure-button">Link</a>
      <a class = "pure-button pure-button-active">Link</a>
      <a class = "pure-button pure-button-disabled">Disabled Link</a>

      <h2>Primary Button</h2>
      <a class = "pure-button pure-button-primary">Submit</a>    

      <h2>Customized button</h2>
      <button class = "pure-button success">Success</button>
      <button class = "pure-button error">Error</button>
      <button class = "pure-button warning">Warning</button>
      <button class = "pure-button secondary">Secondary</button>
	  
      <h2>Different Sized button</h2>
      <button class = "pure-button xsmall">Extra Small</button>
      <button class = "pure-button small">Small</button>
      <button class = "pure-button large">Large</button>
      <button class = "pure-button xlarge">Extra Large</button>
   </body>
</html>

Resultado

Verifique o resultado.

Pure.CSS pode ser usado para exibir diferentes tipos de tabelas usando vários estilos sobre pure-table

Sr. Não. Nome e descrição da classe
1

pure-table

Representa uma tabela básica com qualquer preenchimento padrão, borda e cabeçalho enfatizado.

2

pure-table-bordered

Desenha uma tabela com uma borda entre as linhas.

3

pure-table-horizontal

Desenha uma tabela com linhas horizontais.

4

pure-table-striped

Exibe uma tabela reduzida.

5

pure-table-odd

Se aplicado a cada dois tr, altera o fundo da linha e cria um efeito de estilo zebra.

Exemplo

purecss_tables.htm

<html>
   <head>
      <title>The PURE.CSS Tables</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
	  
      <table class = "pure-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Bordered Table</h3>
      <table class="pure-table pure-table-bordered">
         <thead>
            <tr><
               th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Table with Horizontal Borders</h3>
      <table class="pure-table pure-table-horizontal">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Stripped Table</h3>
      <table class = "pure-table pure-table-striped">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Resultado

Verifique o resultado.

Pure.CSS fornece opções para exibir as imagens de maneira responsiva usando pure-image como a classe principal.

Sr. Não. Nome e descrição da classe
1

pure-img

Representa uma imagem com estilo básico sem nenhuma borda. A imagem aumenta e diminui com o conteúdo mantendo a proporção correta.

Exemplo

purecss_images.htm

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width=device-width, initial-scale=1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Images Demo</h2>
      <hr/> 
      <div class = "pure-g">	
	  
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
      </div>
   </body>
</html>

Resultado

Verifique o resultado.

Pure.CSS suporta as seguintes bibliotecas de ícones populares -

  • Ícones impressionantes de fontes
  • Ícones de materiais do Google
  • Ícones de bootstrap

Uso

Para usar um ícone, coloque o nome do ícone na classe de um elemento HTML <i>.

Exemplo

purecss_icons.htm

<html>
   <head>
   
      <title>The PURE.CSS Icons</title>
	  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
	  
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	  
      <link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
	  
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	  
      <style>  
         .xsmall {
            font-size: 70%;
         }
         .small {
            font-size: 85%;
         }
         .large {
            font-size: 110%;
         }
         .xlarge {
            font-size: 125%;
         }
      </style>
	  
   </head>
   
   <body> 
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud xsmall"></i>
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud large"></i>
      <i class = "fa fa-cloud xlarge"></i>
	  
      <h3>Google Material Design Icon Demo</h3>      
      <i class = "material-icons xsmall">cloud</i>	
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons large">cloud</i>
      <i class = "material-icons xlarge">cloud</i>
      <i class = "material-icons">cloud</i>
	  
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud xsmall"></i>
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>
      <i class = "glyphicon glyphicon-cloud xlarge"></i>
	  
      <h3>Button with Icon Demo</h3>
      <button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button>
      <a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a>
   </body>
</html>

Resultado

Verifique o resultado.