Code Monkey home page Code Monkey logo

ui's Introduction

Main cover

How To Use

You can download the latest version here. Once downloaded, you're free to use all the Sketch files for UI design work. You're just not allowed to re-package it and claim it as your own— we're all sharing this, plus all designs are from Apple.

Here's what's included in the repo:

  • UI.sketch — This contains most of the new UI elements of iOS 10, such as the new Spotlight Widgets and Status Bars.
  • Apps — This folder contains the templates for the newly-updated apps in iOS 10, namely Maps, Music, Messages, Health and Home.
  • System — This folder contains the new iOS system screens, such as the redesigned lockscreen, Spotlight and Control Centre.

You can use the included Sketch files to figure out the overall look and feel of iOS 10, as well as copy the metrics for UI elements. This UI kit is best paired with the iOS Human Interface Guidelines by Apple.

Make it better

We want designers and developers to share these design files, and contribute to this repo as the iOS 10 beta changes over time. This is the goal of this UI kit.

Contributing

If you want to work on something and submit it, simply:

  1. Check the issues to see if someone else is already working on what you intend to change
  2. If not, create a new Issue and assign yourself to it— so no-ones working on the same thing at once
  3. Submit a pull request referencing the issue.
Familiar with Git

If you're familiar with Git, clone the repo and feel free to tweak the files included. If you end up adding new features, screens, UI elements— or change things as the iOS 10 beta improves over time— submit a pull request and we'll merge it back for everyone to share!

Not familiar with git? Don't worry!

There is only a few steps to contribute to the iOS 10 UI Kit!

  1. Download the kit and do your change. In order to now have merge conflicts (a git thing), once you are done with all the tweaking, go to step 2!
  2. Now we are going to have to do some git, but don't worry, we've prepared a couple of images to make it easier!
  3. Do a fork to this repository to your own one! That is as easy as tapping the button in the top right corner.
  1. Clone then the URL of the repository that was created to your desktop, that's as easy as copying the URL of the GitHub page in the terminal, like so:
  1. There are some steps in the image now, but it's pretty straight forward:
  • The cd goes to the folder you tell it to go, if you cloned the repository in the Desktop, just do cd UI, or the name of the folder at that time.
  • Now, in here you implement your design changes from before, copying and pasting, etc.
  • The next step is to create your branch, this is for us to be able to see it! :) You do so by git branch name-branch.
  • You checkout to that branch, commit the changes and push to us.

That's it in the terminal! You can close it until next time!

  1. Go to the GitHub repository in your account now (the one that was created after the fork) and search for the button Branches and tap it.
  1. Now you'll see your branch, just create a Pull Request with it.

You'll get asked for a title and a description, if you fill that in and tap Create Pull Request, you are done! :P

Adding images makes it easier to review! :)

There are tons of courses to learn Git! Here is one for instance.

You can also share this repo with your friends. The more people that know about this, the more people will contribute to it! Share it on Twitter, Facebook, or, if you're into taboo, share it on LinkedIn.

ui's People

Contributors

cjmlgrto avatar ramongilabert avatar brentcas avatar

Watchers

James Cloos avatar Liguo Jiao avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.