Foro | Los últimos tutoriales de desarrollo web
 

Pure.CSS Tutorial


Pure es una hoja de estilo en cascada (CSS) desarrollado por YAHOO . Esto ayuda en la creación de sitios web más rápido, bellos y sensibles. Es muy inteligente y espacio es muy pequeño en tamaño comparable al de 4 KB.


Audiencia

Este tutorial está dirigido a profesionales que quieran aprender los fundamentos de la Pura y cómo utilizarlo para crear sitios web más rápidos, bellos y sensibles. Este tutorial explica todos los conceptos fundamentales de la Pura.


Requisitos previos

Antes de continuar con este tutorial, usted debe tener un conocimiento básico de HTML, CSS, JavaScript, Document Object Model (DOM), y cualquier editor de texto. Además, le ayudará si usted sabe cómo funcionan las aplicaciones basadas en web.


Ejecutar en línea pura

Para la mayoría de los ejemplos dados en este tutorial, encontrará una opción Try-it. Utilice esta opción para ejecutar sus programas de puros en el lugar y disfrutar de su aprendizaje.

El siguiente ejemplo muestra el uso de la opción Try-a disposición en la esquina superior derecha de la siguiente ventana de código de ejemplo -

<html>
   <head>
      <title>The PURE.CSS Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://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>