Introduction

No more custom CSS - All in one CSS framework for developing clean, professional & responsive web app.

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">  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/technoart@0.0.9/dist/css/technoart.min.css">    

Your smile makes me happy.

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:

preview

.box-1

.box-2

.box-3

.box-6

code

Copy

.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:

preview

.box-4

code

Copy

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

preview

Your smile makes me happy.

code

Copy

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

preview

By Admin

The Disadvantage of OCD

These days, it's easy to get caught up in the pursuit of unhealthy perfectionism.

By Admin

How Reading Affects The Brain Works

Here's how reading can affect your brain in the most remarkable ways.

By Admin

How Video Games Boost Your Creativity

Video games can unleash your creative side if you get immersed in them long enough.

code

Copy

Sliced Box

preview

Your smile makes me happy.

code

Copy

Use this option to obtain sliced box effect.

Option	Description
.box-sliced	make every box intersect each other neatly.

preview

Your smile makes me happy.

code

Copy

Make Every Box Component Has Equal Height

Secara default, tinggi masing-masing komponen box berbeda-beda tergantung kontennya.

preview

The Pygmy Rabbit (Brachylagus idahoensis) is the smallest rabbit in the world. It is found in North America. The adult pygmy rabbit weighs about 400g (14oz) and has a typical body length of 24cm to 29cm (9.4″ – 11.4″).

The Pygmy Marmoset or Dwarf Monkey (Cebuella pygmaea) is the world’s smallest monkey. It is native to the rainforest canopies of Brazil, Columbia, Ecuador, Peru and Bolivia.

The smallest known primate is the Madame Berthe’s Mouse Lemur (Microcebus berthae), found in Madagascar, with an average body length of 92 mm (3.6″) and weight of around 30g (1oz).

code

Copy

Dengan .box-equal yang ditambah pada container .box, membuat komponen-komponen box memiliki tinggi yang sama. Terlihat lebih rapi.

preview

The Pygmy Marmoset or Dwarf Monkey (Cebuella pygmaea) is the world’s smallest monkey. It is native to the rainforest canopies of Brazil, Columbia, Ecuador, Peru and Bolivia.

The smallest known primate is the Madame Berthe’s Mouse Lemur (Microcebus berthae), found in Madagascar, with an average body length of 92 mm (3.6″) and weight of around 30g (1oz).

code

Copy

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.

preview

This is not box component. Notice left position as a original position while below box content has 15px distance from original position

The Pygmy Marmoset or Dwarf Monkey (Cebuella pygmaea) is the world’s smallest monkey. It is native to the rainforest canopies of Brazil, Columbia, Ecuador, Peru and Bolivia.

The smallest known primate is the Madame Berthe’s Mouse Lemur (Microcebus berthae), found in Madagascar, with an average body length of 92 mm (3.6″) and weight of around 30g (1oz).

code

Copy

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.

preview

With box-gutter below box content will align with this original position.

The Pygmy Marmoset or Dwarf Monkey (Cebuella pygmaea) is the world’s smallest monkey. It is native to the rainforest canopies of Brazil, Columbia, Ecuador, Peru and Bolivia.

The smallest known primate is the Madame Berthe’s Mouse Lemur (Microcebus berthae), found in Madagascar, with an average body length of 92 mm (3.6″) and weight of around 30g (1oz).

code

Copy

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:

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.

preview

Component with .margin-x-auto

code

Copy

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).

preview

Component with .margin-top-100 only

Component with .margin-top-100 and .m-margin-top-50. Try resize your browser below 768px

code

Copy

.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:

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.

preview

Component with .m-margin-x-auto

code

Copy

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).

preview

From the border until this text has 30px distance (padding) and this component has 70px distance with below component and its parent (margin). This component also has thin border.

From the border until this text has 100px distance (padding). This component also has thick border.

code

Copy

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.

preview

Your smile makes me happy.

code

Copy

preview

code

Copy

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.

preview

Default .bg-img

code

Copy

preview

.bg-img with .bg-img-repeat and .bg-img-fixed

code

Copy

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.

preview

Anchor

code

Copy

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.

preview

code

Copy

Button State

Description.

Option	Description
[disabled]	make button disabled.
.disabled	give button disabled look.

preview

code

Copy

Form

Description.

code

Copy

Form Icon

Description.

preview

code

Copy

Form Size

Description.

preview

Text Extra Small

Text Small

Text Medium

Text Large

Textarea Extra Small

Textarea Small

Textarea Medium

Textarea Large

Dropdown Extra Small

Dropdown Small

Dropdown Medium

Dropdown Large

#keterangan

Checkbox, Radio, File & Static doesn't have size class

code

Copy

Form Icon with Size

Description.

preview

Text Icon Extra Small

Text Icon Small

Text Icon Medium

Text Icon Large

Textarea Icon Extra Small

Textarea Icon Small

Textarea Icon Medium

Textarea Icon Large

code

Copy

