Pure.CSS Menawarkan Alternatif Menarik untuk Bootstrap

By Blok CC 20 Apr, 2020 Post a Comment

Final product image — What You'll Be Creating

Apa Itu Pure.css?

Sementara Bootstrap's mengambil lebih besar petak web, itu dapat menempatkan sedikit beban kinerja pada situs yang mungkin tidak akan diperlukan untuk proyek Anda berikutnya. Pure.CSS adalah kerangka responsif Yahoo; ini menawarkan alternatif yang minimalis, terdokumentasi dengan baik dan fleksibel.
Dalam tutorial ini, saya akan memperkenalkan Anda ke Pure, "set kecil, modul CSS responsif yang dapat Anda gunakan dalam setiap proyek web." Kita akan meninjau set fitur dan keuntungan dari menggunakan Pure dan kemudian berjalan melalui beberapa contoh dasar penggunaan.
Jika Anda memiliki permintaan apapun di tutorial yang akan datang atau pertanyaan dan komentar pada hari ini, silahkan posting di bawah ini. Anda dapat juga menghubungi saya di twitter @reifman secara langsung.

Memilih Platform

Pure menawarkan semua fitur umum yang Anda butuhkan dalam kerangka desain web standar. Jadi, apakah Anda sedang membangun sebuah tema untuk WordPress atau sebuah situs web kustom Anda sendiri, itu bisa menjadi pilihan yang baik.
Untuk manajer proyek, biasanya penting bahwa proyek-proyek klien dibangun dengan alat-alat standar yang dapat dengan mudah dipahami dan dikelola, dan yang paling penting, adalah mudah untuk merekrut bakat yang datang dengan pengalaman di platform Anda. Bootstrap sempurna untuk ini. Pure tampaknya cukup sederhana bagi saya bahwa itu juga bisa menjadi titik awal yang baik.

Ringkasan Fitur Pure

Berikut adalah ringkasan dari manfaat dan fitur Pure. Yang menyediakan:

grid responsif, yang dapat dikustomisasi
built-in menu vertikal dan horisontal, termasuk menu dropdown
tombol yang bekerja dengan elemen <a> dan <button>
penjajaran form yang fleksibel
style tabel yang umum
tampilan bersih, minimalis yang dapat dengan mudah dikembangkan

Namun, yang paling mengesankan, Pure.css super kecil, hanya 4,5 KB di-minify + di-gzip. Berikut adalah seberapa banyak ruang yang diambil berbagai komponen Pure dalam lingkungan produksi Anda:

Pure juga diuji dan bekerja di IE 8+, Firefox, Chrome, Safari, iOS 6-8, dan Android 4.x.
Dan, Anda masih dapat menggunakannya dengan unsur-unsur Bootstrap, menambahkan mereka di mana Anda perlu. Saya akan menunjukkan contohnya di bawah ini.
Pure dibangun berdasarkan Normalize.css, yang menstandarisasi performa kerangka di seluruh browser. Normalize menyediakan default reset CSS yang:

menjaga default-default yang berguna
menormalkan style untuk berbagai elemen
memperbaiki bug dan inkonsistensi umum pada browser
meningkatkan kegunaan dengan perbaikan yang halus
menjelaskan kode dengan menggunakan komentar rinci

Memulai dengan Pure

Situs web Pure dibangun dengan framework-nya, jadi akan minimalis, kode yang berkembang dengan baik mengarah ke kemudahan navigasi, panduan yang mudah digunakan. Berikut adalah contoh dari menu area bagian kiri Pure yang beraksi:

Anda dapat menambahkan Pure ke halaman Anda melalui CDN Yahoo gratis. Hanya tambahkan elemen <link> berikut ke <head> halaman Anda, sebelum stylesheet proyek Anda:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Untuk menginisialisasi lebar responsif situs web Anda, atur meta tag untuk viewport dari lebar perangkat Anda:

<meta name="viewport" content="width=device-width, initial-scale=1">

Layout

Pada halaman Layouts, Pure menawarkan sebuah sampel download untuk halaman contoh yang berbeda untuk kebutuhan aplikasi umum:

