Anjay CSS Framework

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 Disini

Kolom


kolom-1
kolom-2
kolom-3
kolom-4
kolom-5
kolom-6
kolom-7
kolom-8
kolom-9
kolom-10
kolom-11
kolom-12
<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


kolom-4
kolom-2 kolom-dorong-2
kolom-3 kolom-dorong-1
kolom-4 kolom-dorong-4
kolom-4 kolom-dorong-8
<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

Gambar Bulat


Gambar tumpul


Gambar Bingkai


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


Checkbox
Radio button

<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>
  <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>
  <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 &copy; 2017</div>
      </div>
    </div>
  </div>
</footer>