Pure.css Menawarkan Alternatif dari Bootstrap

/in /by

Apa sih Pure.css itu?

Sementara ini Bootstrap telah mengambil alih sebagian besar web besar, dapat menempatkan sedikit beban kinerja di situs yang mungkin tidak diperlukan untuk proyek berikutnya. Pure.css adalah framework responsif Yahoo yang menawarkan tampilan yang minimalis, terdokumentasi dengan baik dan alternatif yang fleksibel.

Dalam tutorial ini, kita akan memperkenalkan kepada Anda tentang Pure “sebuah set kecil modul CSS responsif yang dapat Anda gunakan dalam setiap proyek web”. Kita akan meninjau serangkaian fitur dan keuntungan menggunakan Pure dan kemudian menjalankannya melalui beberapa contoh penggunaan dasar.

Memilih Platform

Pure menawarkan semua fitur-fitur umum yang Anda butuhkan dalam desain framework web standar. Jadi, apakah Anda sedang membangun sebuah tema untuk WordPress atau custom website Anda sendiri, Pure bisa menjadi pilihan yang baik.

Untuk manajer proyek, biasanya penting bahwa proyek-proyek klien dibangun dengan tool standar yang dapat dengan mudah dipahami dan dipelihara, dan yang paling penting, bahwa itu tidak mudah dalam perekrutan bakat yang datang dengan pengalaman dalam platform Anda. Bootstrap sangat cocok digunakan. Pure tampaknya cukup sederhana juga dapat menjadi titik awal yang baik.

Ringkasan Fitur Pure

Berikut adalah ringkasan dari manfaat dan fitur Pure.

  • Dapat dicustom, grid responsif
  • Menu built-in vertikal dan horisontal, termasuk menu drop-down
  • Button yang bekerja dengan elemen <a> dan <button>
  • Form alignment yang fleksibel
  • Style table umum
  • Bersih, tampilan minimalis yang dapat dengan mudah diperluas

Namun yang paling mengagumkan, Pure.css super kecil, hanya 4,5 KB minified+gzip. Berikut berapa banyak ruang komponen yang berbeda dari pure ambil di lingkungan produksi Anda:

module sizes

Pure juga diuji dengan baik dan berjalan di IE 8+, Firefox, Chrome, Safari, iOS 6-8, and Android 4.x.

Dan Anda masih dapat menggunakannya dengan unsur-unsur dari Bootstrap, menambahkannya dimana Anda perlukan. Kami akan menunjukan contoh dibawah ini:

Pure dibangun pada Normalize.css, yang menstandarisasikan kinerja framework ini di browser. Menormalkannya disediakan reset default CSS :

  • Mempertahankan default useful
  • Menormalkan style untuk berbagai elemen
  • Mengoreksi bug dan ketidaksesuaian browser umum
  • Meningkatkan kegunaan dengan perbaikan halus
  • Menjelaskan kode menggunakan komentar secara rinci

Memulai dengan Pure

Website Pure dibangun dengan framework, sehingga minimalis, kodenya berkembang dengan baik membuat sederhana untuk menavigasinya, mudah untuk menggunakan panduan. Berikut ini adalah contoh dari menu kiri Pure dalam action :

get started

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

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

Untuk menginisialisasi lebar responsif dari website Anda, menetapkan tag meta untuk viewport untuk lebar perangkat Anda:

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

Layout

Pada halaman layoutnya, Pure menawarkan pengambilan sample yang bisa didownload misalnya halaman yang berbeda untuk kebutuhan aplikasi umum:

samples (1)

Anda dapat browsing dan download salah satunya yang Anda inginkan untuk bereksperimen dengan menambahkannya pada aplikasi Anda.

  • Blog
  • Email
  • Gallery photo
  • Landing page
  • Gallery harga
  • Responsif side menu
  • Responsif menu horizontal-to-vertikal
  • Responsif menu horizontal-to- Scrollable

Basis pure

Halaman dasar(basis) memberikan background singkat tentang dasar bawahnya framework Pure, terutama Normalize.css :

Normalize.css adalah file CSS kecil yang menyedikan konsistensi lintas browser yang lebih baik dalam styling default elemen HTML. Juga modern, HTML5-ready, alternatif untuk reset CSS tradisional

