CSS in Mobile Apps
-
Upload
baljeet-singh -
Category
Technology
-
view
80 -
download
1
Transcript of CSS in Mobile Apps
![Page 1: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/1.jpg)
CSS for iOSPixate is a free framework that lets
you style your native iOS views with stylesheets.
![Page 2: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/2.jpg)
![Page 3: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/3.jpg)
![Page 4: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/4.jpg)
Demo Session1.Download Pixate Framwork from http://pixate.com
![Page 5: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/5.jpg)
Demo Session2.Create a new Project in Xcode 5 with Single View Application
![Page 6: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/6.jpg)
Demo Session3.Open Pixate package and Drag & Drop Pixate.framework in the Project.
Don’t forget to mark “Copy items into destination group’s folder” and Create groups for added added folders.
![Page 7: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/7.jpg)
Demo Session3.Now add CoreText and QuartzCore frameworks in the bundle from Build Phases.
Don’t forget to mark “Copy items into destination group’s folder” and Create groups for added added folders.
![Page 8: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/8.jpg)
Demo Session3.Add “–ObjC” in other linker flags
![Page 9: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/9.jpg)
Demo Session3.Open Storyboard and Drag a button on the respective View Controller. As you can see there is no CSS Design at all.
![Page 10: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/10.jpg)
Demo SessionNow Create a New File within the Project. Select Others option from the Left Panel under iOS section ,select Empty File and click Next . Named the file as default.css and press Create
![Page 11: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/11.jpg)
Demo SessionIn default.css file you need to create a Class or /and ID for UIControl design. For ex. Create a .btn class for a UIButton
![Page 12: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/12.jpg)
Demo SessionSelect a UIControl and Add a new row under “user Defined Runtime Attributes”
![Page 13: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/13.jpg)
Demo SessionDouble Click on keypath to begin editin and type “styleClass”.Select type String and Class name that you have previously created in the default.css file.
![Page 14: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/14.jpg)
Demo SessionRun the App on Simulator/Device.
![Page 15: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/15.jpg)
My App theme Create with CSS
![Page 16: CSS in Mobile Apps](https://reader034.fdocuments.net/reader034/viewer/2022042715/55a0b5d81a28ab866b8b483e/html5/thumbnails/16.jpg)
Pixate Flexibility