Fakultas Ilmu Komputer UI

Commit aec3b648 authored by Tirta Abimanyu Purnomo's avatar Tirta Abimanyu Purnomo
Browse files

Add post about Blueprint, include public in gitignore

parent 4795d261
......@@ -2,3 +2,4 @@ _site
.sass-cache
.jekyll-metadata
Gemfile.lock
public
\ No newline at end of file
---
layout: post
title: Blueprint.js
date: 2019-03-20 23:33:15 +0700
author: abi
---
Inilah cara membuat UI keren sekelas Palantir.
<!--more-->
Blueprint.js adalah React-based UI toolkit buatan Palantir yang bisa kita gunakan secara gratis.
Apa itu UI toolkit? Gampangnya, Blueprint menyediakan component-component yang siap kita gunakan dalam aplikasi React kita. Contohnya: Button, Card, dan lain sebagainya.
Blueprint juga menyediakan styling dalam bentuk SASS yang bisa kita gunakan untuk menyamakan skema warna atau size untuk font.
![blueprint docs](/assets/images/blueprint-docs.png)
Dokumentasi lengkap tersedia di [sini](https://blueprintjs.com/docs/).
Cara kami mengintegrasikan Blueprint di project kami adalah dengan membuat sebuah component baru yang memakai component-component yang sudah disediakan oleh Blueprint.
Contohnya adalah Navbar. Kami membuat component bernama CoolNavbar yang mengembalikan component Navbar milik Blueprint yang sudah disesuaikan isi dan propsnya. Dengan demikian, ketika kami ingin memanggil navbar kami tidak perlu menulis ulang semua isi dan propsnya, sehingga kode kami lebih modular.
![navbar code](/assets/images/navbar-code.png)
Lalu jika stylenya masih belum sesuai, kami menambahkan class baru pada component yang diinginkan dan menuliskan style yang sesuai di sebuah file SASS tersendiri.
Blueprint menyediakan variable-variable yang bisa dipakai di SASS. Yang paling sering saya pakai adalah untuk warna. Dengan memakai warna yang disediakan Blueprint, tampilan kita dijamin akan memiliki skema warna yang enak dipandang.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment