Everything you need to know when it comes to i OS 7. View new version The data presented on this Cheat Sheet does not contain the latest updates of i OS 8 and the new Apple devices released mid 2014 (i Phone 6, 6 Plus, i Pad Air 2). With the release of i OS 7, app designers and developers will need to adjust their visual language to match the new flat design of i OS. In addition to the grid system, the dimensions of icons and commonly used elements, typography and iconography has been updated by Apple in many ways. That‘s why the old i OS Design Cheat Sheet that I published last year with the release of the i Pad mini needs an update now. I decided to shift away from pure value-based tables about sizes of design elements towards a simple guide that should help to get you started with i OS 7 app design. As always I will update this guide over time, and if you think there is something important missing here, just let me know. Since i OS 7 is not supported on older models of the i Phone and i Pod (only 4+ this guide will only cover the supported devices. If you are looking for information related to these devices, you should take a look at the older i OS Design Cheat Sheet v2. Resolutions.
I'm all about customizing my i Phone and making it as different as possible from everyone else's. While it's easy to change the wallpaper, swap keyboards, and hide apps on your home screen, there's not much else you can do aesthetically without jailbreaking, especially when it comes to the status bar and app icons. If you're jailbroken and looking to make your springboard a little more colorful, then Spring Research from hiroshit can help. This tweak will enable you to change the background and foreground colors of the the status bar, as well as the font for app icons on the home screen. Go ahead and install Spring Research in Cydia and respring your device. After installation, Spring Research will be amongst your other Cydia apps in your Settings. Once you open up Spring Research in your Settings, you'll see three editable sections along with a toggle to enable or disable the status bar on the lock screen. Select a section to change the color and opacity for each using the RGBA slides. The first three letters are pretty self-explanatory, and A is for the opacity. Slide these around until you get the perfect hue, or simply drag your finger in the color field to select a color. You can also enter in your own HEX color code by selecting the hashtag ( ) in the top right. When you are satisfied, go back to the tweak's main menu and respring your device to apply your changes. [1] Purple for the status bar and icon labels. [2] A fully transparent icon label color. You can continue to mix and match your colors as much as you want; just remember to respring your device anytime you make a change.
Zurb's Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we're going to look at how you can implement it in a different way, placing it elsewhere on the page, giving you a custom and responsive horizontal navigation menu. Getting Started First up, we'll need the latest Foundation. Unzip and place all the files in your work or test directory. We will only be using index.html, making our own style.css in which we'll override the different classes of the Top Bar to make our custom navigation. Foundation 4 default CSS download Navigation area background-image Also, download the background image provided above. We will be using this for the menu, so place that in your img folder. Have everything? Then fire up your favorite editor and let's get going! Setting up the HTML Structure Step 1: General Markup The index file in your download comes with some preset HTML. You can leave everything as you find it in the header tag, and you can leave the script links (before the closing body tag) where they are. We need all that to make sure the Grid and the Top Bar actually work. You can clear out the rest of the dummy content. We're going for a full width design here, nothing to complicated, just something to get a better idea of what we are working with. Alright, let's set up the header, navigation, content and footer area and put in some dummy content for filling purposes. We will give each area a class of full-width, then in each area we will place a div with a class= row, a div with a class= large-12 and class= columns. This sets up a basic grid structure. Note: For more information on how the grid works, take a look at Foundation for Beginners: The Grid System
Download Now