Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteFront endMengenal Pure CSS Framework, Alternative untuk BootStrap

Mengenal Pure CSS Framework, Alternative untuk BootStrap

-

Last Updated on May 4, 2022 by

Pure CSS adalah framework dari CSS. Pure CSS framework adalah koleksi dari perangkat kecil dari module CSS yang responsif yang mana ia dapat digunakan di berbagai aplikasi web. Pure ini digunakan untuk membuat website dengan cepat, indah, dan responsif sehingga Pure dapat digunakan untuk alternatif Bootstrap.

Pure CSS sendiri dibangun oleh perusahaan besar yakni Yahoo. Pure didasarkan oleh Normalize.css yang mana pustakanya merender elemen secara lebih konsisten dan sejalan dengan standar modern dan juga berfungsi di browser lama.

Module Pure CSS

css-

Pure adalah framework CSS yang berisikan modul di dalamnya. Beberapa modul yang ada di Pure adalah:

1. Base

Seperti yang sudah dijelaskan sebelumnya, semua modul dalam Pure dibangun di atas Normalize.css. Ini adalah base layer atau lapisan dasar Pure untuk mempertahankan beberapa tingkat konsistensi lintas-browser. Anda dapat menarik Normalize.css dengan menambahkan elemen <link> ini di halaman Anda:

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">

Modul ini akan membantu Anda untuk menyembunyikan elemen, membuat gambar yang lebih responsif, dan masih banyak lagi fungsi lainnya. Normalize.css adalah tempat awal yang bagus untuk proyek Anda, tetapi beberapa elemen HTML seperti formulir, tabel, dan menu memerlukan lebih banyak gaya daripada yang disediakan oleh Normalize.

2. Grid

Grid yang ada di Pure merupakan module yang mudah digunakan, dan sangat kuat. Ada beberapa konsep sederhana yang perlu diingat:

– Kelas kisi vs. kelas unit

Pure Grids terdiri dari dua jenis kelas: kelas grid (pure-g) dan kelas unit (pure-u atau pure-u-*)

– Lebar satuan adalah pecahan

Unit memiliki berbagai nama kelas yang mewakili lebarnya. Misalnya, pure-u-1-2 memiliki lebar 50%, sedangkan pure-u-1-5 memiliki lebar 20%.

– Semua elemen anak dari kisi harus berupa unit

Elemen turunan yang terkandung dalam elemen dengan nama kelas pure-g harus berupa unit kisi dengan nama kelas pure-u atau pure-u-*.

– Konten masuk ke dalam unit kisi

Semua konten yang dapat dilihat orang perlu dimasukkan ke dalam unit kisi. Ini memastikan bahwa konten akan ditampilkan dengan benar.

Artikel Terkait  Tips Belajar Bahasa Pemrograman Ruby | Yuk Tingkatkan Skill Coding Anda

3. Forms

Jika Anda ingin membuat form di Pure dengan membuat inline form maka tambahkan classname ‘pure-form’ ke elemen <form> elemen. Ada beberapa jenis form yang ada di Pure yaitu:

– Compact inline form

–  Stacked Form

– Aligned Form

– Multi Column Form

4. Layout

Pure dibuat dengan tujuan agar dapat digunakan di setiap proyek web. Untuk menunjukkan ini, kami telah membuat beberapa layout atau tata letak umum yang memanfaatkan Pure. Tata letak ini responsif dan tidak memerlukan JavaScript (kecuali untuk interaksi menu tertentu).

Anda dapat melihat layout dalam Pure di link ini: https://purecss.io/layouts/

5. Tables Menus

Ada beberapa menu yang ada di Pure framework CSS yaitu:

– Vertical Menu

Menu vertikal secara default. Gaya default minimal dan pemilih dengan spesifikasi rendah membuatnya mudah untuk disesuaikan. Secara default, item menu mengambil 100% dari lebar wadahnya, jadi Anda mungkin ingin membatasi lebar menu atau mengatur menu ke display:inline-block.

– Horizontal Menu

Jika Anda ingin membuat menu horizontal dan tambahkan class name ‘pure-menu-horizontal’.

– Vertical Menu dengan Submenu

Konstruksi yang sama yang digunakan untuk membuat dropdown juga berfungsi di menu vertikal. Anda mungkin membuat nested submenu, tetapi perlu diingat bahwa menu yang kompleks dapat menghadirkan tantangan kegunaan di layar kecil.