Anda dapat menelusuri dan download salah satu dari mereka yang ingin Anda bereksperimen dengannya atau menambahkannya ke aplikasi Anda. Ini termasuk:

Blog
Email
Galeri foto
Halaman landing
Galeri harga
Menu samping responsif
Menu horizontal-ke-vertikal responsif
Menu horisontal-ke-gulir responsif

Basis Pure

Halaman Basis memberikan latar belakang singkat tentang dasar di bawah kerangka Pure, terutama Normalize.css:

Normalize.CSS adalah file CSS kecil yang enyediakan konsistensi lintas-browser lebih baik dalam style default elemen HTML. Ini adalah alternatif yang modern, HTML5-ready, untuk reset CSS tradisional.

Anda juga dapat memuat Normalize secara terpisah menggunakan CDN Yahoo untuk penggunaan independen:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css">

Dan ada fitur dasar kecil lainnya seperti class untuk memberitahu Pure agar memuat gambar secara responsif berdasarkan viewport:

<img class="pure-img" src="...">

Tapi sekarang, mari kita lihat beberapa contoh layout Pure yang disediakan.

Grid

Grid adalah aspek kunci dari layout situs web yang Pure membuatnya cukup sederhana. Berikut adalah sebuah contoh cepat dari empat-kolom grid Pure pada layar desktop:

Dan di sini adalah bagaimana mengurangi pada viewport ukuran-tablet setengahnya:

Dan akhirnya, satu kolom pada smartphone:

Grid Pure terdiri dari dua jenis class: grids dan unit. Elemen anak dari div grid haruslah div unit. Konten Anda berada di dalam div unit. Class unit dinamai untuk mewakili lebar mereka. Sebagai contoh, pure-u-1-4 memiliki lebar 25%.
Berikut adalah kode untuk responsif dari keempatnya di atas:

<div class="grids-example">

    <div class="pure-g">

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">

        <div class="l-box">

            <h3>Lorem Ipsum</h3>

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

            </p>

        </div>

    </div>

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">

        <div class="l-box">

            <h3>Dolor Sit Amet</h3>

            <p>

                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

            </p>

        </div>

    </div>

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">

        <div class="l-box">

            <h3>Proident laborum</h3>

            <p>

                In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

            </p>

        </div>

    </div>

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">

        <div class="l-box">

            <h3>Praesent consectetur</h3>

            <p>

               Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.

            </p>

        </div>

    </div>

Seperti yang Anda lihat di atas, <div class="pure-g"> mewakili class grid luar. Kemudian, <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> memerintahkan browser untuk menunjukkan satu kolom untuk viewports minimum, setengah kolom untuk medium, dan seperempat kolom untuk lebar besar.
Anda dapat mempelajari lebih lanjut tentang Grid Pure di sini.

Form

Pure memiliki dukungan untuk menyelaraskan field input di dalam form dan styling field-field khusus, seperti:

Form inline
Form yang ditumpuk
Form dua kolom
Form multi-kolom (ditampilkan di atas)
Input yang dikelompokkan
Input yang diperlukan
Input yang dimatikan
Input yang tidak bisa diubah
Input rounded
Kotak centang dan radio

Anda dapat melihat semua ini dijelaskan di sini. Mari kita menjelajahi form dua-kolom, yang Pure mengacu sebagai Aligned Form:

Dengan menggunakan class pure-form-aligned dengan pure-control-group(s), Pure memastikan bahwa setiap rangkaian field diposisikan dengan benar seperti ditunjukkan di atas.

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

        </div>

        <div class="pure-control-group">

            <label for="password">Password</label>

            <input id="password" type="password" placeholder="Password">

        </div>

        <div class="pure-control-group">

            <label for="email">Email Address</label>

            <input id="email" type="email" placeholder="Email Address">

        </div>

        <div class="pure-control-group">

            <label for="foo">Supercalifragilistic Label</label>

            <input id="foo" type="text" placeholder="Enter something here...">

        </div>

        <div class="pure-controls">

            <label for="cb" class="pure-checkbox">

                <input id="cb" type="checkbox"> I've read the terms and conditions

            </label>

            <button type="submit" class="pure-button pure-button-primary">Submit</button>

        </div>

    </fieldset>