Anda juga dapat memuat Normalize secara terpisah menggunakan Yahoo CDN 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 untuk memuat gambar responsif dengan viewport :

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

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

Grid

Grid merupakan aspek utama dari layout website Pure membuatnya cukup sederhana. Berikut adalah contoh singkat dari empat kolom box Pure pada layar dekstop:

grid-100

Dan inilah cara memperkecil pada viewport tablet ukuran setengah :

grid-50

Dan terakhir, satu kolom pada smartphone:

grid-25

Pure grid terdiri dari dua jenis class: grid dan unit. Anak elemen dari div grid harus div unit. Konten Anda berjalan didalam satuan div. Class unit diberi nama untuk mewakili lebarnya. Misalnya, pure-u-1-4 memiliki lebar 25%.

Berikut kode untuk keempat responsif diatas :

<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 diatas, <div class=”pure-g”> mewakili class grid luar. Kemudian <div class=”pure-u-1 pure-u-md-1-2 pure-u-lg-1-4″> menginstruksikan browser untuk menunjukan satu kolom untuk viewport minimum, setengah kolom untuk medium dan kolom keempat untuk lebih lebar lagi.

Anda dapat mempelajari lebih lanjut tentang grid Pure disini.

Form

multi-column

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

  • Form inline
  • Form stacked
  • Form dua kolom
  • Form multi kolom
  • Input grouped
  • Input required
  • Input disabled
  • Input readonly
  • Input rounded
  • Checkbox dan radio

Anda dapat melihat semuanya disini. Mari kita menjelajahi dua form kolom, Pure yang mengacu sebagai align form:

two-column

Dengan menggunakan class pure-form-aligned dengan pure-control-group(s), Pure memastikan bahwa setiap set field benar diposisinya seperti yang ditunjukan diatas.

<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 sederhana untuk membangunnya sangat bermanfaat, baik meletakan form.

Table

Membuat pure build dan format table cukup mudah juga. Berikut ini adalah contoh dari table bergaris horisontal:

table striped

Anda dapat melihat kode table diatas hanya dengan menambahkan class baris pure-table-odd bergantioan melalui kode Anda untuk mengubah striping:

<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 sejumlah contoh table lainnya yang ditampilkan disini.

Menu

Menu di Pure juga mudah difasilitasi, termasuk :

  • Menu vertikal
  • Menu horizontal
  • Selected dan disabled item
  • Dropdown
  • Menu vertikal dengan Submenu
  • Scroll horizontal menu
  • Scroll vertikal menu
  • Responsif menu vertikal
  • Responsif menu Horizontal-Scrollable
  • Responsif menu Horizontal-to-Vertical

Lihat semua menu yang diilustrasikan disini. Berikut adalah bagaimana kode Anda jika ingin membuat Dropdown menu:

dropdown menu

Pada dasarnya, hanya pure-menu-horizontal, pure-menu-list dan pure-menu-item pure-menu-has-children pure-menu-allow-hover dan kemudian daftar anak item menu.

<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 memberikan contoh JavaScript untuk menerapkan fitur aksesibilitas tambahan dalam menu Anda.

Info lebih lanjut

Pure website menyediakan beberapa panduan yang sangat baik untuk membangun framework:

Dan Anda dapat menjelajahi kombinasi potongan-potongan dari Pure dengan Bootstrap dan JavaScript. Jika Anda ingin memulai dengan Pure footprint kecil dan style minimalis, Anda masih dapat memanfaatkan berbagai fitur Bootstrap, hanya memuat apa yang Anda butuhkan.

Berikut ini adalah contoh modal dialog Bootstrap dalam Pure, yang dapat Anda lihat pada halaman ekstensi Pure ini:

bootstrap w pure

Semoga bermanfaat

Comments

comments

You might also like
Tutorial Membuat Diamond Grid Menggunakan CSS3
5 Teknik Dalam Menggunakan Flexbox
Cara Membuat Efek Tetap pada Background
Cara Membuat Halaman Full Animated Transition
Tutorial Membuat Dropdown Box Menggunakan CSS3 Animation Dengan Sedikit Trik Checkbox
Parallax Scrolling Tutorial menggunakan CSS
Tutorial CSS Bootstrap 4 (Part1)
Cara Membuat Sticky Navigasi dengan CSS atau jQuery