– Scrollable Vertical Menu

Untuk membuat menu vertikal yang dapat digulir, batasi ketinggian menu Anda, lalu tambahkan class name ‘pure-menu-scrollable’ Item menu dapat digulir atau dijentikkan. Submenu tidak didukung.

– Scrollable Horizontal Menu

Untuk membuat menu horizontal yang dapat digulir, tambahkan class name ‘pure-menu-scrollable’. Ketika tidak ada cukup ruang, item menu dapat digulir atau dijentikkan. Menu dropdown tidak didukung. Jika Anda ingin pengguliran berbasis momentum, kami sarankan menggunakan perpustakaan JS seperti scrollbooster untuk menambahkan efek seperti itu.

6. Button

Dalam GUI (Graphical User Interfaces), tombol adalah area kecil yang digariskan dalam kotak dialog yang dapat digunakan untuk memilih opsi atau perintah dengan mengkliknya. Daftar berbagai jenis Button yang ada di Pure:

– Default Button

– Disabled Button

– Active Button

– Primary Button

– Customized Button

– Different Types of Button

– Button with Icon

– Button Group

Fitur-Fitur Penting yang ada di Pure CSS

Beberapa fitur dalam Pure Framework CSS yang harus Anda ketahui adalah sebegai berikut:

  1. Pure adalah kumpulan modul CSS responsif kecil.
  2. Gratis untuk digunakan.
  3. Bagi Anda para blogger atau pemilik website, Pure akan cocok karena memiliki optimasi SEO tingkat lanjut.
  4. Sangat mudah digunakan. Anda dapat menggunakannya secara langsung tanpa menginstalnya.
  5. Pure memiliki desain responsif bawaan.
  6. Pure adalah CSS standar dengan footprint minimal. Artinya, sangat kecil. Seluruh rangkaian modul masuk pada 4.0KB* yang diperkecil dan di-gzip.
  7. Pure.CSS terdiri dari beberapa elemen umum bawaan seperti kisi, formulir, tombol, tabel, paginator, dan menu Dropdown CSS.
  8. Pure.CSS mendukung bayangan dan warna berani. Warna dan corak tetap seragam di berbagai platform dan perangkat.
Artikel Terkait  Angular Telah Merilis Angular Versi 12, Apa Saja yang Baru?

Pure.CSS memiliki fitur responsif bawaan. Fitur itu dibuat sedemikian rupa sehingga dapat mendesain ulang sendiri sesuai dengan ukuran perangkat. Pure memiliki fluid grid pertama seluler 12 kolom internal yang mendukung kelas responsif untuk ukuran layar kecil, besar, dan sedang. Jadi, situs web yang menggunakan Pure sepenuhnya kompatibel dengan PC, tablet, dan perangkat seluler.

Kunci Kueri Media CSS Pengaplikasian Classname
none none always .pure-u-*
sm @media screen and (min-width: 35.5em) ? 568px .pure-u-sm-*
md @media screen and (min-width: 48em) ? 768px .pure-u-md-*
lg @media screen and (min-width: 64em) ? 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) ? 1280px .pure-u-xl-*

 

Artikel Terkait  Cara Mengecek Website Down serta Kemungkinan Penyebabnya

Memulai dengan Pure.CSS

Jika Anda ingin bekerja dengan Pure Anda dapat menambahkan Pure ke laman Anda dengan free unpkg CDN. Tambahkan elemen link ke <head> laman Anda sebelum stylesheets projek Anda seperti di bawah ini:

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384 Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">

Cukup mudah bukan menggunakannya? Pure.CSS sangat mudah dipelajari karena menggunakan CSS standar. Pure juga tidak tergantung pada perpustakaan JavaScript eksternal seperti jQuery.

Pure.CSS memiliki desain yang sangat minim dan datar. Angka ini pun tergolong sangat kecil sehingga seluruh rangkaian modul dapat diperkecil dan di-zip dalam 4.0 KB.

Ini dirancang sedemikian rupa sehingga pengguna dapat dengan mudah menambahkan aturan CSS baru daripada menimpa aturan CSS yang ada. Anda dapat dengan mudah menyesuaikan proyek Anda dengan menambahkan beberapa baris CSS. Selamat mencoba Pure.CSS. Jangan lupa kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya