What if you could do styling, theming and layout in your app in a concise and powerful way, without constantly having to repeat yourself. What if things could be more like the web?

Welcome to InterfaCSS

Simple yet powerful styling

InterfaCSS is a lightweight framework that makes it easy to create reusable styles (or even themes) for your iOS applications, by separating out all the styling information into easily digestible stylesheet files.

InterfaCSS uses an easy to understand styling syntax that is based on the the familiar CSS styling language used on the web (augmented with some Sass/Less-like features, such as nested declarations and variables), which means that you (and your designer) will probably feel right at home. The syntax is incredibly rich - both when it comes to what kind of selectors you can use and what kind of properties you can set.

.standardButton {
   backgroundColor: image("patternImageAsColor.png");
   borderWidth: 3;
   borderColor: fadeout(magenta, 75%);
   cornerRadius: @numberVariable;
}

#helloWorldView {
   backgroundColor: gradient(darken(magenta, 50%), #e4e1e6);

    .standardButton {
      attributedText: "Hello " (foregroundColor: yellow), "World" (foregroundColor: #0000ff);
      transform: rotate(15);
   }
}

BraveNewViewController UITableViewCell .standardButton:landscape {
    titleColor: #7e00ff;
    titleColor(selected): #ff6d10;
}

Stylesheets - standard, scoped or "live"

Use as many stylesheets as you find appropriate in your app - (theming is easily accomplished by using multiple stylesheet files). If you want, you can also limit the scope of a stylesheet, to make sure it's only used in specific view controllers for instance.

ISSStyleSheetScope* scope = [ISSStyleSheetScope scopeWithViewControllerClass:BraveNewViewController.class];
[[InterfaCSS sharedInstance] loadStyleSheetFromMainBundleFile:@"stylesForOnePartOfTheApp.css" withScope:scope];

For development, you can also load "live", auto-refreshable stylesheets, which can be very useful to avoid those pesky compile/deploy/launch/returnToWhereYouWere-cycles when you are fine-tuning your styles. Auto-refreshable stylesheets can either be loaded from a local file (that will be monitored for changes) or from a file located on a remote (HTTP) server (that will be polled at regular intervals).

   [[InterfaCSS interfaCSS] loadRefreshableStyleSheetFromURL:
       [NSURL URLWithString:@"http://www.mygroovycloudprovider.com/user/directory/mymyDazzlingStyles.css"]];

Flexible layouts, the easy way

InterfaCSS lets you define layouts based on values that depend on the position and size of other elements. Layouts are expressed directly in the stylesheet file, and the format is very easy to understand.

#view1 {
    layout: size(25, 25), left(parent.leftMargin), top(parent.topMargin);
}

#view2 {
    layout: size(view1, view1), left(view1.right + 10), top(view1.top);
}

In addition, using a view builder, setting up the UI in your view controllers is a breeze - gone are the days of writing tedious UI setup code or fiddling with unwieldy xib-files or storyboards (but you can still use them just fine with InterfaCSS if you want of course) - simply define your UI in an XML file or do it in code, by using ISSViewBuilder.

XML:

<view id="rootView">
    <view id="view1"/>
    <view id="view2" layout="size(view1, view1), left(view1.right + 10), top(view1.top)"/> <!-- It's possible to define layouts here as well -->
</view>

In code (Swift):

self.view = ISSViewBuilder.rootViewWithId("rootView", withOwner: self, andSubViews: {
    return [
        ISSViewBuilder.viewWithId("view1"),
        ISSViewBuilder.viewWithId("view2"),
    ];
})

And there's more - much, much more

Checkout the GitHub page and Wiki