Disabled and Readonly

Description.

code

Copy

Inline Form

Description.

code

Copy

Table

Description

Option	Description
.table	kelas wajib untuk tabel.

preview

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.

code

Copy

Bordered Table

Description

Option	Description
.table-bordered	kelas wajib untuk tabel.

preview

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.

code

Copy

No Line Table

Description

Option	Description
.table-no-line	kelas wajib untuk tabel.

preview

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.

code

Copy

Striped Table

Description

Option	Description
.table-striped	kelas wajib untuk tabel.

preview

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.

code

Copy

Nowrap Table

Description

Option	Description
.table-nowrap	kelas wajib untuk tabel.

preview

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.

code

Copy

Hover Table

Description

Option	Description
.table-hover	kelas wajib untuk tabel.

preview

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.

code

Copy

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.

preview

code

Copy

Embed

Description

Option	Description
.has-embed	description
.embed-21by9	description
.embed-16by9	description
.embed-4by3	description
.embed-1by1	description
.embed	description

preview

code

Copy

Layout

Description.

Option	Description
.wrapper	Pembungkus semua elemen.
.wrapper-boxed	Pembungkus semua elemen dengan boxed layout.
.container	Pembungkus semua elemen dengan boxed layout.

preview

Example

code

Copy

Pagination

preview

code

Copy

Description.

Option	Description
.breadcrumb	Tambahkan kelas ini pada parent item.
.breadcrumb-item	Tambahkan kelas ini pada item.

preview

code

Copy

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.

preview

T E C H N O A R T

code

Copy

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.

preview

.top-left

.top-left-upside

.top-center

.top-center-upside

.top-right

.top-right-upside

.middle-left

.middle-center

.middle-right

.bottom-left

.bottom-left-downside

.bottom-center

.bottom-center-downside

.bottom-right

.bottom-right-downside

code

Copy

preview

.top-left-outside

.top-right-outside

.bottom-left-outside

.bottom-right-outside

Hover Me

code

Copy

preview

Best Seller

I
D

code

Copy

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

preview

.zoom-in & .main-gone

Your smile makes me happy.

.zoom-out

Your smile makes me happy.

.from-top

Your smile makes me happy.

.from-right

Your smile makes me happy.

.from-bottom

Your smile makes me happy.

.from-left

Your smile makes me happy.

code

Copy

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.

preview

Technoart

No more custom CSS.

code

Copy

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.

preview

example

code

Copy

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

preview

.pull-left element.

.pull-right element.

code

Copy

With .clearfix

preview

.pull-left element.

.pull-right element.

code

Copy

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.

preview

.visible

.visible-xs-less

.visible-sm-less

.visible-md-less

.visible-lg-less

.visible-xs-greater

.visible-sm-greater

.visible-md-greater

.visible-lg-greater

.hidden-xs-less

.hidden-sm-less

.hidden-md-less

.hidden-lg-less

.hidden-xs-greater

.hidden-sm-greater

.hidden-md-greater

.hidden-lg-greater

code

Copy

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.

preview

.shadow

.shadow-top-right

.shadow-top-left

.shadow-bottom-right

.shadow-bottom-left

.shadow-none

code

Copy

preview

.m-shadow

.m-shadow-top-right

.m-shadow-top-left

.m-shadow-bottom-right

.m-shadow-bottom-left

.m-shadow-none

code

Copy

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.

preview

.rounded

.rounded-xs

.rounded-sm

.rounded-md

.rounded-lg

.circle

.square

code

Copy

preview

.m-rounded

.m-rounded-xs

.m-rounded-sm

.m-rounded-md

.m-rounded-lg

.m-circle

.m-square

code

Copy

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.

preview

code

Copy

▲

Introduction

What is Technoart

Installation

Minimum Setup

Assets Structure

Grid or Box

Adjust Box Size on Multiple Device Size

Adjust Box Space

The Disadvantage of OCD

How Reading Affects The Brain Works

How Video Games Boost Your Creativity

Sliced Box

Make Every Box Component Has Equal Height

Box Gutter

Space

Space in Mobile Device

Border Width

Text Color

Grayscale Text

Hover Grayscale Text

Full Color Text

Hover Full Color Text

Background Color

Grayscale Background

Hover Grayscale Background

Full Color Background

Hover Full Color Background

Percentage Background Color

Background Image

Border Color

Grayscale Border

Hover Grayscale Border

Full Color Border

Hover Full Color Border

Typography

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Button

Button Size

Button State

Form

Form Icon

Form Size

Form Icon with Size

Disabled and Readonly

Inline Form

Table

Bordered Table

No Line Table

Striped Table

Nowrap Table

Hover Table

Image

Embed

Menu

Layout

Pagination

Breadcrumb

Circle Icon

Positioned Child

Stack Content

Hover Zoom

Technoart

Fixed on Scroll

Back to Top

Toggle

Clearfix and Float

Visibility

Shadow

Rounded

Underline

Stretch