Perkenalan

Anjay CSS Framework adalah sebuah framework CSS untuk membangun sebuah web dengan menggunakan class bahasa Indonesia yang di harapkan dapat membantu mempermudah proses pembangunan sebuah web dan cocok digunakan untuk pemula yang ingin belajar CSS dengan menggunakan bahasa Indonesia.
Instalasi
Caranya cukup mudah, anda hanya perlu untuk mengkloning repositori di bawah ini:
git clone https://github.com/arsieaziz/AnjayCSSFramework.git web-aku && cd web-aku && rm -rf .git
Setelah anda mengkloning repositori, jalankan perintah di bawah ini :
npm install && npm start
Selanjutnya anda akan masuk ke halaman dokumentasi di browser untuk mempelajari tentang Anjay CSS Framework
***
Referensi file CSS langsung ke web anda:
<link rel="stylesheet" href="node_modules/getanjay/dist/css/anjay.css"/>
***
Apabila anda sebelumnya sudah memiliki proyek namun ingin menambahkan Anjay CSS Framework, anda bisa menginstall melalui cara di bawah ini :
- Install via NPM
npm install getanjay --save
- Install via Bower
bower install getanjay --save
Untuk contoh penggunaan klik di bawah ini
Klik DisiniKolom
<div class="wadah"> <div class="baris"> <div class="kolom-1">kolom-1</div> <div class="kolom-2">kolom-2</div> <div class="kolom-3">kolom-3</div> <div class="kolom-4">kolom-4</div> <div class="kolom-5">kolom-5</div> <div class="kolom-6">kolom-6</div> <div class="kolom-7">kolom-7</div> <div class="kolom-8">kolom-8</div> <div class="kolom-9">kolom-9</div> <div class="kolom-10">kolom-10</div> <div class="kolom-11">kolom-11</div> <div class="kolom-12">kolom-12</div> </div> </div>
Kolom Dorong
<div class="wadah"> <div class="baris"> <div class="kolom-4">kolom-4</div> <div class="kolom-2 kolom-dorong-2">kolom-2 kolom-dorong-2</div> <div class="kolom-3 kolom-dorong-1">kolom-3 kolom-dorong-1</div> </div> <div class="baris"> <div class="kolom-4 kolom-dorong-4">kolom-4 kolom-dorong-4</div> </div> <div class="baris"> <div class="kolom-4 kolom-dorong-8">kolom-4 kolom-dorong-8</div> </div> </div>
Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Perataan Teks
Rata Kiri
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem inventore quaerat earum delectus laudantium, aliquid minima a voluptas sed, nisi deserunt voluptates! Magni id provident nihil impedit dolorem dignissimos incidunt eius laborum tempore est.
Rata Kanan
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptas deleniti minima suscipit, libero, commodi dicta aperiam.
Rata Tengah
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptas deleniti minima suscipit, libero, commodi dicta aperiam, exercitationem id vel architecto odit omnis aspernatur magni voluptatibus!
Rata Kanan Kiri
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptas deleniti minima suscipit, libero, commodi dicta aperiam, exercitationem id vel architecto odit omnis aspernatur magni voluptatibus!.
<h4 class="kiri">Rata Kiri</h4> <p class="kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem inventore quaerat earum delectus laudantium, aliquid minima a voluptas sed, nisi deserunt voluptates! Magni id provident nihil impedit dolorem dignissimos incidunt eius laborum tempore est. <h4 class="kanan">Rata Kanan</h4> <p class="kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptas deleniti minima suscipit, libero, commodi dicta aperiam.</p> <h4 class="tengah">Rata Tengah</h4> <p class="tengah">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptas deleniti minima suscipit, libero, commodi dicta aperiam, exercitationem id vel architecto odit omnis aspernatur magni voluptatibus!</p> <h4 class="rata">Rata Kanan Kiri</h4> <p class="rata">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptas deleniti minima suscipit, libero, commodi dicta aperiam, exercitationem id vel architecto odit omnis aspernatur magni voluptatibus!.</p>
Gambar
Gambar Responsif

