Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS
Code

Pure.CSS Menawarkan Alternatif Menarik untuk Bootstrap

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

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:

PureCSS Module Sizes

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:

Purecss - Get Started

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

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

Layout

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

PureCSS Sample layouts

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:

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

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:

PureCSS Grids Full Width

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

PureCSS Grids Half Width

Dan akhirnya, satu kolom pada smartphone:

PureCSS Grids Quarter Width

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:

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

PureCSS Example Multi Column 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:

PureCSS Example Two Column 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.

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:

Ada beberapa contoh Tabel lain yang ditampilkan di sini.

Menu

Menu di Pure juga mudah difasilitasi, termasuk:

  • Menu Vertikal
  • Menu Horizontal
  • Item yang Dipilih dan Dimatikan
  • Dropdown
  • Menu Vertikal dengan Submenu
  • Menu Horizontal Digulir
  • Menu Vertikal Digulir
  • Menu Vertikal Responsif
  • Menu Horisontal-Digulir Responsif
  • Menu Horizontal-ke-Vertikal Responsif

Lihat semua menu yang diilustrasikan di sini. Berikut adalah bagaimana Anda meng-kode menu Dropdown:

PureCSS Example Dropdown Menu

Pada dasarnya, ini adalah hanyalah pure-menu-horizontal dari pure-menu-list dan pure-menu-item pure-menu-has-children pure-menu-allow-hover dan kemudian daftar item menu anak:

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:

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.

Link terkait

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.