Pure.CSS - Panduan Cepat
Pure adalah Cascading Style Sheet (CSS) yang dikembangkan oleh YAHOO. Ini membantu dalam membuat situs web yang lebih cepat, indah, dan responsif.
Beberapa fiturnya yang menonjol adalah sebagai berikut -
- Desain responsif bawaan
- CSS standar dengan footprint minimal
- Kumpulan modul CSS yang kecil dan responsif
- Gratis untuk digunakan
Desain responsif
Pure memiliki desain responsif bawaan sehingga situs web yang dibuat menggunakan Pure akan mendesain ulang dirinya sendiri sesuai ukuran perangkat. Pure memiliki grid fluid first-mobile 12 kolom yang mendukung kelas responsif untuk ukuran layar kecil, besar, dan sedang.
Kelas murni dibuat sedemikian rupa sehingga situs web dapat menyesuaikan dengan ukuran layar apa pun. Situs web yang dibuat menggunakan Pure sepenuhnya kompatibel dengan PC, tablet, dan perangkat seluler.
CSS standar
Pure hanya menggunakan CSS standar dan sangat mudah dipelajari. Tidak ada ketergantungan pada pustaka JavaScript eksternal seperti jQuery.
Dapat diperluas
Murni memang dengan desain sangat minim dan datar. Ini dirancang dengan mempertimbangkan fakta bahwa jauh lebih mudah untuk menambahkan aturan CSS baru daripada menimpa aturan CSS yang ada. Dengan menambahkan beberapa baris CSS, tampilan Pure dapat disesuaikan untuk bekerja dengan proyek web yang sudah ada.
Ini mendukung bayangan dan warna-warna berani. Warna dan corak tetap seragam di berbagai platform dan perangkat. Dan yang paling penting, ini benar-benar gratis untuk digunakan.
Ada dua cara untuk menggunakan Pure -
Local Installation - Anda dapat mengunduh file pure.css di komputer lokal Anda dan memasukkannya ke dalam kode HTML Anda.
CDN Based Version - Anda dapat menyertakan file pure.css ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN).
Instalasi Lokal
Pergi ke https://purecss.io/start/ untuk mengunduh versi terbaru yang tersedia.
Tempatkan file pure-min.css yang telah didownload di direktori situs Anda, misalnya / css.
Contoh
Anda bisa memasukkan css file dalam file HTML Anda sebagai berikut -
<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>Ini akan menghasilkan hasil sebagai berikut -
Versi Berbasis CDN
Anda dapat menyertakan file pure.css ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN). yui.yahooapis.com menyediakan konten untuk versi terbaru.
Kami menggunakan library versi CDN yui.yahooapis.com di sepanjang tutorial ini.
Contoh
Sekarang mari kita tulis ulang contoh di atas menggunakan pure.css dari 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>Ini akan menghasilkan hasil sebagai berikut -
Pure.CSS memiliki beberapa kelas khusus untuk membuat desain yang responsif.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | .pure-u-* Setel wadah untuk menempati ruang yang diperlukan di perangkat apa pun. |
| 2 | .pure-u-sm-* Menyetel penampung untuk menempati ruang yang diperlukan pada perangkat dengan lebar ≥ 568 piksel. |
| 3 | .pure-u-md-* Menyetel penampung untuk menempati ruang yang diperlukan pada perangkat dengan lebar ≥ 768 piksel. |
| 4 | .pure-u-lg-* Menyetel penampung untuk menempati ruang yang diperlukan pada perangkat dengan lebar ≥ 1024 piksel. |
| 5 | .pure-u-xl-* Menyetel penampung untuk menempati ruang yang diperlukan pada perangkat dengan lebar ≥ 1280px. |
Dalam contoh berikut, kami akan membuat kisi responsif dengan baris yang memiliki empat kolom. Kolom harus menumpuk di layar kecil, harus memiliki lebar: 50% pada layar berukuran sedang, dan harus menempati lebar: 25% pada layar besar.
Ini dilakukan dengan menambahkan .pure-u-1 kelas untuk layar kecil, .pure-u-md-1-2 untuk layar berukuran sedang, dan .pure-u-lg-1-4untuk layar besar. Ubah ukuran halaman untuk melihat respons petak ke ukuran layar.
Contoh
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>Hasil
Verifikasi hasilnya.
Pure.CSS memberikan konsep Grid Murni dengan dua jenis kelas, pure-g, kelas grid dan kelas unit, pure-u-*. Berikut adalah aturan untuk menggunakan Grid Murni.
Lebar Satuan adalah pecahan. Misalnya, pure-u-1-2 mewakili lebar 1/2 atau 50%, pure-u-2-5 mewakili lebar 2/5 atau 40% dan seterusnya.
Turunan Grid Murni (elemen dengan kelas pure-g) harus digunakan pure-u atau pure-u-* nama kelas.
Semua konten harus menjadi bagian dari unit petak agar dapat ditampilkan dengan benar.
Ukuran Unit Grid
Pure Grid hadir dengan ukuran unit ke-5 dan ke-24. Ilustrasi berikut menunjukkan contoh dari beberapa unit yang tersedia, yang dapat dilampirkanpure-ui-. Misalnya, untuk membuat sel dengan lebar 50%, Anda dapat menggunakan gaya csspure-ui-1-2.
5 th Unit Berbasis
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>Hasil
Verifikasi hasilnya.
24 th Unit Berdasarkan
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>Hasil
Verifikasi hasilnya.
Pure.CSS memiliki CSS yang sangat indah dan responsif untuk desain formulir. CSS berikut digunakan -
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | pure-form Merepresentasikan bentuk sebaris yang ringkas. |
| 2 | pure-form-stacked Merepresentasikan formulir yang ditumpuk dengan elemen input di bawah label. Untuk digunakan dengan bentuk murni. |
| 3 | pure-form-aligned Merepresentasikan formulir yang disejajarkan dengan elemen masukan di bawah label. Untuk digunakan dengan bentuk murni. |
| 4 | pure-input-rounded Menampilkan kontrol bentuk dengan sudut membulat |
| 5 | pure-button Mempercantik tombol. |
| 6 | pure-checkbox Mempercantik kotak centang. |
| 7 | pure-radio Mempercantik radio. |
Contoh
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>Hasil
Verifikasi hasilnya.
Pure.CSS memiliki CSS yang sangat bagus dan responsif untuk menyesuaikan tampilan tombol. CSS berikut digunakan -
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | pure-button Merupakan tombol standar. Dapat digunakan untuk memberi gaya pada tautan dan tombol juga. |
| 2 | pure-button-disabled Merupakan tombol yang dinonaktifkan. Untuk digunakan bersama dengan tombol murni. |
| 3 | pure-button-active Merupakan tombol yang ditekan. Untuk digunakan bersama dengan tombol murni. |
Contoh
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>Hasil
Verifikasi hasilnya.
Pure.CSS dapat digunakan untuk menampilkan berbagai jenis tabel menggunakan berbagai gaya di atas tabel murni
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | pure-table Merepresentasikan tabel dasar dengan padding default, batas tepi, dan header yang ditekankan. |
| 2 | pure-table-bordered Menggambar tabel dengan batas melintasi baris. |
| 3 | pure-table-horizontal Menggambar tabel dengan garis horizontal. |
| 4 | pure-table-striped Menampilkan tabel yang dilucuti. |
| 5 | pure-table-odd Jika diterapkan pada setiap tr lainnya, ubah latar belakang baris dan menciptakan efek bergaya zebra. |
Contoh
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>Hasil
Verifikasi hasilnya.
Pure.CSS memberikan opsi untuk menampilkan gambar secara responsif menggunakan gambar murni sebagai kelas utama.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | pure-img Mewakili gambar bergaya dasar tanpa batas apa pun. Gambar tumbuh dan menyusut dengan konten yang mempertahankan rasio yang benar. |
Contoh
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>Hasil
Verifikasi hasilnya.
Pure.CSS mendukung pustaka ikon populer berikut -
- Ikon Font Keren
- Ikon Material Google
- Ikon Bootstrap
Pemakaian
Untuk menggunakan ikon, tempatkan nama ikon di kelas elemen HTML <i>.
Contoh
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>Hasil
Verifikasi hasilnya.