Introduction
No more custom CSS - All in one CSS framework for developing clean, professional & responsive web app.
Official Website: technoartcss.com
Current Version: 0.9.9
What is Technoart
Technoart is all in one CSS framework for developing clean, professional & responsive web app. Technoart helps you slice any web mockup without any custom CSS. Ofcourse, there will be some cases that still need custom CSS.
Our goals are not only making Technoart simple, reliable, and has no dependencies. We also eager to help you using Technoart easily with Definitive Guide. What is the point of great tool without no one being able to use it.
And with Starter Template, we hope you are inspired and can use Technoart for real web development.
Installation
There are several methods to install Technoart:
- Include it via jsDelivr CDN Technoart CSS & Technoart JS
- Download it via this link
- Clone the repo:
git clone https://github.com/technoprodev/technoart.git - Via package manager npm:
npm install technoart - Via package manager yarn:
yarn add technoart - Via package manager composer:
composer require technoprodev/technoart
Minimum Setup
Although there are several methods to install Technoart, the easiest way to try Technoart is to create an index.html file and include Technoart via CDN:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
<!-- technoart css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/technoart@0.0.9/dist/css/technoart.min.css">
<title>Title</title>
</head>
<body>
<h1>Your smile makes me happy.</h1>
<!-- technoart js -->
<script src="https://cdn.jsdelivr.net/npm/technoart@0.0.9/dist/js/technoart.min.js"></script>
</body>
</html>
Note: We do not recommend that beginners start with package manager like npm, especially if you are not yet familiar with Node.js-based build tools.
Assets Structure
Within the download you will find the following directories and files:
technoart/
├── css/
│ ├── technoart.css
│ ├── technoart.css.map
│ ├── technoart.min.css
│ └── technoart.min.css.map
└── js/
├── technoart.js
├── technoart.js.map
├── technoart.min.js
└── technoart.min.js.map
Grid or Box
Without grid, secara default komponen div hanya dapat disusun secara menumpuk dari atas kebawah (vertikal). Agar komponen div dapat disusun secara menumpuk dari kiri ke kanan (horizontal) maka gunakan grid. Masing-masing tumpukan grid dapat diatur lebarnya, yakni sepanjang x/12 dari lebar containernya. Grid pada Technoart disebut juga sebagai box.
Cara menggunakan box sederhana, tambahkan .box-[val] pada masing-masing komponen dan bungkus didalam container .box, contoh:
.box-[val] memiliki 12 pilihan value, yaitu:
| Option | Description |
|---|---|
| .box-1 | memiliki panjang 1/12 dari lebar containernya. |
| .box-2 | memiliki panjang 2/12 dari lebar containernya. |
| .box-3 | memiliki panjang 3/12 dari lebar containernya. |
| .box-4 | memiliki panjang 4/12 dari lebar containernya. |
| .box-5 | memiliki panjang 5/12 dari lebar containernya. |
| .box-6 | memiliki panjang 6/12 dari lebar containernya. |
| .box-7 | memiliki panjang 7/12 dari lebar containernya. |
| .box-8 | memiliki panjang 8/12 dari lebar containernya. |
| .box-9 | memiliki panjang 9/12 dari lebar containernya. |
| .box-10 | memiliki panjang 10/12 dari lebar containernya. |
| .box-11 | memiliki panjang 11/12 dari lebar containernya. |
| .box-12 | memiliki panjang 12/12 dari lebar containernya. |
Adjust Box Size on Multiple Device Size
Komponen box dengan ukuran 4/12 terlihat bagus di layar desktop, namun bisa saja terlihat kecil dan tidak cocok jika dilihat di layar mobile. Agar komponen box terlihat bagus dan sesuai di layar mobile, tambahkan .box-break-[val] pada container .box. Contoh: .box.box-break-sm yang artinya akan mengubah komponen .box-4 yang awalnya memiliki ukuran 4/12 di setiap layar akan berubah menjadi 12/12 di layar small 768px kebawah. Contoh:
.box-break-[val] memiliki 20 pilihan value, yaitu:
| Option | Description |
|---|---|
| .box-break-xs | mengubah setiap ukuran komponen box menjadi 12/12 pada layar xs 576px kebawah. |
| .box-break-xs-6 | mengubah setiap ukuran komponen box menjadi 6/12 pada layar xs 576px kebawah. |
| .box-break-xs-4 | mengubah setiap ukuran komponen box menjadi 4/12 pada layar xs 576px kebawah. |
| .box-break-xs-3 | mengubah setiap ukuran komponen box menjadi 3/12 pada layar xs 576px kebawah. |
| .box-break-xs-2 | mengubah setiap ukuran komponen box menjadi 2/12 pada layar xs 576px kebawah. |
| --- | --- |
| .box-break-sm | mengubah setiap ukuran komponen box menjadi 12/12 pada layar sm 768px kebawah. |
| .box-break-sm-6 | mengubah setiap ukuran komponen box menjadi 6/12 pada layar sm 768px kebawah. |
| .box-break-sm-4 | mengubah setiap ukuran komponen box menjadi 4/12 pada layar sm 768px kebawah. |
| .box-break-sm-3 | mengubah setiap ukuran komponen box menjadi 3/12 pada layar sm 768px kebawah. |
| .box-break-sm-2 | mengubah setiap ukuran komponen box menjadi 2/12 pada layar sm 768px kebawah. |
| --- | --- |
| .box-break-md | mengubah setiap ukuran komponen box menjadi 12/12 pada layar md 992px kebawah. |
| .box-break-md-6 | mengubah setiap ukuran komponen box menjadi 6/12 pada layar md 992px kebawah. |
| .box-break-md-4 | mengubah setiap ukuran komponen box menjadi 4/12 pada layar md 992px kebawah. |
| .box-break-md-3 | mengubah setiap ukuran komponen box menjadi 3/12 pada layar md 992px kebawah. |
| .box-break-md-2 | mengubah setiap ukuran komponen box menjadi 2/12 pada layar md 992px kebawah. |
| --- | --- |
| .box-break-lg | mengubah setiap ukuran komponen box menjadi 12/12 pada layar lg 1200px kebawah. |
| .box-break-lg-6 | mengubah setiap ukuran komponen box menjadi 6/12 pada layar lg 1200px kebawah. |
| .box-break-lg-4 | mengubah setiap ukuran komponen box menjadi 4/12 pada layar lg 1200px kebawah. |
| .box-break-lg-3 | mengubah setiap ukuran komponen box menjadi 3/12 pada layar lg 1200px kebawah. |
| .box-break-lg-2 | mengubah setiap ukuran komponen box menjadi 2/12 pada layar lg 1200px kebawah. |
Adjust Box Space
Secara default, box yang ditumpuk akan berhimpitan satu dengan yang lainnya. Namun ada beberapa komponen yang membutuhkan jarak dengan komponen disebelahnya seperti card. Untuk memberi jarak antar box, tambahkan .box-space-[val] pada container .box.
.box-space-[val] memiliki 4 pilihan value, yaitu:
| Option | Description |
|---|---|
| .box-space-xs | memberi jakar 0.25% antar box. |
| .box-space-sm | memberi jakar 0.5% antar box. |
| .box-space-md | memberi jakar 1% antar box. |
| .box-space-lg | memberi jakar 2% antar box. |
Dengan kreatifitas Anda, Box Space yang dikombinasikan dengan helper lain dapat digunakan untuk membuat card, galery, post items, news items, dll.
The Disadvantage of OCD
How Reading Affects The Brain Works
How Video Games Boost Your Creativity
Sliced Box
Use this option to obtain sliced box effect.
| Option | Description |
|---|---|
| .box-sliced | make every box intersect each other neatly. |
Make Every Box Component Has Equal Height
Secara default, tinggi masing-masing komponen box berbeda-beda tergantung kontennya.
Dengan .box-equal yang ditambah pada container .box, membuat komponen-komponen box memiliki tinggi yang sama. Terlihat lebih rapi.
Box Gutter
Secara default, masing-masing box tidak memiliki gutter. Tanpa gutter, content box berada sejauh 15px dari ujung kiri dan sejauh 15px dari ujung kanan. Hal itu terjadi karena secara default setiap box memiliki padding kiri dan kanan sebesar 15px.
This is not box component. Notice left position as a original position while below box content has 15px distance from original position
Gunanya gutter adalah menempatkan content box dimulai mentok dari ujung kiri hingga ujung kanan, sementara masing-masing komponen tetap memiliki padding horizontal 15px.
Use this option to give each box a gutter.
| Option | Description |
|---|---|
| .box-gutter | make each box has a gutter. |
With box-gutter below box content will align with this original position.
Space
Untuk memberi jarak gunakan padding dan margin.
Gunakan .margin-[val] untuk memberi jarak antar komponen atau jarak antara komponen dengan parentnya.
Gunakan .padding-[val] untuk memberi jarak antara border komponen dengan konten komponen.
.margin-[val] memiliki 7 kelompok pilihan, yaitu:
| Option | Description |
|---|---|
| .margin-[number] | memberi margin top, right, bottom dan left sepanjang [number] pixel. |
| .margin-y-[number] | memberi margin top dan bottom sepanjang [number] pixel. |
| .margin-x-[number] | memberi margin right dan left sepanjang [number] pixel. |
| .margin-top-[number] | memberi margin top sepanjang [number] pixel. |
| .margin-right-[number] | memberi margin right sepanjang [number] pixel. |
| .margin-bottom-[number] | memberi margin bottom sepanjang [number] pixel. |
| .margin-left-[number] | memberi margin left sepanjang [number] pixel. |
Sama seperti margin, .padding-[val] memiliki 7 kelompok pilihan, yaitu:
| Option | Description |
|---|---|
| .padding-[number] | memberi padding top, right, bottom dan left sepanjang [number] pixel. |
| .padding-y-[number] | memberi padding top dan bottom sepanjang [number] pixel. |
| .padding-x-[number] | memberi padding right dan left sepanjang [number] pixel. |
| .padding-top-[number] | memberi padding top sepanjang [number] pixel. |
| .padding-right-[number] | memberi padding right sepanjang [number] pixel. |
| .padding-bottom-[number] | memberi padding bottom sepanjang [number] pixel. |
| .padding-left-[number] | memberi padding left sepanjang [number] pixel. |
Dimana [number] memiliki banyak pilihan value, yaitu:
- 0
- 1
- 2
- 3
- 4
- 5
- 15
- 10
- 20
- 30
- 40
- 50
- 60
- 70
- 80
- 90
- 100
- 150
- 200
- 250
- 300
Contoh: .padding-y-30 memberi jarak padding top dan bottom 30 pixel.
Margin juga memiliki opsi lain, yaitu :
| Option | Description |
|---|---|
| .margin-x-auto | jika komponen memiliki jarak horizontal dengan parent / sibling, maka komponen akan diposisikan ditengah-tengah secara horizontal. |
Space in Mobile Device
Terkadang jarak margin atau padding yang kita tentukan tidak terlihat sesuai di mobile device. Contoh: .margin-top-100 terlihat cocok pada layar desktop, tapi ketika dilihat pada layar mobile, margin top 100px terlihat terlalu berlebihan. Maka dari itu, gunakan .m-margin-[val] atau .m-padding-[val] untuk mengatur jarak pada mobile device.
Misalnya: sebuah elemen dengan kelas .margin-top-100 akan memiliki margin top 100px pada semua layar device. Tapi jika ditambah kelas menjadi .margin-top-100.m-margin-top-50, maka komponen tersebut tetap memiliki margin top 100px pada layar desktop (layar dengan width diatas 767px), namun memiliki margin top 50px pada layar mobile (layar dengan width dibawah 768px).
.m-margin-[val] memiliki 7 kelompok pilihan, yaitu:
| Option | Description |
|---|---|
| .m-margin-[number] | memberi margin top, right, bottom dan left sepanjang [number] pixel. |
| .m-margin-y-[number] | memberi margin top dan bottom sepanjang [number] pixel. |
| .m-margin-x-[number] | memberi margin right dan left sepanjang [number] pixel. |
| .m-margin-top-[number] | memberi margin top sepanjang [number] pixel. |
| .m-margin-right-[number] | memberi margin right sepanjang [number] pixel. |
| .m-margin-bottom-[number] | memberi margin bottom sepanjang [number] pixel. |
| .m-margin-left-[number] | memberi margin left sepanjang [number] pixel. |
Sama seperti margin, .m-padding-[val] memiliki 7 kelompok pilihan, yaitu:
| Option | Description |
|---|---|
| .m-padding-[number] | memberi padding top, right, bottom dan left sepanjang [number] pixel. |
| .m-padding-y-[number] | memberi padding top dan bottom sepanjang [number] pixel. |
| .m-padding-x-[number] | memberi padding right dan left sepanjang [number] pixel. |
| .m-padding-top-[number] | memberi padding top sepanjang [number] pixel. |
| .m-padding-right-[number] | memberi padding right sepanjang [number] pixel. |
| .m-padding-bottom-[number] | memberi padding bottom sepanjang [number] pixel. |
| .m-padding-left-[number] | memberi padding left sepanjang [number] pixel. |
Dimana [number] memiliki banyak pilihan value, yaitu:
- 0
- 1
- 2
- 3
- 4
- 5
- 15
- 10
- 20
- 30
- 40
- 50
- 60
- 70
- 80
- 90
- 100
- 150
- 200
- 250
- 300
Margin juga memiliki opsi lain, yaitu :
| Option | Description |
|---|---|
| .m-margin-x-auto | jika komponen memiliki jarak horizontal dengan parent / sibling, maka komponen akan diposisikan ditengah-tengah secara horizontal. |
Border Width
Berbeda dengan margin dan padding, border tidak memiliki banyak pilihan space, yang tersedia hanya 2 pilihan, yaitu:
| Option | Description |
|---|---|
| .border-thin | memberi thin border (2 px). |
| .border-thick | memberi thick border (5 px). |
Text Color
Warna text pada Technoart dibagi menjadi 2 bagian, yaitu grayscale text dan full color text.
Grayscale Text
Grayscale text merupakan text dengan warna hitam putih. Grayscale text cocok dipakai untuk kalimat agar nyaman dibaca oleh user. Grayscale text memiliki 9 pilihan warna, yaitu:
| Option | Code |
|---|---|
.text-lightest |
Copy
|
.text-lighter |
Copy
|
.text-light |
Copy
|
--- |
Copy
|
.text-grayest |
Copy
|
.text-grayer |
Copy
|
.text-gray |
Copy
|
--- |
Copy
|
.text-darkest |
Copy
|
.text-darker |
Copy
|
.text-dark |
Copy
|
Warna text default yang digunakan Technoart adalah .text-grayest.
Hover Grayscale Text
Dengan hover, style grayscale text hanya akan terlihat jika kita menggeser pointer ke komponen. Sama seperti grayscale text, hover grayscale text memiliki 9 pilihan warna, yaitu:
| Option | Code |
|---|---|
.hover-text-lightest |
Copy
|
.hover-text-lighter |
Copy
|
.hover-text-light |
Copy
|
--- |
Copy
|
.hover-text-grayest |
Copy
|
.hover-text-grayer |
Copy
|
.hover-text-gray |
Copy
|
--- |
Copy
|
.hover-text-darkest |
Copy
|
.hover-text-darker |
Copy
|
.hover-text-dark |
Copy
|
Full Color Text
Full color text merupakan text yang bewarna warni. Full color text cocok dipakai untuk kalimat yang menarik perhaian user (branding). Bisa juga dipakai untuk memberi makna semantik (seperti error, warning, info, dll). Full color text memiliki 36 pilihan warna, yaitu:
| Option | Code |
|---|---|
.text-light-red |
Copy
|
.text-light-orange |
Copy
|
.text-light-yellow |
Copy
|
.text-light-chartreuse |
Copy
|
.text-light-green |
Copy
|
.text-light-spring |
Copy
|
.text-light-cyan |
Copy
|
.text-light-azure |
Copy
|
.text-light-blue |
Copy
|
.text-light-violet |
Copy
|
.text-light-magenta |
Copy
|
.text-light-rose |
Copy
|
--- |
Copy
|
.text-red |
Copy
|
.text-orange |
Copy
|
.text-yellow |
Copy
|
.text-chartreuse |
Copy
|
.text-green |
Copy
|
.text-spring |
Copy
|
.text-cyan |
Copy
|
.text-azure |
Copy
|
.text-blue |
Copy
|
.text-violet |
Copy
|
.text-magenta |
Copy
|
.text-rose |
Copy
|
--- |
Copy
|
.text-dark-red |
Copy
|
.text-dark-orange |
Copy
|
.text-dark-yellow |
Copy
|
.text-dark-chartreuse |
Copy
|
.text-dark-green |
Copy
|
.text-dark-spring |
Copy
|
.text-dark-cyan |
Copy
|
.text-dark-azure |
Copy
|
.text-dark-blue |
Copy
|
.text-dark-violet |
Copy
|
.text-dark-magenta |
Copy
|
.text-dark-rose |
Copy
|
Hover Full Color Text
Dengan hover, style full color text hanya akan terlihat jika kita menggeser pointer ke komponen. Sama seperti full color text, hover full color text memiliki 36 pilihan warna, yaitu:
| Option | Code |
|---|---|
.hover-text-light-red |
Copy
|
.hover-text-light-orange |
Copy
|
.hover-text-light-yellow |
Copy
|
.hover-text-light-chartreuse |
Copy
|
.hover-text-light-green |
Copy
|
.hover-text-light-spring |
Copy
|
.hover-text-light-cyan |
Copy
|
.hover-text-light-azure |
Copy
|
.hover-text-light-blue |
Copy
|
.hover-text-light-violet |
Copy
|
.hover-text-light-magenta |
Copy
|
.hover-text-light-rose |
Copy
|
--- |
Copy
|
.hover-text-red |
Copy
|
.hover-text-orange |
Copy
|
.hover-text-yellow |
Copy
|
.hover-text-chartreuse |
Copy
|
.hover-text-green |
Copy
|
.hover-text-spring |
Copy
|
.hover-text-cyan |
Copy
|
.hover-text-azure |
Copy
|
.hover-text-blue |
Copy
|
.hover-text-violet |
Copy
|
.hover-text-magenta |
Copy
|
.hover-text-rose |
Copy
|
--- |
Copy
|
.hover-text-dark-red |
Copy
|
.hover-text-dark-orange |
Copy
|
.hover-text-dark-yellow |
Copy
|
.hover-text-dark-chartreuse |
Copy
|
.hover-text-dark-green |
Copy
|
.hover-text-dark-spring |
Copy
|
.hover-text-dark-cyan |
Copy
|
.hover-text-dark-azure |
Copy
|
.hover-text-dark-blue |
Copy
|
.hover-text-dark-violet |
Copy
|
.hover-text-dark-magenta |
Copy
|
.hover-text-dark-rose |
Copy
|
Background Color
Warna background pada Technoart dibagi menjadi 2 bagian, yaitu grayscale background dan full color background.
Grayscale Background
Grayscale background merupakan background dengan warna hitam putih. Grayscale background cocok dipakai untuk kalimat agar nyaman dibaca oleh user. Grayscale background memiliki 9 pilihan warna, yaitu:
| Option | Code |
|---|---|
.bg-lightest |
Copy
|
.bg-lighter |
Copy
|
.bg-light |
Copy
|
--- |
Copy
|
.bg-grayest |
Copy
|
.bg-grayer |
Copy
|
.bg-gray |
Copy
|
--- |
Copy
|
.bg-darkest |
Copy
|
.bg-darker |
Copy
|
.bg-dark |
Copy
|
Hover Grayscale Background
Dengan hover, style grayscale background hanya akan terlihat jika kita menggeser pointer ke komponen. Sama seperti grayscale background, hover grayscale background memiliki 9 pilihan warna, yaitu:
| Option | Code |
|---|---|
.hover-bg-lightest |
Copy
|
.hover-bg-lighter |
Copy
|
.hover-bg-light |
Copy
|
--- |
Copy
|
.hover-bg-grayest |
Copy
|
.hover-bg-grayer |
Copy
|
.hover-bg-gray |
Copy
|
--- |
Copy
|
.hover-bg-darkest |
Copy
|
.hover-bg-darker |
Copy
|
.hover-bg-dark |
Copy
|
Full Color Background
Full color background merupakan background yang bewarna warni. Full color background cocok dipakai untuk kalimat yang menarik perhaian user (branding). Bisa juga dipakai untuk memberi makna semantik (seperti error, warning, info, dll). Full color background memiliki 36 pilihan warna, yaitu:
| Option | Code |
|---|---|
.bg-light-red |
Copy
|
.bg-light-orange |
Copy
|
.bg-light-yellow |
Copy
|
.bg-light-chartreuse |
Copy
|
.bg-light-green |
Copy
|
.bg-light-spring |
Copy
|
.bg-light-cyan |
Copy
|
.bg-light-azure |
Copy
|
.bg-light-blue |
Copy
|
.bg-light-violet |
Copy
|
.bg-light-magenta |
Copy
|
.bg-light-rose |
Copy
|
--- |
Copy
|
.bg-red |
Copy
|
.bg-orange |
Copy
|
.bg-yellow |
Copy
|
.bg-chartreuse |
Copy
|
.bg-green |
Copy
|
.bg-spring |
Copy
|
.bg-cyan |
Copy
|
.bg-azure |
Copy
|
.bg-blue |
Copy
|
.bg-violet |
Copy
|
.bg-magenta |
Copy
|
.bg-rose |
Copy
|
--- |
Copy
|
.bg-dark-red |
Copy
|
.bg-dark-orange |
Copy
|
.bg-dark-yellow |
Copy
|
.bg-dark-chartreuse |
Copy
|
.bg-dark-green |
Copy
|
.bg-dark-spring |
Copy
|
.bg-dark-cyan |
Copy
|
.bg-dark-azure |
Copy
|
.bg-dark-blue |
Copy
|
.bg-dark-violet |
Copy
|
.bg-dark-magenta |
Copy
|
.bg-dark-rose |
Copy
|
Hover Full Color Background
Dengan hover, style full color background hanya akan terlihat jika kita menggeser pointer ke komponen. Sama seperti full color background, hover full color background memiliki 36 pilihan warna, yaitu:
| Option | Code |
|---|---|
.hover-bg-light-red |
Copy
|
.hover-bg-light-orange |
Copy
|
.hover-bg-light-yellow |
Copy
|
.hover-bg-light-chartreuse |
Copy
|
.hover-bg-light-green |
Copy
|
.hover-bg-light-spring |
Copy
|
.hover-bg-light-cyan |
Copy
|
.hover-bg-light-azure |
Copy
|
.hover-bg-light-blue |
Copy
|
.hover-bg-light-violet |
Copy
|
.hover-bg-light-magenta |
Copy
|
.hover-bg-light-rose |
Copy
|
--- |
Copy
|
.hover-bg-red |
Copy
|
.hover-bg-orange |
Copy
|
.hover-bg-yellow |
Copy
|
.hover-bg-chartreuse |
Copy
|
.hover-bg-green |
Copy
|
.hover-bg-spring |
Copy
|
.hover-bg-cyan |
Copy
|
.hover-bg-azure |
Copy
|
.hover-bg-blue |
Copy
|
.hover-bg-violet |
Copy
|
.hover-bg-magenta |
Copy
|
.hover-bg-rose |
Copy
|
--- |
Copy
|
.hover-bg-dark-red |
Copy
|
.hover-bg-dark-orange |
Copy
|
.hover-bg-dark-yellow |
Copy
|
.hover-bg-dark-chartreuse |
Copy
|
.hover-bg-dark-green |
Copy
|
.hover-bg-dark-spring |
Copy
|
.hover-bg-dark-cyan |
Copy
|
.hover-bg-dark-azure |
Copy
|
.hover-bg-dark-blue |
Copy
|
.hover-bg-dark-violet |
Copy
|
.hover-bg-dark-magenta |
Copy
|
.hover-bg-dark-rose |
Copy
|
Percentage Background Color
Komponen ini memberi tambahan warna background sekian persen pada elemen. Contoh: .blue-30 yang artinya memberi tambahan warna blue 30% pada background element.
| Option | Code |
|---|---|
.lighter-10 |
Copy
|
.lighter-20 |
Copy
|
.lighter-30 |
Copy
|
.lighter-40 |
Copy
|
.lighter-50 |
Copy
|
.darker-10 |
Copy
|
.darker-20 |
Copy
|
.darker-30 |
Copy
|
.darker-40 |
Copy
|
.darker-50 |
Copy
|
.red-10 |
Copy
|
.red-20 |
Copy
|
.red-30 |
Copy
|
.red-40 |
Copy
|
.red-50 |
Copy
|
.orange-10 |
Copy
|
.orange-20 |
Copy
|
.orange-30 |
Copy
|
.orange-40 |
Copy
|
.orange-50 |
Copy
|
.yellow-10 |
Copy
|
.yellow-20 |
Copy
|
.yellow-30 |
Copy
|
.yellow-40 |
Copy
|
.yellow-50 |
Copy
|
.chartreuse-10 |
Copy
|
.chartreuse-20 |
Copy
|
.chartreuse-30 |
Copy
|
.chartreuse-40 |
Copy
|
.chartreuse-50 |
Copy
|
.green-10 |
Copy
|
.green-20 |
Copy
|
.green-30 |
Copy
|
.green-40 |
Copy
|
.green-50 |
Copy
|
.spring-10 |
Copy
|
.spring-20 |
Copy
|
.spring-30 |
Copy
|
.spring-40 |
Copy
|
.spring-50 |
Copy
|
.cyan-10 |
Copy
|
.cyan-20 |
Copy
|
.cyan-30 |
Copy
|
.cyan-40 |
Copy
|
.cyan-50 |
Copy
|
.azure-10 |
Copy
|
.azure-20 |
Copy
|
.azure-30 |
Copy
|
.azure-40 |
Copy
|
.azure-50 |
Copy
|
.blue-10 |
Copy
|
.blue-20 |
Copy
|
.blue-30 |
Copy
|
.blue-40 |
Copy
|
.blue-50 |
Copy
|
.violet-10 |
Copy
|
.violet-20 |
Copy
|
.violet-30 |
Copy
|
.violet-40 |
Copy
|
.violet-50 |
Copy
|
.magenta-10 |
Copy
|
.magenta-20 |
Copy
|
.magenta-30 |
Copy
|
.magenta-40 |
Copy
|
.magenta-50 |
Copy
|
.rose-10 |
Copy
|
.rose-20 |
Copy
|
.rose-30 |
Copy
|
.rose-40 |
Copy
|
.rose-50 |
Copy
|
Berikut adalah contoh penggunaan Percentage Background Color yang dikombinasikan dengan Background Image.
Background Image
Sebenarnya, kita bisa menambahkan background image pada elemen dengan style. Namun, jika ingin menambah background image secara multiple, kita perlu menambah banyak img source pada satu style elemen. Contoh:
div[style=”background-image: url(‘image.com/source1.png’, ‘image.com/source2.png’, ‘image.com/source3.png’)”]
Jika karena suatu alasan, Anda ingin memisahkan masing-masing image source url, Anda dapat menggunakan komponen ini. Sehingga kode Anda sekarang menjadi:
div.bg-img[style=”background-image: url(‘image.com/source1.png’)”]
div.bg-img[style=”background-image: url(‘image.com/source2.png’)”]
div.bg-img[style=”background-image: url(‘image.com/source3.png’)”]
.bg-img juga membantu memposisikan background image Anda dengan tepat.
| Option | Description |
|---|---|
| .has-bg-img | Tambahkan kelas ini pada elemen yang ingin diberi background image. |
| .bg-img | Buat elemen baru dengan inline style background-img dan tambahkan kelas ini. |
| --- | --- |
| .bg-img-repeat | Tambahkan kelas ini pada .bg-img jika background image ingin ditampilkan secara berulang. |
| .bg-img-fixed | Tambahkan kelas ini pada .bg-img jika background image ingin ditampilkan secara fixed. |
Border Color
Warna border pada Technoart dibagi menjadi 2 bagian, yaitu grayscale border dan full color border.
Grayscale Border
Grayscale border merupakan border dengan warna hitam putih. Grayscale border cocok dipakai untuk kalimat agar nyaman dibaca oleh user. Grayscale border memiliki 9 pilihan warna, yaitu:
| Option | Code |
|---|---|
.border-lightest |
Copy
|
.border-lighter |
Copy
|
.border-light |
Copy
|
--- |
Copy
|
.border-grayest |
Copy
|
.border-grayer |
Copy
|
.border-gray |
Copy
|
--- |
Copy
|
.border-darkest |
Copy
|
.border-darker |
Copy
|
.border-dark |
Copy
|
Warna border default yang digunakan Technoart pada komponen yang memiliki border adalah border-light.
Hover Grayscale Border
Dengan hover, style grayscale border hanya akan terlihat jika kita menggeser pointer ke komponen. Sama seperti grayscale border, hover grayscale border memiliki 9 pilihan warna, yaitu:
| Option | Code |
|---|---|
.hover-border-lightest |
Copy
|
.hover-border-lighter |
Copy
|
.hover-border-light |
Copy
|
--- |
Copy
|
.hover-border-grayest |
Copy
|
.hover-border-grayer |
Copy
|
.hover-border-gray |
Copy
|
--- |
Copy
|
.hover-border-darkest |
Copy
|
.hover-border-darker |
Copy
|
.hover-border-dark |
Copy
|
Full Color Border
Full color border merupakan border yang bewarna warni. Full color border cocok dipakai untuk kalimat yang menarik perhaian user (branding). Bisa juga dipakai untuk memberi makna semantik (seperti error, warning, info, dll). Full color border memiliki 36 pilihan warna, yaitu:
| Option | Code |
|---|---|
.border-light-red |
Copy
|
.border-light-orange |
Copy
|
.border-light-yellow |
Copy
|
.border-light-chartreuse |
Copy
|
.border-light-green |
Copy
|
.border-light-spring |
Copy
|
.border-light-cyan |
Copy
|
.border-light-azure |
Copy
|
.border-light-blue |
Copy
|
.border-light-violet |
Copy
|
.border-light-magenta |
Copy
|
.border-light-rose |
Copy
|
--- |
Copy
|
.border-red |
Copy
|
.border-orange |
Copy
|
.border-yellow |
Copy
|
.border-chartreuse |
Copy
|
.border-green |
Copy
|
.border-spring |
Copy
|
.border-cyan |
Copy
|
.border-azure |
Copy
|
.border-blue |
Copy
|
.border-violet |
Copy
|
.border-magenta |
Copy
|
.border-rose |
Copy
|
--- |
Copy
|
.border-dark-red |
Copy
|
.border-dark-orange |
Copy
|
.border-dark-yellow |
Copy
|
.border-dark-chartreuse |
Copy
|
.border-dark-green |
Copy
|
.border-dark-spring |
Copy
|
.border-dark-cyan |
Copy
|
.border-dark-azure |
Copy
|
.border-dark-blue |
Copy
|
.border-dark-violet |
Copy
|
.border-dark-magenta |
Copy
|
.border-dark-rose |
Copy
|
Hover Full Color Border
Dengan hover, style full color border hanya akan terlihat jika kita menggeser pointer ke komponen. Sama seperti full color border, hover full color border memiliki 36 pilihan warna, yaitu:
| Option | Code |
|---|---|
.hover-border-light-red |
Copy
|
.hover-border-light-orange |
Copy
|
.hover-border-light-yellow |
Copy
|
.hover-border-light-chartreuse |
Copy
|
.hover-border-light-green |
Copy
|
.hover-border-light-spring |
Copy
|
.hover-border-light-cyan |
Copy
|
.hover-border-light-azure |
Copy
|
.hover-border-light-blue |
Copy
|
.hover-border-light-violet |
Copy
|
.hover-border-light-magenta |
Copy
|
.hover-border-light-rose |
Copy
|
--- |
Copy
|
.hover-border-red |
Copy
|
.hover-border-orange |
Copy
|
.hover-border-yellow |
Copy
|
.hover-border-chartreuse |
Copy
|
.hover-border-green |
Copy
|
.hover-border-spring |
Copy
|
.hover-border-cyan |
Copy
|
.hover-border-azure |
Copy
|
.hover-border-blue |
Copy
|
.hover-border-violet |
Copy
|
.hover-border-magenta |
Copy
|
.hover-border-rose |
Copy
|
--- |
Copy
|
.hover-border-dark-red |
Copy
|
.hover-border-dark-orange |
Copy
|
.hover-border-dark-yellow |
Copy
|
.hover-border-dark-chartreuse |
Copy
|
.hover-border-dark-green |
Copy
|
.hover-border-dark-spring |
Copy
|
.hover-border-dark-cyan |
Copy
|
.hover-border-dark-azure |
Copy
|
.hover-border-dark-blue |
Copy
|
.hover-border-dark-violet |
Copy
|
.hover-border-dark-magenta |
Copy
|
.hover-border-dark-rose |
Copy
|
Typography
Description.
| Option | Code |
|---|---|
h2 Heading |
Copy
|
h3 Heading |
Copy
|
h4 Heading |
Copy
|
h5 Heading |
Copy
|
h6 Heading |
Copy
|
--- |
Copy
|
.h1 Size |
Copy
|
.h2 Size |
Copy
|
.h3 Size |
Copy
|
.h4 Size |
Copy
|
.h5 Size |
Copy
|
.h6 Size |
Copy
|
--- |
Copy
|
.m-h1 Size |
Copy
|
.m-h2 Size |
Copy
|
.m-h3 Size |
Copy
|
.m-h4 Size |
Copy
|
.m-h5 Size |
Copy
|
.m-h6 Size |
Copy
|
--- |
Copy
|
.fs-8 |
Copy
|
.fs-9 |
Copy
|
.fs-10 |
Copy
|
.fs-11 |
Copy
|
.fs-12 |
Copy
|
.fs-13 |
Copy
|
.fs-14 |
Copy
|
.fs-15 |
Copy
|
.fs-16 |
Copy
|
.fs-17 |
Copy
|
.fs-18 |
Copy
|
.fs-19 |
Copy
|
.fs-20 |
Copy
|
.fs-21 |
Copy
|
.fs-22 |
Copy
|
.fs-23 |
Copy
|
.fs-24 |
Copy
|
.fs-25 |
Copy
|
.fs-26 |
Copy
|
.fs-27 |
Copy
|
.fs-28 |
Copy
|
.fs-29 |
Copy
|
.fs-30 |
Copy
|
.fs-40 |
Copy
|
.fs-50 |
Copy
|
.fs-60 |
Copy
|
.fs-70 |
Copy
|
.fs-80 |
Copy
|
.fs-90 |
Copy
|
.fs-100 |
Copy
|
.fs-150 |
Copy
|
.fs-200 |
Copy
|
.fs-250 |
Copy
|
.fs-300 |
Copy
|
--- |
Copy
|
.m-fs-8 |
Copy
|
.m-fs-9 |
Copy
|
.m-fs-10 |
Copy
|
.m-fs-11 |
Copy
|
.m-fs-12 |
Copy
|
.m-fs-13 |
Copy
|
.m-fs-14 |
Copy
|
.m-fs-15 |
Copy
|
.m-fs-16 |
Copy
|
.m-fs-17 |
Copy
|
.m-fs-18 |
Copy
|
.m-fs-19 |
Copy
|
.m-fs-20 |
Copy
|
.m-fs-21 |
Copy
|
.m-fs-22 |
Copy
|
.m-fs-23 |
Copy
|
.m-fs-24 |
Copy
|
.m-fs-25 |
Copy
|
.m-fs-26 |
Copy
|
.m-fs-27 |
Copy
|
.m-fs-28 |
Copy
|
.m-fs-29 |
Copy
|
.m-fs-30 |
Copy
|
.m-fs-40 |
Copy
|
.m-fs-50 |
Copy
|
.m-fs-60 |
Copy
|
.m-fs-70 |
Copy
|
.m-fs-80 |
Copy
|
.m-fs-90 |
Copy
|
.m-fs-100 |
Copy
|
.m-fs-150 |
Copy
|
.m-fs-200 |
Copy
|
.m-fs-250 |
Copy
|
.m-fs-300 |
Copy
|
--- |
Copy
|
The quick brown fox jumps over the lazy dog |
Copy
|
--- |
Copy
|
Left aligned text. |
Copy
|
Center aligned text. |
Copy
|
Right aligned text. |
Copy
|
Justified aligned text. |
Copy
|
Button
Description.
| Option | Description |
|---|---|
| .button | kelas dasar dari komponen button. |
Button Size
Description.
| Option | Description |
|---|---|
| .button-xs | make extra small button. |
| .button-sm | make small button. |
| .button-md | make medium button. |
| .button-lg | make large button. |
Button State
Description.
| Option | Description |
|---|---|
| [disabled] | make button disabled. |
| .disabled | give button disabled look. |
Form
Description.
Form Icon
Description.
Form Size
Description.
Form Icon with Size
Description.
Disabled and Readonly
Description.
Inline Form
Description.
Table
Description
| Option | Description |
|---|---|
| .table | kelas wajib untuk tabel. |
| Header | Header |
|---|---|
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
Bordered Table
Description
| Option | Description |
|---|---|
| .table-bordered | kelas wajib untuk tabel. |
| Header | Header |
|---|---|
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
No Line Table
Description
| Option | Description |
|---|---|
| .table-no-line | kelas wajib untuk tabel. |
| Header | Header |
|---|---|
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
Striped Table
Description
| Option | Description |
|---|---|
| .table-striped | kelas wajib untuk tabel. |
| Header | Header |
|---|---|
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
Nowrap Table
Description
| Option | Description |
|---|---|
| .table-nowrap | kelas wajib untuk tabel. |
| Header | Header |
|---|---|
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
Hover Table
Description
| Option | Description |
|---|---|
| .table-hover | kelas wajib untuk tabel. |
| Header | Header |
|---|---|
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
| Your smile makes me happy. | Your smile makes me happy. |
Image
Secara default, komponen img ditampilkan sesuai dengan ukuran aslinya. Misalnya, image.jpg dengan ukuran asli 300x300 akan ditampilkan pada halaman web dengan ukuran yang sama yaitu 300px x 300px. Masalah akan muncul ketika img ditampilkan pada layar mobile, yaitu img terlihat terlalu besar melebihi ukuran parent containernya.
Solusi untuk masalah tersebut adalah, atur lebar img menjadi 100%. Lebar img akan menjadi sama dengan parent containernya, sehingga ketika img ditampilkan pada layar mobile, ukurannya akan menyesuaikan lebar parentnya. Memastikan img nyaman dilihat karena ukurannya yang responsif.
| Option | Description |
|---|---|
| .img-responsive | mengatur lebar img agar menyesuaikan lebar parent containernya. |
Embed
Description
| Option | Description |
|---|---|
| .has-embed | description |
| .embed-21by9 | description |
| .embed-16by9 | description |
| .embed-4by3 | description |
| .embed-1by1 | description |
| .embed | description |
Menu
Layout
Description.
| Option | Description |
|---|---|
| .wrapper | Pembungkus semua elemen. |
| .wrapper-boxed | Pembungkus semua elemen dengan boxed layout. |
| .container | Pembungkus semua elemen dengan boxed layout. |
Pagination
Breadcrumb
Description.
| Option | Description |
|---|---|
| .breadcrumb | Tambahkan kelas ini pada parent item. |
| .breadcrumb-item | Tambahkan kelas ini pada item. |
Circle Icon
Gunakan Circle Icon untuk memberi border lingkarang pada elemen. Komponen ini digunakan untuk melingkari satu icon atau satu character.
| Option | Description |
|---|---|
| .circle-icon | Tambahkan ini pada elemen agar memiliki border lingkaran. |
Positioned Child
Description.
| Option | Description |
|---|---|
| .has-positioned-child | Tambahkan kelas ini pada element yang memiliki child yang ingin diatur posisinya. |
| --- | --- |
| .top-left | Tambahkan kelas ini pada child yang ingin diposisikan ke top-left. |
| .top-left-upside | Tambahkan kelas ini pada child yang ingin diposisikan ke top-left-upside. |
| .top-left-outside | Tambahkan kelas ini pada child yang ingin diposisikan ke top-left-outside. |
| .top-center | Tambahkan kelas ini pada child yang ingin diposisikan ke top-center. |
| .top-center-upside | Tambahkan kelas ini pada child yang ingin diposisikan ke top-center-upside. |
| .top-right | Tambahkan kelas ini pada child yang ingin diposisikan ke top-right. |
| .top-right-upside | Tambahkan kelas ini pada child yang ingin diposisikan ke top-right-upside. |
| .top-right-outside | Tambahkan kelas ini pada child yang ingin diposisikan ke top-right-outside. |
| .middle-left | Tambahkan kelas ini pada child yang ingin diposisikan ke middle-left. |
| .middle-center | Tambahkan kelas ini pada child yang ingin diposisikan ke middle-center. |
| .middle-right | Tambahkan kelas ini pada child yang ingin diposisikan ke middle-right. |
| .bottom-left | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-left. |
| .bottom-left-downside | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-left-downside. |
| .bottom-left-outside | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-left-outside. |
| .bottom-center | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-center. |
| .bottom-center-downside | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-center-downside. |
| .bottom-right | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-right. |
| .bottom-right-downside | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-right-downside. |
| .bottom-right-outside | Tambahkan kelas ini pada child yang ingin diposisikan ke bottom-right-outside. |
D
Stack Content
Description.
| Option | Description |
|---|---|
| .has-stack-content | tambahkan kelas ini pada parent element. |
| .main-content | tambahkan kelas ini pada elemen utama. |
| .extra-content | tambahkan kelas ini pada elemen yang akan muncul ketika di hover. |
| --- | |
| .zoom-in | Extra element akan muncul ketika dihover dengan efek zoom in. Tambahkan kelas ini di parent |
| .zoom-out | Extra element akan muncul ketika dihover dengan efek zoom out. Tambahkan kelas ini di parent |
| .from-top | Extra element akan muncul dari atas ketika dihover. Tambahkan kelas ini di parent |
| .from-right | Extra element akan muncul dari kanan ketika dihover. Tambahkan kelas ini di parent |
| .from-bottom | Extra element akan muncul dari bawah ketika dihover. Tambahkan kelas ini di parent |
| .from-left | Extra element akan muncul dari kiri ketika dihover. Tambahkan kelas ini di parent |
| --- | |
| .main-gone | Ketika elemen di hover, kelas ini membuat main-content akan menghilang seiring munculnya extra-content. Tambahkan kelas ini di parent. Kelas ini sifatnya opsional |
Hover Zoom
Description.
| Option | Description |
|---|---|
| .has-hover-zoom | tambahkan kelas ini pada parent element. |
| .hover-zoom | tambahkan kelas ini pada element yang ingin di zoom. |
Technoart
Fixed on Scroll
Back to Top
Description.
| Option | Description |
|---|---|
| [technoart-backtotop=""] | Jika elemen dengan atribut ini diklik, maka akan membuat halaman kembali ke posisi paling atas. |
Toggle
Clearfix and Float
| Option | Description |
|---|---|
| .clearfix | jika sebuah komponen memiliki kelas float (pull-* atau m-pull-*), tambahkan kelas ini pada parentnya. |
| .pull-left | membuat komponen memiliki efek float kekiri. |
| .pull-right | membuat komponen memiliki efek float kekanan. |
| .pull-none | menghilangkan efek float pada elemen. |
| .m-pull-left | membuat komponen memiliki efek pull-left pada layar mobile. |
| .m-pull-right | membuat komponen memiliki efek pull-right pada layar mobile. |
| .m-pull-none | menghilangkan efek float pada elemen pada layar mobile. |
Without .clearfix
With .clearfix
Visibility
Description.
| Option | Description |
|---|---|
| .visible | Membuat elemen terlihat. |
| .visible-xs-less | Membuat elemen terlihat pada layar xs 576px kebawah. |
| .visible-sm-less | Membuat elemen terlihat pada layar sm 768px kebawah. |
| .visible-md-less | Membuat elemen terlihat pada layar md 992px kebawah. |
| .visible-lg-less | Membuat elemen terlihat pada layar md 1200px kebawah. |
| .visible-xs-greater | Membuat elemen terlihat pada layar xs 576px keatas. |
| .visible-sm-greater | Membuat elemen terlihat pada layar sm 768px keatas. |
| .visible-md-greater | Membuat elemen terlihat pada layar md 992px keatas. |
| .visible-lg-greater | Membuat elemen terlihat pada layar lg 1200px keatas. |
| .hidden | Membuat elemen tidak terlihat. |
| .hidden-xs-less | Membuat elemen tidak terlihat pada layar xs 576px kebawah. |
| .hidden-sm-less | Membuat elemen tidak terlihat pada layar sm 768px kebawah. |
| .hidden-md-less | Membuat elemen tidak terlihat pada layar md 992px kebawah. |
| .hidden-lg-less | Membuat elemen tidak terlihat pada layar md 1200px kebawah. |
| .hidden-xs-greater | Membuat elemen tidak terlihat pada layar xs 576px keatas. |
| .hidden-sm-greater | Membuat elemen tidak terlihat pada layar sm 768px keatas. |
| .hidden-md-greater | Membuat elemen tidak terlihat pada layar md 992px keatas. |
| .hidden-lg-greater | Membuat elemen tidak terlihat pada layar lg 1200px keatas. |
Shadow
Description.
| Option | Description |
|---|---|
| .shadow | memberi elemen efek shadow. |
| .shadow-top-right | memberi elemen efek shadow pada bagian atas ke arah kanan. |
| .shadow-top-left | memberi elemen efek shadow pada bagian atas ke arah kiri. |
| .shadow-bottom-right | memberi elemen efek shadow pada bagian bawah ke arah kanan. |
| .shadow-bottom-left | memberi elemen efek shadow pada bagian bawah ke arah kiri. |
| .shadow-none | menghilangkan efek shadow pada elemen. |
| .m-shadow | memberi elemen efek shadow pada layar mobile. |
| .shadow-top-right | memberi elemen efek shadow pada bagian atas ke arah kanan pada layar mobile. |
| .shadow-top-left | memberi elemen efek shadow pada bagian atas ke arah kiri pada layar mobile. |
| .shadow-bottom-right | memberi elemen efek shadow pada bagian bawah ke arah kanan pada layar mobile. |
| .shadow-bottom-left | memberi elemen efek shadow pada bagian bawah ke arah kiri pada layar mobile. |
| .m-shadow-none | menghilangkan efek shadow pada elemen pada layar mobile. |
Rounded
Description.
| Option | Description |
|---|---|
| .rounded | membuat sudut element menjadi round sebesar 8px. |
| .rounded-xs | membuat sudut element menjadi round sebesar 3px. |
| .rounded-sm | membuat sudut element menjadi round sebesar 8px. |
| .rounded-md | membuat sudut element menjadi round sebesar 13px. |
| .rounded-lg | membuat sudut element menjadi round sebesar 18px. |
| .circle | membuat sudut element menjadi bulatan. |
| .square | membuat sudut element menjadi siku-siku. |
| --- | --- |
| .m-rounded | membuat sudut element menjadi round sebesar 8px pada layar mobile. |
| .m-rounded-xs | membuat sudut element menjadi round sebesar 3px pada layar mobile. |
| .m-rounded-sm | membuat sudut element menjadi round sebesar 8px pada layar mobile. |
| .m-rounded-md | membuat sudut element menjadi round sebesar 13px pada layar mobile. |
| .m-rounded-lg | membuat sudut element menjadi round sebesar 18px pada layar mobile. |
| .m-circle | membuat sudut element menjadi bulatan pada layar mobile. |
| .m-square | membuat sudut element menjadi siku-siku pada layar mobile. |
Underline
Stretch
Description.
| Option | Description |
|---|---|
| .stretch-xs | Memberi efek stretch pada elemen sebesar 10% dari ukuran semula. |
| .stretch-sm | Memberi efek stretch pada elemen sebesar 20% dari ukuran semula. |
| .stretch-md | Memberi efek stretch pada elemen sebesar 30% dari ukuran semula. |
| .stretch-lg | Memberi efek stretch pada elemen sebesar 40% dari ukuran semula. |
| --- | |
| .stretch-y-xs | Memberi efek stretch keatas dan kebawah pada elemen sebesar 10% dari ukuran semula. |
| .stretch-y-sm | Memberi efek stretch keatas dan kebawah pada elemen sebesar 20% dari ukuran semula. |
| .stretch-y-md | Memberi efek stretch keatas dan kebawah pada elemen sebesar 30% dari ukuran semula. |
| .stretch-y-lg | Memberi efek stretch keatas dan kebawah pada elemen sebesar 40% dari ukuran semula. |
| --- | |
| .stretch-x-xs | Memberi efek stretch kekiri dan kekanan pada elemen sebesar 10% dari ukuran semula. |
| .stretch-x-sm | Memberi efek stretch kekiri dan kekanan pada elemen sebesar 20% dari ukuran semula. |
| .stretch-x-md | Memberi efek stretch kekiri dan kekanan pada elemen sebesar 30% dari ukuran semula. |
| .stretch-x-lg | Memberi efek stretch kekiri dan kekanan pada elemen sebesar 40% dari ukuran semula. |
| --- | |
| .stretch-none | Menghilangkan efek stretch pada elemen. |