NativeCSS StudioCSS Selectors identify which view to style. This documentation describes different ways to select a view.
Let’s style this with some CSS:
label{border:5px solid gold}
We applied a border to all our labels. This is the foundation of CSS styling: select a view and apply a style.
Style Guide
You might not know what name to use in your CSS.
Our style guide makes this easy, by displaying CSS names for all your views:
view{
-ncss-style-guide-visible:true
}
The views are annotated with text like “button#button”. You can style all views of this type with simply button or style only this view with #button. These are called tagnames and ids. The tagnames and id’s are setup in your app’s code.
CSS Shorthand
The more technically minded of you may be asking, how did label{border:5px solid gold} style a UILabel in iOS and TextView in Android?
Styling across platforms should be simple and aliases help to simplify your css.
For example you could style with:
UILabel, TextView{
border:5px solid gold
}
But, you’ll soon become miserable.
These aliases work so that ‘label’ => UILabel, TextView(Read Only) for iOS and Android respectively.
In general, use lowercase names and drop the UI for all views.
To make life easier we’ve also added the following aliases:
img{border:2px solid gold}
#form input{
border:2px solid gold
}
#form input[type=text]{
border:2px solid gold
}
#form input[type=password]{
border:2px solid gold
}
#form input[type=button]{
border:2px solid gold
}
Styling Screens
Web pages typically have their own CSS file, this applies CSS only to this page.
In native development we call page a controller. Different controllers are like different web pages.
To limiting styling to a controller add its name to the CSS selector. You can find its name in Xcode / Eclipse or by using our style guide.
controller label{
border:5px solid gold
}
If the name doesn’t match the CSS isn’t applied.
logincontroller label{
border:5px solid gold
}
Controller aliases work so that ‘logincontroller’ => UILoginController, UILoginViewController, NCLoginController, NCLoginViewController and LoginActivity.
Aliases make your CSS shorter and more cross platform compatible.
Selecting Platforms
Sometimes you only need to select either Android or iOS only.
Simply prefix any selector with ios or android to style either iOS or Android only.
ios label, android button{
border:10px solid gold
}
Sometimes you want to style only one OS version, say iOS7.
Simply prefix any selector with -min-ios7 or -min-android4.2 to style the latest versions of iOS or Android only.
6
7
max-ios6 button{
background:silver
}
min-ios7.0 button{
background:gold
}
Reference
To understand the more advanced selectors, let’s look at some simple views.
If you look below you’ll see how these views are defined – don’t worry if you don’t understand the syntax – nobody does!
In the screenshot we have an image of our logo, this is defined, below, as an image view called ‘image’ for iOS, Android and the web.
Every view above ties in the same way. That’s all – not too bad eh?
Don’t forget you can add CSS ids and classes to any views in code:
The following table uses the views above and applies the more complicated selectors.
Note: this is a bug and will be changed in a future release.
nativeCSS can access text values, this is a nativeCSS enhancement.
