{"id":13427343,"url":"https://github.com/tombenner/nui","last_synced_at":"2025-05-14T09:07:55.068Z","repository":{"id":5650741,"uuid":"6859626","full_name":"tombenner/nui","owner":"tombenner","description":"Style iOS apps with a stylesheet, similar to CSS","archived":false,"fork":false,"pushed_at":"2023-11-21T10:11:18.000Z","size":2174,"stargazers_count":3754,"open_issues_count":125,"forks_count":458,"subscribers_count":166,"default_branch":"master","last_synced_at":"2025-05-11T09:02:47.261Z","etag":null,"topics":["ios","objective-c","stylesheet","stylesheets","ui","ui-kit"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tombenner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2012-11-26T04:07:08.000Z","updated_at":"2025-05-06T19:10:35.000Z","dependencies_parsed_at":"2024-01-16T10:36:58.429Z","dependency_job_id":"7025c116-4f68-4e26-9d39-5dce17c8d94a","html_url":"https://github.com/tombenner/nui","commit_stats":{"total_commits":368,"total_committers":56,"mean_commits":6.571428571428571,"dds":0.5652173913043479,"last_synced_commit":"744a36f74b28d43a7cc836ba85c62e4e0ccde78e"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tombenner%2Fnui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tombenner%2Fnui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tombenner%2Fnui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tombenner%2Fnui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tombenner","download_url":"https://codeload.github.com/tombenner/nui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ios","objective-c","stylesheet","stylesheets","ui","ui-kit"],"created_at":"2024-07-31T00:02:00.312Z","updated_at":"2025-05-14T09:07:50.058Z","avatar_url":"https://github.com/tombenner.png","language":"Objective-C","funding_links":[],"categories":["Objective-C","UI"],"sub_categories":[],"readme":"NUI\n===\n\n[![Build Status](https://travis-ci.org/tombenner/nui.svg?branch=master)](https://travis-ci.org/tombenner/nui)\n[![Version](https://img.shields.io/cocoapods/v/NUI.svg?style=flat)](http://cocoapods.org/pods/KeepBackgroundCell)\n[![License](https://img.shields.io/cocoapods/l/NUI.svg?style=flat)](http://cocoapods.org/pods/KeepBackgroundCell)\n[![Platform](https://img.shields.io/cocoapods/p/NUI.svg?style=flat)](http://cocoapods.org/pods/KeepBackgroundCell)\n\nStyle iOS apps with a stylesheet, similar to CSS\n\nDescription\n-----------\nNUI is a drop-in UI kit for iOS that lets you style UI elements using a stylesheet, similar to CSS. It lets you style an entire app in minutes.\n\nOut of the box, the styling looks like this:\n\n[![](https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.png)](https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.png)\n\nIt's easily modified, though. The styling above, for example, is declared [like this](https://raw.github.com/tombenner/nui/master/NUI/NUIStyle.nss). Here are examples of other themes that are defined [here](https://github.com/tombenner/nui/tree/master/NUI/Themes):\n\n[\u003cimg src=\"https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.Route.png\" width=\"120\" /\u003e](https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.Route.png)\n[\u003cimg src=\"https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.Googolplex.png\" width=\"120\" /\u003e](https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.Googolplex.png)\n[\u003cimg src=\"https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.Switchboard.png\" width=\"120\" /\u003e](https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.Switchboard.png)\n[\u003cimg src=\"https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.SkyBlue.png\" width=\"120\" /\u003e](https://raw.github.com/tombenner/nui/master/Screenshots/UIScreenshot.SkyBlue.png)\n\nThe styling is declared using a CSS-like syntax that supports variables:\n\n```css\n@primaryFontName: HelveticaNeue;\n@secondaryFontName: HelveticaNeue-Light;\n@primaryFontColor: #333333;\n@primaryBackgroundColor: #E6E6E6;\n\nButton {\n    background-color: @primaryBackgroundColor;\n    border-color: #A2A2A2;\n    border-width: @primaryBorderWidth;\n    font-color: @primaryFontColor;\n    font-color-highlighted: #999999;\n    font-name: @primaryFontName;\n    font-size: 18;\n    corner-radius: 7;\n}\nNavigationBar {\n    background-tint-color: @primaryBackgroundColor;\n    font-name: @secondaryFontName;\n    font-size: 20;\n    font-color: @primaryFontColor;\n    text-shadow-color: #666666;\n    text-shadow-offset: 1,1;\n}\n```\n\nNUI lets you:\n\n* Update the visual appearance of an entire application in minutes\n* Save themes for use in multiple applications\n* Set the styles of UI elements using simple rules, like setting `Button { border-color: #CCCCCC; }`\n* Define variables like `@primaryFontName` or `@myBackgroundColor` (a la Sass/LESS)\n* Avoid digging through documentation to find how to change specific UI elements' styling\n* Quickly create custom style classes\n* Modify an application's styling while it is running\n\nSome exciting features are on the horizon, and contributions are very encouraged. Please see the [FAQ](#how-can-i-contribute).\n\nInstallation\n------------\n\n### CocoaPods\n\nNUI is most easily installed using [CocoaPods](http://cocoapods.org/). Its pod name is \"NUI\". After installing it, add `[NUISettings init];` to `application:didFinishLaunchingWithOptions` in AppDelegate.m (like [this](https://github.com/tombenner/nui/blob/master/Demo/NUIDemo/AppDelegate.m)).\nWhen installed as a framework, NUI can be natively imported in Swift. Just add\n`import NUI` to the top of your file.\n\n### Without CocoaPods\n\nIf you choose not to use CocoaPods, you can install NUI with these steps:\n\n1. Copy the NUI directory into your application\n2. Add the CoreImage and QuartzCore frameworks to your application if you haven't already (like [this](http://stackoverflow.com/a/3377682))\n3. Add [NUIParse](https://github.com/tombenner/NUIParse) as a subproject, set its iOSNUIParse target as a dependency of your target, and add libNUIParse.a to your linked libraries.\n4. Add `[NUISettings init];` to `application:didFinishLaunchingWithOptions` in AppDelegate.m (like [this](https://github.com/tombenner/nui/blob/master/Demo/NUIDemo/AppDelegate.m))\n5. To use NUI in Swift add `#import \u003cNUI/NUISettings.h\u003e` to your bridging header.\n\nThe Demo uses CocoaPods, so you'll want to [install CocoaPods](http://cocoapods.org/), run `pod install` in the `Demo` directory, and then open the .xcworkspace to open the project.\n\nUsage\n-----\n\nHere's a [walkthrough on how to get up and running with NUI](http://h4ckish.com/2015/12/31/how-to-style-your-ios-app-with-nui/).\n\nAfter dropping in NUI, you can modify your app's styling by simply editing NUIStyle.nss. If you want to avoid modifying NUI's files, you can copy NUIStyle.nss into your app, rename it (e.g. MyTheme.nss), then replace `[NUISettings init]` with `[NUISettings initWithStylesheet:@\"MyTheme\"];` (step 4 in Installation).\n\nDue to the nature of UIKit's usage of simple UI components within more complex UI components, NUI doesn't style some UIKit components in some very rare cases. If you ever need to apply styling for these cases, you can simply use NUIRenderer:\n\n```objective-c\n[NUIRenderer renderButton:myButton];\n```\n\nThis will use the 'Button' style. You can also specify a custom class:\n\n```objective-c\n[NUIRenderer renderButton:myButton withClass:@\"LargeButton\"]\n```\n\n*N.B. NUI used to require that you make your elements inherit from a NUI class, but this is no longer the case. See \"Migrating From Subclasses To Categories\" below for details.*\n\n### Editing The Style Rules\n\nNUIStyle.nss contains all of the style rules. A rule like `Button { font-name: Helvetica; }` modifies the font name of every UIButton, for example.\n\nThe format should be self-explanatory, but here are some notes:\n\n* Styling variables are defined at the top, but they can be added/modified/removed as you see fit.\n* You can make an element inherit from multiple style classes (see Creating Custom Style Classes below).\n\nTo see all of the available properties and values, see the Style Classes and Style Value Types lists below.\n\n### Creating Custom Style Classes\n\nYou can give elements custom style classes (e.g. `LargeButton`), and make those classes inherit from one or more other style classes by using the form `Button:LargeButton`. To bypass NUI's styling for a particular element, set the class to `none`. You can set an element's style class either in Interface Builder or programmatically: \n\n#### Setting an Element's Style Class in Interface Builder\n\nTo do this, you'll set a runtime attribute for the element (in Identity Inspector \u003e User Defined Runtime Attributes, click `+`). Set the Key Path to `nuiClass`, Type to `String`, and Value to `LargeButton` (or `Button:MyButton`:\n\n[![](https://raw.github.com/tombenner/nui/master/Screenshots/SettingARuntimeAttribute.png)](https://raw.github.com/tombenner/nui/master/Screenshots/SettingARuntimeAttribute.png)\n\n#### Setting an Element's Style Class Programmatically\n\nTo do this, you'll want to import the NUI category for the element. If you're styling a UIButton, you'd import:\n\n```objective-c\n#import \"UIButton+NUI.h\"\n```\n\nYou can then set `nuiClass` on your element:\n\n```objective-c\nmyButton.nuiClass = @\"LargeButton\";\n```\n\n*N.B. A style class can inherit from an indefinite number of style rules, so if you want to create groups of style rules, you can set `nuiClass` to something like `@\"MyStyleGroup1:MyStyleGroup2:MyButton\"`.*\n\n### Excluding Views from NUI's Styling\n\nIf you want to prevent specific view classes from being styled (e.g. third party UI elements that are already styled), you can specify these in NSS:\n\n```css\nButton {\n    exclude-views: UIAlertButton;\n    exclude-subviews: UITableViewCell,TDBadgedCell,UITextField;\n}\n```\n\n* `exclude-views` will prevent NUI from applying the `Button` style to views of the specified classes\n* `exclude-subviews` will prevent NUI from applying the `Button style to subviews of views of the specified classes\n\nIf you want to globally prevent specific view classes from being styled (regardless of style class), you can do this using `+[NUISettings setGlobalExclusions:]`:\n\n```objective-c\nint main(int argc, char *argv[])\n{\n    @autoreleasepool {\n        [NUISettings init];\n        [NUISettings setGlobalExclusions:@[@\"ABMemberCell\", @\"ABMultiCell\"]];\n        return UIApplicationMain(argc, argv, nil, NSStringFromClass([MyAppDelegate class]));\n    }\n}\n```\n\n### Styles specific to a device or orientation\n\nYou can have styles or variable definitions only be applied for a particular device and/or orientation by using a @media query:\n\n````\n@media (device:ipad) {\n    /* styles or definitions for iPad */\n}\n\n@media (device:iphone) {\n    /* styles or definitions for iPhone */\n}\n\n@media (orientation:landscape) {\n    /* styles or definitions for landscape orientation */\n}\n\n@media (orientation:portrait) {\n    /* styles or definitions for portrait orientation  */\n}\n\n@media (orientation:portrait) and (device:ipad) {\n    /* styles or definitions for portrait orientation on iPad */\n}\n\n````\n\n### Modifying Styling While The Application Is Running\n\nTo do this, add the following line after `[NUISettings init];` in [main.m](https://github.com/tombenner/nui/blob/master/Demo/NUIDemo/main.m), replacing `@\"/path/to/Style.nss\"` with the absolute file path of your .nss file (e.g. `/Users/myusername/projects/ios/MyApp/Style.nss`):\n\n```objective-c\n[NUISettings setAutoUpdatePath:@\"/path/to/Style.nss\"];\n```\n\nNow, whenever you modify and save your .nss file while the app is running, the new changes will be applied instantaneously, without any need to rebuild the app. This can drastically speed up the process of styling. You'll want to remove this line when you create a release build.\n\n### Creating Custom Themes\n\nBecause all of the style rules are contained in NUIStyle.nss, it's easy to create an NUI theme that can be reused in other projects. If you make one you like, let me know, and I'll likely be very happy to include it in this repo.\n\n### Migrating From Subclasses To Categories\n\nVersion 0.1 of NUI required that you manually make your app's UI components inherit from NUI classes (e.g. `NUIButton`). NUI no longer requires this, as it uses UIKit categories instead subclasses. If you were previously using NUI 0.1, and update to a newer version of NUI, you'll want to simply unset those custom classes, so that, for example, a UIButton is simply a UIButton, instead of being a NUIButton (this would be done either in Identity Inspector \u003e Custom Class or in the application code).\n\nStyle Classes\n-------------\n\nBelow are all of the currently available style classes, their corresponding UI component classes, and the properties they support. Value types (e.g. *Color*, *Gradient*) are described below in Style Value Types.\n\n#### BarButton\n\n*UIBarButtonItem*\n\n* background-color *(Color)*\n* background-color-top/background-color-bottom *(Gradient)*\n* background-color-highlighted *(Color)*\n* background-image *(Image)*\n* background-image-insets *(Box)*\n* background-tint-color *(Color)*\n* border-color *(Color)*\n* border-width *(Number)*\n* corner-radius *(Number)*\n* font-color *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* text-shadow-color *(Color)*\n* text-shadow-offset *(Offset)*\n\n#### BarButtonBack\n\n*UIBarButtonItem back button, inherits from BarButton*\n\n* background-color *(Color)*\n* background-image *(Image)*\n* background-image-insets *(Box)*\n* background-tint-color *(Color)*\n* border-color *(Color)*\n* border-width *(Number)*\n* corner-radius *(Number)*\n* font-color *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* text-shadow-color *(Color)*\n* text-shadow-offset *(Offset)*\n\n#### Button\n\n*UIButton*\n* background-color *(Color)*\n* background-color-normal *(Color)*\n* background-color-top/background-color-bottom *(Gradient)*\n* background-color-disabled *(Color)*\n* background-color-highlighted *(Color)*\n* background-color-selected *(Color)*\n* background-color-selected-highlighted *(Color)*\n* background-image *(Image)*\n* background-image-insets *(Box)*\n* background-image-disabled *(Image)*\n* background-image-disabled-insets *(Box)*\n* background-image-highlighted *(Image)*\n* background-image-highlighted-insets *(Box)*\n* background-image-selected *(Image)*\n* background-image-selected-insets *(Box)*\n* background-image-selected-disabled *(Image)*\n* background-image-selected-disabled-insets *(Box)*\n* background-image-selected-highlighted *(Image)*\n* background-image-selected-highlighted-insets *(Box)*\n* border-color *(Color)*\n* border-width *(Number)*\n* content-insets *(Box)*\n* corner-radius *(Number)*\n* font-color *(Color)*\n* font-color-disabled *(Color)*\n* font-color-highlighted *(Color)*\n* font-color-selected *(Color)*\n* font-color-selected-disabled *(Color)*\n* font-color-selected-highlighted *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* height *(Number)*\n* image *(Image)*\n* image-insets *(Box)*\n* image-disabled *(Image)*\n* image-disabled-insets *(Box)*\n* image-highlighted *(Image)*\n* image-highlighted-insets *(Box)*\n* image-selected *(Image)*\n* image-selected-insets *(Box)*\n* image-selected-disabled *(Image)*\n* image-selected-disabled-insets *(Box)*\n* image-selected-highlighted *(Image)*\n* image-selected-highlighted-insets *(Box)*\n* padding *(Box)*\n* shadow-color *(Color)*\n* shadow-offset *(Offset)*\n* shadow-opacity *(Number)*\n* shadow-radius *(Number)*\n* text-align *(TextAlign)*\n* text-alpha *(Number)*\n* text-auto-fit *(Boolean)*\n* text-shadow-color *(Color)*\n* text-shadow-color-disabled *(Color)*\n* text-shadow-color-highlighted *(Color)*\n* text-shadow-color-selected *(Color)*\n* text-shadow-color-selected-disabled *(Color)*\n* text-shadow-color-selected-highlighted *(Color)*\n* text-shadow-offset *(Offset)*\n* text-transform *(TextTransform)*\n* title-insets *(Box)*\n* width *(Number)*\n\n#### Control\n\n*UIControl*\n\n* background-color *(Color)*\n* background-image *(Image)*\n* border-color *(Color)*\n* border-width *(Number)*\n* corner-radius *(Number)*\n* shadow-color *(Color)*\n* shadow-offset *(Offset)*\n* shadow-opacity *(Number)*\n* shadow-radius *(Number)*\n\n#### Label\n\n*UILabel*\n\n* background-color *(Color)*\n* border-color *(Color)*\n* border-width *(Number)*\n* corner-radius *(Number)*\n* font-color *(Color)*\n* font-color-highlighted *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* height *(Number)*\n* shadow-color *(Color)*\n* shadow-offset *(Offset)*\n* shadow-opacity *(Number)*\n* shadow-radius *(Number)*\n* text-align *(TextAlign)*\n* text-alpha *(Number)*\n* text-auto-fit *(Boolean)*\n* text-line-clamp *(Integer)*\n* text-shadow-color *(Color)*\n* text-shadow-offset *(Offset)*\n* text-transform *(TextTransform)*\n* width *(Number)*\n\n#### NavigationBar\n\n*UINavigationBar*\n\n* bar-tint-color *(Color)*\n* background-color *(Color)*\n* background-color-top/background-color-bottom *(Gradient)*\n* background-image *(Image)*\n* background-image-insets *(Box)*\n* background-tint-color *(Color)*\n* font-color *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* shadow-image *(Image)*\n* text-shadow-color *(Color)*\n* text-shadow-offset *(Offset)*\n* title-vertical-offset *(Number)*\n\n#### PageControl\n\n*UIPageControl*\n\n* color *(Color)*   `pageIndicatorTintColor`\n* current-color *(Color)* `currentPageIndicatorTintColor`\n\n#### Progress\n\n*UIProgressView*\n\n* progress-image *(Image)*\n* progress-tint-color *(Color)*\n* track-image *(Image)*\n* track-tint-color *(Color)*\n* width *(Number)*\n\n#### SearchBar\n\n*UISearchBar*\n\n* background-color *(Color)*\n* background-color-top/background-color-bottom *(Gradient)*\n* background-image *(Image)*\n* background-tint-color *(Color)*\n* scope-background-color *(Color)*\n* scope-background-image *(Image)*\n\n#### SearchBarButton\n\n*UISearchBar button, inherits from BarButton*\n\nSee Button\n\n#### SearchBarScopeBar\n\n*UISearchBar scope bar, inherits from SegmentedControl*\n\nSee SegmentedControl\n\n#### SegmentedControl\n\n*UISegmentedControl*\n\n* background-color *(Color)*\n* background-color-selected *(Color)*\n* background-image *(Image)*\n* background-image-insets *(Box)*\n* background-image-selected *(Image)*\n* background-image-selected-insets *(Box)*\n* background-tint-color *(Color)*\n* border-color *(Color)*\n* border-width *(Number)*\n* corner-radius *(Number)*\n* divider-color *(Color)*\n* divider-image *(Image)*\n* font-color *(Color)*\n* font-color-selected *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* text-shadow-color *(Color)*\n* text-shadow-color-selected *(Color)*\n* text-shadow-offset *(Offset)*\n* text-shadow-offset-selected *(Offset)*\n\n#### Slider\n\n*UISlider*\n\n* minimum-track-tint-color *(Color)*\n* maximum-track-tint-color *(Color)*\n* minimum-value-image *(Image)*\n* maximum-value-image *(Image)*\n* thumb-image *(Image)*\n* thumb-tint-color *(Color)*\n\n#### Switch\n\n*UISwitch*\n\n* background-color *(Color)*\n* off-image *(Image)*\n* off-image-insets *(Box)*\n* on-image *(Image)*\n* on-image-insets *(Box)*\n* on-tint-color *(Color)*\n* thumb-tint-color *(Color)*\n* tint-color *(Color)*\n\n#### TabBar\n\n*UITabBar*\n\n* bar-tint-color *(Color)*\n* background-color *(Color)*\n* background-color-top/background-color-bottom *(Gradient)*\n* background-image *(Image)*\n* background-image-insets *(Box)*\n* background-tint-color *(Color)*\n* selected-image *(Image)*\n* selected-image-tint-color *(Color)*\n\n#### TabBarItem\n\n*UITabBarItem*\n\n* background-image-selected *(Image)*\n* background-image-selected-insets *(Box)*\n* finished-image *(Image)*\n* finished-image-selected *(Image)*\n* font-color *(Color)*\n* font-color-selected *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* text-offset *(Offset)*\n* text-shadow-color *(Color)*\n* text-shadow-offset *(Offset)*\n\n#### Table\n\n*UITableView*\n\n* background-color *(Color)*\n* background-color-top/background-color-bottom *(Gradient)*\n* row-height *(Number)*\n* separator-color *(Color)*\n* separator-style *(SeparatorStyle)*\n\n#### TableCell\n\n*UITableViewCell*\n\n* tint-color *(Color)*\n* background-color *(Color)*\n* background-color-top/background-color-bottom *(Gradient)*\n* background-color-selected *(Color)*\n* background-color-top-selected/background-color-bottom-selected *(Gradient)*\n* font-color *(Color)*\n* font-color-highlighted *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* text-align *(TextAlign)*\n* text-alpha *(Number)*\n* text-auto-fit *(Boolean)*\n* text-shadow-color *(Color)*\n* text-shadow-offset *(Offset)*\n\n#### TableCellContentView\n\nThe content view of a *UITableViewCell*\n\n* *all attributes supported by UIView*\n\n#### TableCellDetail\n\nThe detail label of a *UITableViewCell*\n\n* font-color *(Color)*\n* font-color-highlighted *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* text-align *(TextAlign)*\n* text-alpha *(Number)*\n* text-auto-fit *(Boolean)*\n* text-shadow-color *(Color)*\n* text-shadow-offset *(Offset)*\n\n#### Toolbar\n\n*UIToolbar*\n\n* background-color *(Color)*\n* background-image-top *(Image)*\n* background-image-bottom *(Image)*\n* background-image-top-landscape *(Image)*\n* background-image-bottom-landscape *(Image)*\n* background-tint-color *(Color)*\n* shadow-image *(Image)*\n* shadow-image-top *(Image)*\n* shadow-image-bottom *(Image)*\n\n#### TextField\n\n*UITextField*\n\n* background-color *(Color)*\n* background-image *(Image)*\n* background-image-insets *(Box)*\n* border-color *(Color)*\n* border-style *(BorderStyle)*\n* border-width *(Number)*\n* corner-radius *(Number)*\n* text-align *(TextAlign)*\n* text-alpha *(Number)*\n* text-auto-fit *(Boolean)*\n* font-color *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* height *(Number)*\n* padding *(Box)*\n* shadow-color *(Color)*\n* shadow-offset *(Offset)*\n* shadow-opacity *(Number)*\n* shadow-radius *(Number)*\n* tint-color *(Color)*\n* vertical-align *(VerticalAlign)*\n* horizontal-align *(HorizontalAlign)*\n* width *(Number)*\n* keyboard-appearance *(KeyboardAppearance)*\n\n#### TextView\n\n*UITextView*\n\n* font-color *(Color)*\n* font-name *(FontName)*\n* font-size *(Number)*\n* padding *(Box)*\n* keyboard-appearance *(KeyboardAppearance)*\n* *all other attributes supported by UIView*\n\n#### View\n\n*UIView*\n\n* background-color *(Color)*\n* background-image *(Image)*\n* border-color *(Color)*\n* border-width *(Number)*\n* corner-radius *(Number)*\n* height *(Number)*\n* shadow-color *(Color)*\n* shadow-offset *(Offset)*\n* shadow-opacity *(Number)*\n* shadow-radius *(Number)*\n* width *(Number)*\n\n#### Window\n\n*UIWindow*\n\n* background-color *(Color)*\n\nStyle Value Types\n-----------------\n\n* **Boolean** - A boolean (`true` or `false`)\n* **BorderStyle** - A border style, as rendered by a UITextBorderStyle. Accepted values are `none`, `line`, `bezel`, and `rounded`.\n* **Box** - A series of 1 to 4 integers that specify the widths of a box's edges. Interpreted like CSS's `padding` and `margin` properties (top, right, bottom, left). Examples: `15` (a box with a width of 15 for each edge), `10 15` (a box with a width of 10 for the top and bottom edges and 15 for the right and left edges)\n* **Color** - A hex color (e.g. `#FF0000`); a rgb, rgba, hsl, or hsla expression (e.g. `rgb(255,0,0)` or `hsla(0.5, 0, 1.0, 0.5)`); or a color name that UIColor has a related method name for (e.g. `red`, `yellow`, `clear`). If `[UIColor redColor]` is supported, then `red` is supported.\n* **FontName** - A font name. See available values [here](http://iosfonts.com/). Can also be one of the following:\n  * `system`\n  * `boldSystem`\n  * `italicSystem`\n  * `blackSystem`\n  * `heavySystem`\n  * `lightSystem`\n  * `mediumSystem`\n  * `semiboldSystem`\n  * `thinSystem`\n  * `ultraLightSystem`\n* **Gradient** - Two Colors that will create a vertical gradient. background-color-top and background-color-bottom need to be defined in separate .nss properties.\n* **Image** - A name of an image, as used in `[UIImage imageNamed:name]` (e.g. `MyImage.png`).\n* **Number** - A number (e.g. `-1`, `4.5`)\n* **Offset** - Two numbers comprising the horizontal and vertical values of an offset (e.g. `-1,1`)\n* **SeparatorStyle** - A separator style, as rendered by a UITableViewSeparatorStyle. Accepted values are `none`, `single-line`, and `single-line-etched`.\n* **TextAlign** - A text alignment (e.g. `left`, `right`, `center`)\n* **TextTransform** - A text transform (e.g. `uppercase`, `lowercase`, `capitalize`, `none`)\n* **VerticalAlign** - A vertical alignment (e.g. `top`, `center`, `bottom`, `fill`)\n* **KeyboardAppearance** - A keyboard appearance (e.g.  `default`, `dark`, `light`, `alert`)\n\nFAQ\n---\n\n#### How can I contribute?\n\nContributers are extremely appreciated! NUI covers a lot of ground, but there are still a number of elements and properties that are unsupported. Adding support for new properties is easy (take a look at [NUIButtonRenderer](https://github.com/tombenner/nui/blob/master/NUI/Core/Renderers/NUIButtonRenderer.m) for examples). There are also a number of exciting big features that on the [Roadmap](https://github.com/tombenner/nui/wiki/Roadmap) that are up for grabs. We're also always looking for new themes, so feel free to add those, too!\n\n#### What advantages does this have over UIAppearance?\n\nUIAppearance is alright, but it's unintuitive, time-consuming, and it doesn't support either the granularity or number of style modifications that NUI does. Styling should be abstracted in a simple stylesheet with simple property definitions; you shouldn't have to stare at long, nested method calls and have to dig through Apple's documentation every time you want to make a small styling modification.\n\n#### I have an app that uses NUI; can I add a link to it here?\n\nSure! Feel free to add it to [Apps Using NUI](https://github.com/tombenner/nui/wiki/Apps-Using-NUI).\n\n#### Do you know about Pixate?\n\nYep! It's unclear when it will be launched, it won't be free (in either meaning of the word, likely), and the jury is still out on how good of a product it'll be. I prefer free, lightweight solutions.\n\n#### How is \"NUI\" pronounced?\n\n\"New-ee\". (It rhymes with \"GUI\", of course.)\n\nLicense\n-------\n\nNUI is released under the MIT License. Please see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftombenner%2Fnui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftombenner%2Fnui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftombenner%2Fnui/lists"}