NativeCSS

NativeCSS is a CSS engine for styling iPhone and iPad apps. We all know CSS, so why not put it to work making our apps look beautiful?

Over-The-Air CSS Editing

In addition to bundling CSS with the application executable at compile time, NativeCSS also makes it easy to wirelessly edit the CSS in any app without recompiling. With a simple TCP connection between the iOS device and a separate computer, CSS can be instantly changed and the changes are immediately visible.

Example

The first step is to import the NativeCSS.h header file

#import "NativeCSS.h"

Next, in the viewDidLoad method of a view controller, setup your CSS file parser:

// Create a file object from the bundle
NativeCSSFile *file = [[NativeCSSFile alloc] initWithFilename:@"style.css"];

// Add some view -- a header -- to the view
UIView *header = [[UIView alloc] init];
header.cssIdentifier = @"header";
[self.view addSubview:header];

// Add another view -- a button -- to the view
UIButton *button = [[UIButton alloc] init];
[button addCssClass:@"button"];
[self.view addSubview:button];

// Apply the CSS file to the view controller
[self.view styleWithCSS:file];

The CSS Code

The CSS code used for the framework is syntactically identical to CSS used for the web. Here is a sample that could style the above view controller contents:

UIButton.button
{
    border-radius: 10px;
    border: 1px solid #CCC;
    background-color: #EEE;
    color: #000;
    font-family: "Arial";
}

UIView#header
{
    width: 100%;
    height: 64px;
    left: 0;
    top: 0;
}

Notes about CSS format

  • Tag names, like in browser CSS, are not required. If they are used, however, they should be the name of the class to which the element belongs. The class must be a subclass of UIView.

Supported CSS Properties

  • background-color
  • opacity
  • width
  • height
  • left
  • top
  • color
  • font-family
  • font-size
  • text-align
  • border-width
  • border-color
  • border-radius
  • background-image
  • background-size

Built With

Share this project:

Updates

deleted deleted

deleted deleted posted an update

Over-The-Air CSS debugging is complete! With the new executable cssdebug in Terminal, you can connect remotely to your app and swap out the stylesheets without restarting the app.

Log in or sign up for Devpost to join the conversation.