</form>

Ini adalah cara yang cukup mudah untuk membangun form yang sangat berguna, dengan peletakan yang baik.

Tabel

Pure menjadikan pembangunan dan pemformatan tabel cukup mudah juga. Berikut adalah contoh tabel bergaris-garis secara horizontal:

PureCSS Example Horizontal Striped Tabled

Anda dapat melihat tabel diatas dikodekan dengan hanya menambahkan class baris pure-table-odd bergantian melalui kode Anda untuk mengubah strip:

<table class="pure-table">

    <thead>

        <tr>

            <th>#</th>

            <th>Make</th>

            <th>Model</th>

            <th>Year</th>

        </tr>

    </thead>

    <tbody>

        <tr class="pure-table-odd">

            <td>1</td>

            <td>Honda</td>

            <td>Accord</td>

            <td>2009</td>

        </tr>

        <tr>

            <td>2</td>

            <td>Toyota</td>

            <td>Camry</td>

            <td>2012</td>

        </tr>

        <tr class="pure-table-odd">

            <td>3</td>

            <td>Hyundai</td>

            <td>Elantra</td>

            <td>2010</td>

        </tr>

        <tr>

            <td>4</td>

            <td>Ford</td>

            <td>Focus</td>

            <td>2008</td>

        </tr>

        <tr class="pure-table-odd">

            <td>5</td>

            <td>Nissan</td>

            <td>Sentra</td>

            <td>2011</td>

        </tr>

        <tr>

            <td>6</td>

            <td>BMW</td>

            <td>M3</td>

            <td>2009</td>

        </tr>

        <tr class="pure-table-odd">

            <td>7</td>

            <td>Honda</td>

            <td>Civic</td>

            <td>2010</td>

        </tr>

        <tr>

            <td>8</td>

            <td>Kia</td>

            <td>Soul</td>

            <td>2010</td>

        </tr>

    </tbody>

</table>

Ada beberapa contoh Tabel lain yang ditampilkan di sini.

<div class="pure-menu pure-menu-horizontal">

    <ul class="pure-menu-list">

        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>

        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">

            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>

            <ul class="pure-menu-children">

                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>

                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>

                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>

            </ul>

        </li>

    </ul>

</div>

Pure menyediakan sampel JavaScript untuk mengimplementasikan fitur aksesibilitas tambahan dalam menu Anda.

Lebih Lanjut

Situs web Pure menyediakan beberapa panduan yang sangat baik untuk membangun kerangka:

Menggunakan Peralatan dengan Pure seperti Bower dan Grunt
Kustomisasi Pure dan menggunakan potongan basis kode mereka sendiri
Memperluas fitur dan class Pure

Dan Anda dapat menjelajahi gabungan potongan Pure dengan Bootstrap dan JavaScript. Jika Anda ingin untuk memulai dengan sedikit Pure dan style minimalis, Anda masih dapat memanfaatkan berbagai fitur Bootstrap, hanya memuat apa yang Anda butuhkan.
Berikut adalah contoh dari modal dialog Bootstrap di atas Pure, yang dapat Anda lihat di halaman ekstensi Pure:

PureCSS Using Pure with Elements of Bootstrap

Penutup

Bootstrap menjadi IBM dalam kerangka web. Itu responsif, adalah standar, dan Anda tidak bisa dipecat karena memilihnya (pada kontrak akhir-akhir ini, kita benar-benar harus memecat seorang pengembang tema karena tidak menerapkan Bootstrap dengan benar). Namun, jika Anda ingin sesuatu yang lebih kecil, lebih cepat dan sederhana, maka check Pure.css.
Jika Anda mencobanya, tolong beritahu saya tahu tentang pengalaman Anda di komentar di bawah ini. Anda juga dapat menghubungi saya di twitter @reifman langsung. Dan, Anda juga dapat menelusuri halaman instruktur Envato Tuts+ saya untuk membaca tutorial saya yang lain.