MCSS Syntax
MCSS is a rule-set consists of a selector and a declaration block containing a pair of properties and values: selector { property1: value1; property2: value2; }
.
Most of the MCSS syntax is inherited from CSS syntax, with the main difference that the selector names are oriented to the native mobile app components as buttons, textfields views, tables and others.
Selectors
Selector is the part of the rule defined to reference the component or components in a view to be affected with the properties inside of the block.
Simple Selectors
Like CSS, the simple selectors can locate elements based on name of component, id or class:
-
By indicating the name of a component:
button {...}; textfield {...};
-
By indicating a class, using a point (.) before the class name:
.primary {...}; .rounded {...};
-
By indicating an id, using a sharp sign (#) before the identificator:
#signup-button {...}
-
By indicating name and class at the same time:
button.primary {...}
Note: MCSS recognizes selectors indicating a name and id but it is considered an overqualification.
Grouping Selectors
The grouping selector selects all native elements with the same style definitions, the selector to be grouped must be separated by comma, each selector grouped will adopt the style applied in the selector.
Example:
button.link, label{
font-weight:bold;
color: blue;
}
Combinator Selectors
A combinator selectors are two or more simple selectors joined by a combinator operator. The available combinator operators in MCSS are:
-
Descendant selector (space)
Matches the second selectors inside of the first selector even if the first component is not the direct ancestor of the second.
Example:
table button{...}
Select all buttons inside of a table.
-
Child selector (>)
Matches the second selectors inside of the first selector being the second component the direct child of the first component
Example:
#contact-form > switch{...}
Select all switches inside a view with the ‘contact-form’ id but not the switches inside a subview of this form.
-
General sibling selector (~)
Matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.
Example:
label.field-description ~ textfield{...}
select all textfields that follow a label with the class field-description, in this case not only the next element to the label could be selected, other textfield inside the same parent could be selected too.
Universal Selector
The universal selector (*) select all elements, the developer can combine the universal selector with other selector using combinators.
*{
color:blue;
}
Collection *{
background: red:
}
Components
The name components in MCSS vary substantially from css for html, because they are oriented to point to the different components in a mobile view. Some components may be different between Android and iOS.
Available component names for iOS:
The name of the components in MCSS will be the same name of the UIKit Classes, but omitting the UI prefix, in some cases, the word view is omitted too.
iOS Component Names:
View
Button
Label
TextField
TextView
ScrollView
SegmentedControl
Table
TableCell
Collection
CollectionCell
WebView
Image
Slider
Switch
Picker
DatePicker
Stepper
ProgressIndicator
PageControl
SplitView
SearchBar
Map
NavigationBar
TabBar
Every component in your views can be edited by MCSS, even if not is in the list or is a personalized component. The uncategorized components will be treated as views, but could access to the most of the MCSS properties.
Example:
button{...};
tablecell,collectioncell{...};
Android Component Names:
Button
ImageButton
ChipGroup
Chip
CheckBox
RadioGroup
RadioButton
ToggleButton
Switch
FloatingActionButton
CalendarView
Horizontal Divider
ImageView
ProgressBar (Horizontal)
ProgressBar
RatingBar
SearchView
SeekBar (Discrete)
SeekBar
SurfaceView
TextureView
Vertical Divider
VideoView
<view>
WebView
AppBarLayout
BottomAppBar
BottomNavigationView
CardView
FragmentContainerView
HorizontalScrollView
<include>
MaterialToolBar
NavHostFragment
NavigationView
NestedScrollView
RecyclerView
<requestFocus>
ScrollView
Spinner
TabItem
TabLayout
ToolBar
View
ViewPager2
ViewStub
Barrier (Horizontal)
Barrier (Vertical)
Flow
Guideline (Horizontal)
Guideline (Vertical)
Layer
ImageFilterView
ImageFilterButton
MockView
Group
ConstraintLayout
FrameLayout
LinearLayout (Horizontal)
LinearLayout (Vertical)
Space
TableLayout
TableRow
GridLayout
GridView
ListView
RelativeLayout
TabHost
AutoCompleteTextView
CheckedTextView
MultiAutoCompleteTextView
Plain Text
TextView
Password
Password (Numeric)
Phone
Postal Address
Multiline Text
Time
Date
Number
Number (Signed)
Number (Decimal)
TextInputLayout
AdView
MapView
Properties
background (color | image):
The background property sets a color (MCSS color formats) (solid or fading) and/or image (MCSS image methods) of a component.
Supported by:
- iOS:
- All Components
- Android:
- All Components
background-color (color):
The background-color property sets a color (MCSS Color formats) (solid or fading) of a component.
Supported by:
- iOS:
- All Components
- Android:
- All Components
background-image (url | name | gradient):
The background-image sets a background image of a component.
Supported by:
- iOS:
- All Components
- Android:
- All Components
border (none | width | color):
Sets the width and/or color (MCSS Color formats) for the border line of the component can also be set to none to hide the border.
Supported by:
- iOS:
- All Components
- Android:
- All Components
border-width (float):
Sets the width of the border of a component.
Supported by:
- iOS:
- All Components
- Android:
- All Components
border-color (color):
Sets the color (MCSS Color formats) for the border line of a component.
Supported by:
- iOS:
- All Components
- Android:
- All Components
border-radius (px | percentage):
Sets the value of the curvature at the edge of a component, use px to set a specific value or a percentage value. The percentage in MCSS sets the width and height of a component, with 0% being a square component and 100% being a circled component.
Supported by:
- iOS:
- All Components
- Android:
- All Components
color (hex | hsl | rgb | rgba | name):
Sets the color value of the text component's content.
Supported by:
- iOS:
- All Components
- Android:
- All Components
box-shadow (color offsetx offsety radius):
Adds shadow effect around the frame of a component, multiple effects can be set separated by commas. The shadow box is described by X and Y offsets, blur and scatter radius, and color relative to the component.
Supported by:
- iOS:
- All Components
- Android:
- Not supported yet
text-align (center | left | right | justify | natural):
Sets the horizontal alignment of a text in a component.
Supported by:
- iOS:
- TextField
- SearchBar
- TextView
- Label
- Button
- TableViewCell
- Android:
- TextField
text-transform (lowercase | uppercase | uppercase-words | capitalize):
Sets case-sensitivity text of a component, it can be used to set the text uppercase, lowercase, or first letter of each word in uppercase.
Supported by:
- iOS:
- TextField
- SearchBar
- TextView
- Label
- Button
- TableViewCell
- Android:
- Not supported yet
font-size (float):
Sets the size of a component's font.
Supported by:
- iOS:
- TextField
- SearchBar
- TextView
- Label
- Button
- TableViewCell
- Android:
- All Components
font-weight (float(100, 200, 300, 400, ...) | name(ultralight, light, normal, bold, black)):
Sets the thickness of a character in the text.
Supported by:
- iOS:
- TextField
- SearchBar
- TextView
- Label
- Button
- TableViewCell
- Android:
- Just supported with name in this release
font-name (string):
Sets the name of a component's font.
Supported by:
- iOS:
- TextField
- SearchBar
- TextView
- Label
- Button
- TableViewCell
- Android:
- All Components
line-height (float):
Sets the height of a cell. Commonly used to set the distance between lines of text.
Supported by:
- iOS:
- TextField
- SearchBar
- TextView
- Label
- Button
- TableViewCell
- Android:
- Not supported yet
visibilty (visible | hidden):
Sets whether a component is visible or invisible.
Supported by:
- iOS:
- All Components
- Android:
- All Components
opacity (float | percentage):
Sets the opacity level of a component.
Supported by:
- iOS:
- All Components
- Android:
- Not supported yet
overflow (visible | hidden):
Sets the action taken if content overflows within the cell of a component. Content can be clipped or scrollbars can be added when the content of a component is too large to fit in a specific area.
Supported by:
- iOS:
- All Components
- Android:
- Not supported yet
placeholder-text (string):
Sets the temporary text in a component.
Supported by:
- iOS:
- Textfield
- TextView
- Searchbar
- Android:
- Not supported yet
placeholder-color (hex | hsl | rgb | rgba | name):
Sets the color of the temporary text in a component.
Supported by:
- iOS:
- Textfield
- TextView
- Searchbar
- Android:
- Not supported yet
max-lines (int):
Limits the content of a block to a maximum number of lines before it is trimmed.
Supported by:
- iOS:
- Label
- Android:
- Not supported yet
icon-image (url | name):
Sets an image or icon to a component.
Supported by:
- iOS:
- Button
- Label
- Android:
- Not supported yet
Color Formats
MCSS allows you to change multiple property colors in you components as border color background color and others.
You can edit the color of these properties using different formats according to your preferences:
Indicating the color name:
MCSS recognizes 140+ color names that you can specify in your style sheets.

Examples:
background:red;
background-color: palegoldenrod;
border-color: transparent;
background-image:linear-gradient(top,tomato 0%,gold 100%);
Hexadecimal:
You can specify your color in the hexadecimal formats shown below:
- Hex 3 digits: #RGB
- Hex 4 digits: #RGBA
- Hex 6 digits: #RRGGBB
- Hex 8 digits: #RRGGBBAA
Each digit must be between 0 and F, and indicates a value for the color channel red, green or blue, in the case of 4 and 8 digits, the A indicates the alpha channel ( transparency level )
Examples:
background:#FFF;
background-color: #ED4C6755;
border-color: #000F;
background-image:linear-gradient(top,#ff00ff55 0%,#00FFCC00 100%);
RGB and RGBA:
MCSS supports the functions RGB and RGBA where the values for channels red, green and blue must be specified with values from 0 until 255, in the case of RGBA, the alpha value must be a float from 0 to 1 or a percentage value.
Examples:
background:rgb(0,255,0);
Background-color: RGB(24,50,155);
border-color: RGBA(255,0,128,0.5);
color: rgba(255,50,50,100%);
HSL and HSLA:
This pair of functions receive a value from 0 until 360 to the hue parameter, percentage values to saturation and lightness and a value for the alpha channel which can be specified as a percentage value or with a float from 0 until 1.
Examples:
background:hsl(300,20%,0%);
Background-color: HSL(90,50%,100%);
border-color: HSLA(45,0%,50%,0.5);
color: hsla(128,50%,50%,100%);
Functions
Url:
Allows you to get resources on internet indicating the full path.
Format:
url(url: String)
Parameters:
url: String indicating the route to the resource.
Example:
background: url('https://www.myserver.com/resorurces/myimage.jpg');
Local:
Returns a resource in the local directory of the application project by indicating the name of it.
Format:
local(name: String)
Parameters:
name: String indicating the name of the resource
Example:
background: local('myimage');
MCSS-Icon:
Obtains an icon from the MCSS Icon Gallery, View the complete list of available icons here.
Format:
mcss-icon(name:String, size: dimension, color: color)
Parameters:
- name: String indicating the name of the icon or the name and line
- size (optional): A value indicating the size of the icon, can be specified in px or as a scale (x,2x,3x,...7x)
- color (optional): The color to draw the icon it can be indicated in any format as name, hex, rgba or hsla. When the color is not indicated, the icon will mantai the original colors.
Examples:
background-image: mcss-icon('battery.slash.regular',50px);
background-image: mcss-icon('battery.slash',50px,red);
background-image: mcss-icon('battery.slash.bold',5x,#FF00FF);
SF-Symbol:
Available only for iOS, obtains a system icon from the iOS SDK. Read more about the SF Symbols.
Format:
sf-symbol(name:String, size: dimension, color: color)
Parameters:
- name: String indicating the name of the icon
- size (optional): A value indicating the size of the icon, can be specified in px or as a scale (x,2x,3x,...7x)
- color (optional): The color to draw the icon, it can be indicated in any format as name, hex, rgba or hsla
Examples:
background-image: sf-symbol('battery.100', 50px);
background-image: sf-symbol('battery.100', 50px, red);
background-image: sf-symbol('battery.100', 5x, original);
Linear-Gradient:
This function can draw an image representing a transition of two or more colors.
Format
linear-gradient(angle,[color, position1, position2])
Parameters:
- Angle: indicates the direction of the pattern can be specified in three different formats:
- Direction: to left, to right, to top, to bottom, to top left, to top right, to bottom left, to bottom right.
- Degs: a value from 0 to 360 for example 45deg.
- Turns: a value from 0 to 1 for example 0.5turn.
- Color: Is the color to draw in the current detention, it can be indicated in any format as name, hex, rgba or hsla;
- Positions: Optionally for each detention can be indicated the start and end position of the color as a percentage value;
Examples:
background-image: linear-gradient(to bottom, red, blue);
background-image: linear-gradient(45 deg, black 0, red 20%, #FCC, white );
background-image: linear-gradient(.25 turn, red 0% 50%, orange, yellow, green, blue);
Color functions:
Review the section MCSS Color format and get information about RGB, RGBA, HSL and HSLA functions.