<img src="https://dummyimage.com/600x400/0099ff/ffffff.png" class="gambar-responsif" alt=""> <div class="baris"> <div class="kolom-4 padding"> <img src="https://dummyimage.com/300x300/0099ff/ffffff.png" class="gambar-responsif gambar-bulat" alt=""> </div> <div class="kolom-4 padding"> <img src="https://dummyimage.com/300x300/0099ff/ffffff.png" class="gambar-responsif gambar-tumpul" alt=""> </div> <div class="kolom-4 padding"> <img src="https://dummyimage.com/300x300/0099ff/ffffff.png" class="gambar-responsif gambar-bingkai" alt=""> </div> </div>
Tabel Dasar
Nomor | Nama Depan | Nama Belakang | Alamat |
---|---|---|---|
1 | Paijo | Sehat | Surabaya |
2 | Junaidi | Jainudin | Wates |
<table> <thead> <tr> <th>Nomor</th> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Alamat</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Paijo</td> <td>Sehat</td> <td>Surabaya</td> </tr> <tr> <td>2</td> <td>Junaidi</td> <td>Jainudin</td> <td>Wates</td> </tr> </tbody> </table>
Tabel Zebra
Nomor | Nama Depan | Nama Belakang | Alamat |
---|---|---|---|
1 | Paijo | Sehat | Surabaya |
2 | Junaidi | Jainudin | Wates |
3 | Jubaidah | Rojak | Nagrek |
4 | Jupri | Slalom | Lamongan |
<table class="tabel-zebra"> <thead> <tr> <th>Nomor</th> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Alamat</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Paijo</td> <td>Sehat</td> <td>Surabaya</td> </tr> <tr> <td>2</td> <td>Junaidi</td> <td>Jainudin</td> <td>Wates</td> </tr> <tr> <td>3</td> <td>Jubaidah</td> <td>Rojak</td> <td>Nagrek</td> </tr> <tr> <td>4</td> <td>Jupri</td> <td>Slalom</td> <td>Lamongan</td> </tr> </tbody> </table>
Tabel Bergaris
Nomor | Nama Depan | Nama Belakang | Alamat |
---|---|---|---|
1 | Paijo | Sehat | Surabaya |
2 | Junaidi | Jainudin | Wates |
3 | Jubaidah | Rojak | Nagrek |
4 | Jupri | Slalom | Lamongan |
<table class="tabel-bergaris"> <thead> <tr> <th>Nomor</th> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Alamat</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Paijo</td> <td>Sehat</td> <td>Surabaya</td> </tr> <tr> <td>2</td> <td>Junaidi</td> <td>Jainudin</td> <td>Wates</td> </tr> <tr> <td>3</td> <td>Jubaidah</td> <td>Rojak</td> <td>Nagrek</td> </tr> <tr> <td>4</td> <td>Jupri</td> <td>Slalom</td> <td>Lamongan</td> </tr> </tbody> </table>
Tabel Fokus
Nomor | Nama Depan | Nama Belakang | Alamat |
---|---|---|---|
1 | Paijo | Sehat | Surabaya |
2 | Junaidi | Jainudin | Wates |
3 | Jubaidah | Rojak | Nagrek |
4 | Jupri | Slalom | Lamongan |
<table class="tabel-fokus"> <thead> <tr> <th>Nomor</th> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Alamat</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Paijo</td> <td>Sehat</td> <td>Surabaya</td> </tr> <tr> <td>2</td> <td>Junaidi</td> <td>Jainudin</td> <td>Wates</td> </tr> <tr> <td>3</td> <td>Jubaidah</td> <td>Rojak</td> <td>Nagrek</td> </tr> <tr> <td>4</td> <td>Jupri</td> <td>Slalom</td> <td>Lamongan</td> </tr> </tbody> </table>
Tabel Responsive
Nomor | Nama Depan | Nama Belakang | Alamat | Nomor Handphone | |
---|---|---|---|---|---|
1 | Paijo | Sehat | Surabaya | paijosangatsehat@gmail.com | 08156586685 |
2 | Junaidi | Jainudin | Wates | junaidibukanjainudin@gmail.com | 0816579658965 |
3 | Jubaidah | Rojak | Nagrek | jubaidah@gmail.com | 081236589658 |
4 | Jupri | Slalom | Lamongan | jupridrifter@gmail.com | 081366985984 |
<div class="tabel-responsif"> <table> <thead> <tr> <th>Nomor</th> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Alamat</th> <th>Email</th> <th>Nomor Handphone</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Paijo</td> <td>Sehat</td> <td>Surabaya</td> <td>paijosangatsehat@gmail.com</td> <td>08156586685</td> </tr> <tr> <td>2</td> <td>Junaidi</td> <td>Jainudin</td> <td>Wates</td> <td>junaidibukanjainudin@gmail.com</td> <td>0816579658965</td> </tr> <tr> <td>3</td> <td>Jubaidah</td> <td>Rojak</td> <td>Nagrek</td> <td>jubaidah@gmail.com</td> <td>081236589658</td> </tr> <tr> <td>4</td> <td>Jupri</td> <td>Slalom</td> <td>Lamongan</td> <td>jupridrifter@gmail.com</td> <td>081366985984</td> </tr> </tbody> </table> </div>
Formulir
<form> <div class="grup"> <label for="input">Input</label> <input type="text" id="input" class="kendali-form" placeholder="Input"> </div> <div class="grup"> <label for="">Select</label> <select name="" id="" class="kendali-form"> <option value="">-- Pilih --</option> <option value="">1</option> <option value="">2</option> </select> </div> <div class="grup"> <label for="textarea">Textarea</label> <textarea name="" id="textarea" rows="3" class="kendali-form" placeholder="Textarea"></textarea> </div> <div class="grup"> <label for="file">File input</label> <input type="file" id="file" class="kendali-form"> </div> <div class="grup"> <label for="checkbox">Check Box</label> <input type="checkbox" id="checkbox" class="kendali-form">Checkbox </label> </div> <div class="grup"> <label>Radio Button</label> <input type="radio" id="radio" class="kendali-form">Radio button </label> </div> </form>
Formulir baris
<form class="baris"> <div class="grup"> <label for="input">Input</label> <input type="text" id="input" class="kendali-form" placeholder="Input"> </div> <div class="grup"> <label for="">Select</label> <select name="" id="" class="kendali-form"> <option value="">-- Pilih --</option> <option value="">1</option> <option value="">2</option> </select> </div> <br> <input type="email" placeholder="E-mail"> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> </form>
Warna
Merah | Merah Jambu | Ungu | Nila | Biru |
---|---|---|---|---|
Background Merah | Background Merah Jambu | Background Ungu | Background Nila | Background Biru |
Tosca | Hijau | Kuning | Oranye | Cokelat |
---|---|---|---|---|
Background Tosca | Background Hijau | Background Kuning | Background Oranye | Background Cokelat |
Abu Abu | Hitam | putih |
---|---|---|
Background Abu Abu | Background Hitam | Background Putih |
<div class="merah">Merah</div> <div class="merahjambu">Merah Jambu</div> <div class="ungu">Ungu</div> <div class="nila">Nila</div> <div class="biru">Biru</div> <div class="tosca">Tosca</div> <div class="hijau">Hijau</div> <div class="kuning">Kuning</div> <div class="oranye">Oranye</div> <div class="cokelat">Cokelat</div> <div class="abuabu">Abu Abu</div> <div class="hitam">Hitam</div> <div class="putih">putih</div>
<div class="bg-merah">Background Merah</div> <div class="bg-merahjambu">Background Merah Jambu</div> <div class="bg-ungu">Background Ungu</div> <div class="bg-nila">Background Nila</div> <div class="bg-biru">Background Biru</div> <div class="bg-tosca">Background Tosca</div> <div class="bg-hijau">Background Hijau</div> <div class="bg-kuning">Background Kuning</div> <div class="bg-oranye">Background Oranye</div> <div class="bg-cokelat">Background Cokelat</div> <div class="bg-abuabu">Background Abu Abu</div> <div class="bg-hitam">Background Hitam</div> <div class="bg-putih">Background putih</div>
Tombol
Tipe Tombol
Tombol Kecil
Tombol Sedang
Tombol Besar
<button class="tmb-standar">Standar</button> <button class="tmb-utama">Utama</button> <button class="tmb-sukses">Sukses</button> <button class="tmb-peringatan">Peringatan</button> <button class="tmb-bahaya">Bahaya</button> <button class="tmb-standar tmb-kecil">Tombol Kecil</button> <button class="tmb-utama tmb-kecil">Tombol Kecil</button> <button class="tmb-standar tmb-sedang">Tombol Sedang</button> <button class="tmb-utama tmb-sedang">Tombol Sedang</button> <button class="tmb-standar tmb-besar">Tombol Besar</button> <button class="tmb-utama tmb-besar">Tombol Besar</button>
Header
<header> <div class="baris"> <div class="kolom-2 logo"> <img src="http://lofrev.net/wp-content/photos/2017/03/bower_logo_1.png" alt=""> </div> <div class="kolom-10 menu"> <ul> <a href=""><li>Home</li></a> <a href=""><li>About</li></a> <a href=""><li>Downloads</li></a> </ul> </div> </div> </header>
Footer
<footer> <div class="wadah"> <div class="baris"> <div class="kolom-6"> <h4 class="putih">Isi Footer</h4> <p class="putih">Kamu bisa edit ini dengan apa saja yang kamu suka!</p> </div> <div class="kolom-6 tengah"> <h4 class="putih">Links</h4> <ul class="putih"> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> </div> </div> </div> <div class="keaslian"> <div class="wadah"> <div class="baris"> <div class="kolom-6">Pertunjukan Hari Esok</div> <div class="kolom-6 kanan">Transisi © 2017</div> </div> </div> </div> </footer>