To start create your account
Sign Up now

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{...};



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.

transparent
white
black
red
indianred
lightcoral
salmon
darksalmon
lightSalmon
crimson
firebrick
darkred
pink
lightpink
hotpink
deeppink
mediumvioletred
palevioletred
coral
tomato
orangered
darkorange
orange
gold
yellow
lightyellow
lemonchiffon
lightgoldenrodyellow
papayawhip
moccasin
peachpuff
palegoldenrod
khaki
darkkhaki
lavender
thistle
plum
violet
orchid
fuchsia
magenta
mediumorchid
mediumpurple
blueviolet
darkviolet
darkorchid
darkmagenta
purple
rebeccapurple
indigo
mediumslateblue
slateblue
darkslateblue
greenyellow
chartreuse
lawngreen
lime
limegreen
palegreen
lightgreen
mediumspringgreen
springgreen
mediumseagreen
seagreen
forestgreen
green
darkgreen
yellowgreen
olivedrab
olive
darkolivegreen
mediumaquamarine
darkseagreen
lightseagreen
darkcyan
teal
aqua
cyan
lightcyan
paleturquoise
aquamarine
turquoise
mediumturquoise
darkturquoise
cadetblue
steelblue
lightsteelblue
powderblue
lightblue
skyblue
lightskyblue
deepskyblue
dodgerblue
cornflowerblue
royalblue
blue
mediumblue
darkblue
navy
midnightblue
cornsilk
blanchedalmond
bisque
navajowhite
wheat
burlywood
tan
rosybrown
sandybrown
goldenrod
darkgoldenrod
peru
chocolate
saddlebrown
sienna
brown
maroon
snow
honeydew
mintcream
azure
aliceblue
ghostwhite
whitesmoke
seashell
beige
oldlace
floralwhite
ivory
antiquewhite
linen
lavenderblush
mistyrose
gainsboro
lightgray
lightgrey
silver
darkgray
darkgrey
gray
grey
dimgray
dimgrey
lightslategray
lightslategrey
slategray
slategrey
darkslategray
darkslategrey



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.

This function is supported only for iOS Applications

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.