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
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 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
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/[email protected]/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/[email protected]/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.
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
Learning Technoart is easy. Visit Definitive Guide for comprehensive guidance of using Technoart.
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
technoarttag. - When you modify/add Technoart functionality and want it to be distributed through npm or similar delivery mechanism, use keyword
technoarton packages name for maximum discoverability.
Copyright (c) 2018-present Fandy Pradana. Licensed under MIT.
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)
- General
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent