Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
Technoart logo


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

Official Website:

Current Version: 0.9.9

TOC: What is TechnoartInstallationMinimum SetupAssets StructureDefinitive GuideStarter TemplateContributingCommunityLicenseDone List and Possible Contribution List

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.


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
  • 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">

    <!-- technoart css -->
    <link rel="stylesheet" href="">

    <h1>Your smile makes me happy.</h1>

    <!-- technoart js -->
    <script src=""></script>

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:

├── css/
│   ├── technoart.css
│   ├──
│   ├── technoart.min.css
│   └──
└── js/
    ├── technoart.js
    ├── technoart.min.js

Definitive Guide

Learning Technoart is easy. Visit Definitive Guide for comprehensive guidance of using Technoart.

Starter Template

Start a new project with 50+ choices of clean and professional Starter Template.


Get updates on Technoart's development and interact with community members.

  • Watch our repo hosted on Github.
  • Follow us on Twitter for Technoart updates.
  • Follow us on Instagram for beautiful gallery.
  • Get help on Stack Overflow with technoart tag.
  • When you modify/add Technoart functionality and want it to be distributed through npm or similar delivery mechanism, use keyword technoart on packages name for maximum discoverability.


Copyright (c) 2018-present Fandy Pradana. Licensed under MIT.

Done List and Possible Contribution List

The following is a complete list of Technoart components, how the javascript component specifications are built, how Technoart assets are distributed, how users can interact with Technoart, the technology used to build the website, all pages that are exist on, the plugin used in the Definitive Guide page, Definitive Guide available translations and a list of pages that are exist on Starter Tempalate

This full list is not commonly published on other opensource projects. But there is a lot of hope why this list is published. Among them:

  • By knowing what has been done, Technoart contributors can have awesome feeling about their achievements developing Technoart
  • By knowing Technoart development roadmap, Technoart users can faithfully waiting for any updates that will be useful for them
  • Opening opportunities for community to contribute to:
    • developing CSS & javascript components
    • write a unit test
    • setup Continuous Integration that is currently not done yet
    • bug reporting
    • features requesting
    • asking & answering questions
    • writing content of twitter page, instagram page & medium
    • setup an analytic that is currently not done yet
    • developing website pages that are currently only Home, Guide & Starter Templates that exist
    • helping Definitive Guide page to be easier for users to learn
    • translating Definitive Guide page to languages ​​other than English to help developers who want to learn Technoart but don't have good English skill
    • give an idea or mockup UI that can be displayed on Starter Tempalate page
    • developing Starter Tempalate page
    • finding typos

For now, the list below has 4 additional information, which are:

  • done: it has been completed but it is possible to develop it further
  • continue: always continue
  • soon: not finished yet and contributions from the community would be extremely helpful
  • later: not developed in the near future

And finally, here are the contents of the list:

  • Components
    • box (done)
    • space (done)
    • text-color (done)
    • background-color (done)
    • percentage-background-color (done)
    • background-image (done)
    • border-color (done)
    • typography (done)
    • button (done)
    • form (done)
    • table (done)
    • image (done)
    • embed (done)
    • menu (done)
    • layout (done)
    • pagination (done)
    • breadcrumb (done)
    • circle-icon (done)
    • positioned-child (done)
    • stack-content (done)
    • hover-zoom (done)
    • fixed-on-scroll (done)
    • back-to-top (done)
    • toggle (done)
    • clearfix-and-float (done)
    • visibility (done)
    • shadow (done)
    • rounded (done)
    • underline (done)
    • stretch (done)
  • Javascript component specifications
    • No depedency (done)
    • Triggering event (soon)
    • Custom setting (soon)
    • Unit test (soon)
    • Continuous Integration (soon)
  • Distribution
    • Via cdn (done)
    • Via npm (done)
    • Via yarn (done)
    • Via composer (done)
    • dist folder for general usage (done)
    • dist-components folder for custom usage (done)
    • Using source maps (done)
  • Community
  • Website
    • Using jekyll & github pages (done)
    • Https (done)
    • Analytic (soon)
  • Website Pages
    • Home (done)
    • Guide (done)
    • Starter Template (done)
    • Gallery (soon)
    • Support (soon)
    • License (soon)
    • Contribute (soon)
    • Brand (soon)
    • Team (soon)
    • Curated List (later)
    • Live Chat (later)
  • Guide Specification
    • Example preview (done)
    • Example code & copy to clipboard (done)
    • Header with anchor (done)
    • Scrollspy (done)
  • Guide Translation
    • English (done)
    • Indonesia (soon)
  • Starter Template
    • General
      • Homepage (done)
      • Service (done)
      • Portfolio (done)
      • Pricing (done)
      • FAQ (done)
      • Our Team (done)
      • Our Client (soon)
      • About Us (done)
      • Contact Us (soon)
      • My Profile (soon)
        • View Profile (soon)
        • Edit Profile (soon)
        • Change Password (soon)
      • Authentication (soon)
      • Error 404 (soon)
      • Coming Soon (soon)
      • Legal (soon)
        • Privacy Policy (soon)
        • Term of Service (soon)
      • Search Result (soon)
    • Minimum Layout (soon)
    • Admin (soon)
    • Blog (soon)
    • Magazine (soon)
    • News (soon)
    • One Page (soon)
    • Email (soon)
    • Curriculum Vitae (soon)
    • Ecommerce (soon)
    • Job (soon)
    • University (soon)
    • Wedding (soon)
    • Real Estate (soon)
    • Social Media (soon)
      • News Feed (soon)
      • My Profile (soon)