Pixate是一个框架使用CSS样式本地组件

http://www.pixate.com/docs/framework/ios/2.0/getting-started/

Pixate是一个框架使用CSS样式本地组件。它提供了简单性和灵活性的CSS样式相同的本地iOS组件附带XCode。

Pixate不是一个web框架。如果您已经熟悉使用CSS的网页,你会感觉像在家里一样Pixate使用。如果你从未使用CSS之前,请相信我们,这将使前端开发变得容易很多。

这五分钟的指导将告诉你如何得到工作在你的Pixate XCode项目,使用CSS样式本地组件。

Getting Started with Pixate

Pixate is a framework for styling native components using CSS. It provides the simplicity and flexibility of CSS to style the same native iOS components that ship with XCode.

Pixate is not a web framework. If you're already familiar with using CSS on the web, you're going to feel right at home using Pixate. If you've never used CSS before, trust us, this is going to make front end development a lot easier.

This five-minute guide will show you how to get Pixate working inside of your XCode project, and styling native components using CSS.

Installation

If you haven't already download Pixate. Then, copy the Pixate folder to a convenient location.

App Setup

Here's how to get Pixate working in your native iOS app. There are three steps:

1. Add Pixate to your XCode project.

First, start a new project in XCode. Configure it however you like.

New Xcode Project

Then, add Pixate.framework to the frameworks folder of your project and add -ObjC to the Other Linker Flagsin Build Settings.

2. Add the Linked Libraries that Pixate needs.

Before you use Pixate, CoreText.framework and QuartzCore.framework need to be added to your project.

3. Insert Pixate calls introduction source files.

To enable the Pixate Engine in your app, you'll need to set the styleMode of your app's window and call the Pixate initializer, passing it your license key and username.

In AppDelegate.m, add an `#import` statement and this `styleMode` call.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  <em>...your other code here...</em>

  //Must go above makeKeyAndVisible call, if it's there.
  <strong>self.window.styleMode = PXStylingNormal;</strong>

  [self.window makeKeyAndVisible]; // &lt;-- This line won't be here,
                                   //     if you're using storyboards.

  return YES;
}

Note: If you are using storyboards, you will not have the makeKeyAndVisible call. Simply place the styleMode call right before return YES;.

In main.m, add this `Pixate` call, with your license information.

#import <UIKit/UIKit.h>;
#import <Pixate/Pixate.h>;

#import "AppDelegate.h"

int main(int argc, char *argv[])
{
  @autoreleasepool {
      [Pixate licenseKey:@"YOUR LICENSE KEY" forUser:@"YOUR USER NAME"];
      return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
  }
}

Note: Pixate will still work without a License Key. If you haven't entered your key, a splash screen will appear every time your app launches.

CSS in your Native App

Let's make a simple app that styles a button using Pixate. We're going to make a green button, on a white background using this CSS:

view {
  background-color: #ffffff
}

.btn-green {
  color            : #446620;
  background-color : linear-gradient(#87c44a, #b4da77);
  border-width     : 1px;
  border-color     : #84a254;
  border-style     : solid;
  border-radius    : 10px;
  font-size        : 13px;
}

Congratulations! You are now using CSS to style a native application.

Now what?

Now that you understand the basics of using Pixate, it might be a good time to check out the docs, which cover how to use Pixate for other native components.

It's worth noting that, while Pixate uses the same CSS syntax as the web, it does not use all of the same property names as the web does. Native apps have different properties, and so does our CSS.

If you're new to CSS, this guide by Code Academy is a good place to start.

And of course, if you have any questions, you can always get them answered by Pixate engineers and the Pixate community at answers.pixate.com.

Happy coding!