Forum | tutorial pengembangan web terbaru
 

Pure.CSS tutorial


Pure adalah Cascading Style Sheet (CSS) yang dikembangkan oleh YAHOO . Ini membantu dalam menciptakan lebih cepat, indah, dan responsif website. Hal ini sangat ruang cerdas dan sangat kecil dalam ukuran sebanding dengan 4 KB.


Hadirin

Tutorial ini dimaksudkan untuk para profesional yang ingin mempelajari dasar-dasar Murni dan bagaimana menggunakannya untuk membuat lebih cepat, indah, dan responsif website. Tutorial ini menjelaskan semua konsep dasar Murni.


Prasyarat

Sebelum melanjutkan dengan tutorial ini, Anda harus memiliki pemahaman dasar tentang HTML, CSS, JavaScript, Document Object Model (DOM), dan editor teks. Selain itu, akan membantu jika Anda tahu bagaimana aplikasi berbasis web bekerja.


Mengeksekusi Pure online

Untuk sebagian besar dari contoh yang diberikan dalam tutorial ini, Anda akan menemukan pilihan Try-itu. Gunakan opsi ini untuk menjalankan program Murni Anda di tempat dan menikmati belajar Anda.

Coba contoh berikut menggunakan pilihan Try-hal yang tersedia di pojok kanan atas kotak kode contoh berikut -

<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>