Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xinix-technology/sketch

UI Design Patterns
https://github.com/xinix-technology/sketch

Last synced: 3 months ago
JSON representation

UI Design Patterns

Awesome Lists containing this project

README 

        
# Sketch



## What is Sketch?



**Sketch** is User **Interface design patterns** developed by [Xinix Technology](http://xinix.co.id). 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](http://github.com/xinix-technology/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

	1. Popup Login

	1. Drop Down Login

	1. Inline Login

1. Menu Bar

	1. Side bars

	1. Top Bar

	1. Bottom Bar

	1. Relative Position Helper

	1. Fixed Position Helper

1. List View

	1. Regular List View

	1. Regular List View with Icon

	1. Multiple Coloumn List View

	1. List View with Swipe Action

1. Grid View

	1. Same Size Grid View

	1. Same Width only Grid View

1. Conversation View

	1. Messages Bubble View

	1. Threaded Comment View

1. Contact View

	1. Contact List View

	1. Contact Grid View

1. Search Bar

	1. Inline Search Bar

	1. List View Search Bar