Start a new project

with All in One CSS Framework :

Technoart

No More Custom CSS

Clean & Professional

People are more likely to do business with a website that looks professional, and you can achieve this with a clean & responsive design from Tecnoart.

All in One

For the ultimate css framework that can be used for almost any web design without custom css, look no further than the Technoart.

Rich Example

Find inspiration in the starter template by exploring exactly what you’re looking for. Brought to you by the most generous Technoart team.

Download Now

Current version: 0.9.9

Definitive Guide

Learning Technoart is easy.

Starter Template

50⁺ choices of clean and professional starter templates.

Our Repo

Visit our repo hosted on github.

Technoart

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

TOC: What is Technoart • Installation • Minimum Setup • Assets Structure • Definitive Guide • Starter Template • Contributing • Community • License • Done 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.

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 
            

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.

While Technoart provides its own starter templates, many developers also look for additional resources to speed up their workflow. Using pre-designed layouts can significantly reduce development time, especially when you need a solid foundation for a client project. There are numerous platforms offering free designs that integrate seamlessly with various frameworks. For instance, you can find a template website free that is easy to customize and responsive across all devices. These templates often include modern UI components, flexible grids, and clean code. If you are searching for a particular style or niche, exploring external libraries might give you the inspiration you need. One such resource offers a collection of free website templates suitable for business, portfolio, or e-commerce sites. You can browse through dozens of options without spending a dime. Remember that combining a good template with Technoart's utilities can lead to even faster prototyping. Whether you are a beginner or an expert, having access to quality templates helps you focus on functionality rather than basic styling. Take advantage of community-driven repositories and curated lists to find exactly what matches your project requirements.

Community

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.

License

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 https://technoartcss.com, all pages that are exist on https://technoartcss.com, 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
- Bug reports, features requests & submitting pull requests (continue)
- Asking and answering question via stackoverflow (continue)
- Twitter page (continue)
- Instagram page (continue)
- Medium (soon)
Website technoartcss.com
- 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)