Sketch

What is Sketch?

Sketch is User Interface design patterns developed by Xinix Technology. It can be use to build Website, Web Apps or even Web based Mobile Apps. The main purpose of Sketch is to provide easy to use general 'swiss knife' HTML and CSS snippets that ready to implement. And with it's minimal styling look, it can be transform into different style and design.

Sketch is open requirement User Interface design pattern, so feel free to add, request and remove any specification.

Sketch and Naked

So you heard about Naked before? Good. It's Xinix Technology CSS framework that we develop along side Sketch and they are meant to be as a complement for each other. While Naked mostly handling the layouting of a website, Sketch will handle some of the website element that you are mostly meet when developing a website design.

So when can I use Sketch?

1. If you feel like not in the mood to design your website.
2. If you unable to design because you're not a designer.
3. Your website requirement fits into Sketch spesifications.
4. When you feel like you want to focus more into your code rather than jugling with your HTML and CSS.
5. You already use Naked to form your website layout and you need to add some "standard" alement to your website.
6. You're in hurry to prototype your working User Interface.
7. You're a designer with God like CSS skill, and you rather use predefine HTML structure and focus on fidling the CSS to make the magic.
8. You're in a tight deadline, and you and your team need to paralelly develop the frontend and backend integration while doing the interface.
9. You just need an inpiration for your next design.
10. You're cool enough to try something new.

How to get Sketch

You already in GitHub, either you can clone this repo, or download the newest release. And if you're have those cool kids Bower package management, do this. Open your terminal and goto you project's folder, type this command to download Sketch:

bower install sketch --save

Eventually after you succesfully clone, download or bower install Sketch, you need to do something like this to get all dependencies if you want to see all the examples working. In your Sketch's folder, type this:

bower update

What is Design Pattern?

Design pattern is term to describe a repetitive block of content where the design have the same layout and structure. It might not always perfectly carbon copy, but you can tell by just looking that two or more block of contain is look the same, just like a twin.

The Pattern

We would like to provide the most common and the most used content out there, therefore we keeping the spesification open for suggestion. Some of the design pattern that we already or going to develelop are:

1. Login View
   1. Whole Screen Login
   2. Popup Login
   3. Drop Down Login
   4. Inline Login
2. Menu Bar
   1. Side bars
   2. Top Bar
   3. Bottom Bar
   4. Relative Position Helper
   5. Fixed Position Helper
3. List View
   1. Regular List View
   2. Regular List View with Icon
   3. Multiple Coloumn List View
   4. List View with Swipe Action
4. Grid View
   1. Same Size Grid View
   2. Same Width only Grid View
5. Conversation View
   1. Messages Bubble View
   2. Threaded Comment View
6. Contact View
   1. Contact List View
   2. Contact Grid View
7. Search Bar
   1. Inline Search Bar
   2. List View Search Bar