NUI : Style iOS Apps With CSS Like Stylesheet


NUI is a UI kit for iOS that lets you style UI elements using a stylesheet, similar to CSS. The styling is declared using a syntax very similar to CSS with support for variables. With NUI you can update the visual appearance of an entire application easily and quickly, set styles of UI elements using simple rules, modify styling in runtime. NUI can be installed using CocoaPods or by copying it into your app project. Once NUI is added, you can customize the styling by editing the NUIStyle.nss file. Below is an example of the code syntax it uses.

@primaryFontName: AppleGothic;
@secondaryFontName: HelveticaNeue-Light;
@secondaryFontNameBold: HelveticaNeue;
@secondaryFontNameStrong: HelveticaNeue-Medium;
@inputFontName: HelveticaNeue;
@primaryFontColor: #555555;
@secondaryFontColor: #888888;
@primaryBackgroundColor: #E6E6E6;
@primaryBackgroundTintColor: #ECECEC;
@primaryBackgroundColorTop: #F3F3F3;
@primaryBackgroundColorBottom: #E6E6E6;
@primaryBackgroundColorBottomStrong: #DDDDDD;
@secondaryBackgroundColorTop: #FCFCFC;
@secondaryBackgroundColorBottom: #F9F9F9;
@primaryBorderColor: #A2A2A2;
@primaryBorderWidth: 1;

BarButton {
    background-color: @primaryBackgroundColor;
    background-color-highlighted: #CCCCCC;
    border-color: @primaryBorderColor;
    border-width: @primaryBorderWidth;
    corner-radius: 7;
    font-name: @secondaryFontNameBold;
    font-color: @primaryFontColor;
    font-color-disabled: @secondaryFontColor;
    font-size: 13;
    text-shadow-color: clear;




pod 'NUI', '~> 0.4.0'
  • Add [NUIAppearance init]; to application:didFinishLaunchingWithOptions in AppDelegate.m
  • Add [NUISettings init]; to @autoreleasepool in main() in main.m
Facebook Twitter Google Reddit LinkedIn

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *