Defining objects
Old Syntax
==============================
header #header
header.icon #header img.icon
header.title #header h3
==============================
New Syntax
@objects
header #header
icon img.icon
title h3
Sections and tags definition
Old Syntax
@ Section name | mobile, tablet
------------------------------
# ...
# ...
@ ^ | desktop
------------------------------
# ...
# ...
New Syntax
= Section name =
@on mobile, tablet
# ...
# ...
@on desktop
# ...
# ...
Objects and specs
Notice that the colon symbol appeared in the object declaration at the end. And also colon was moved from specs declaration
Old Syntax
menu-item-1
height: 30px
aligned horizontally all: menu-item-2
New Syntax
menu-item-1:
height 30px
aligned horizontally all menu-item-2
Text validations
Now instead of colon you have to define the text using double-quotes.
Old Syntax
menu-item-1
css font-family is: Arial
text is: Home
New Syntax
menu-item-1:
css font-family is "Arial"
text is "Home"
Some specs renamed
Old Syntax
object
left of: another-object 10 px
right of: other-object 5px
color scheme: 10% black
New Syntax
object:
left-of another-object 10 px
right-of other-object 5px
color-scheme 10% black
Iterating over objects
Old Syntax
[ 1 - 5 ]
menu-item-@
width: 100px
New Syntax
@for [1 - 5] as i
menu-item-${i}:
width 100px
Iterating over all objects matching expression
Old Syntax
[ 1 - ${count("menu-item-*")} ]
menu-item-@
width: 100px
New Syntax
@forEach [menu-item-*] as menuItem
${menuItem}:
width 100px
Referencing previous item when iterating
Old Syntax
[ 2 - ${count("menu-item-*")} ]
menu-item-@
right of: menu-item-@{-1} 10px
New Syntax
@forEach [menu-item-*] as mi, prev as pi
${mi}:
right-of ${pi} 10px
Conditions
Old Syntax
@@ if
banner-1
visible
@@ do
banner-1
inside: container 0px top left
@@ otherwise
banner-2
inside: container 0px top left
@@ end
New Syntax
@if ${isVisible("banner-1")}
banner-1:
inside container 0px top left
@else
banner-2:
inside container 0px top left
Conditions. Another example
Old Syntax
@@ if
banner-1
width: 400px
@@ do
banner-1
centered horizontally inside: main
@@ otherwise
banner-1
inside: main 0px left right
@@ end
New Syntax
banner-1:
@if ${find("banner-1").width() == 400}
centered horizontally inside main
@else
inside main 0px left right
Comments
We have moved all the discussions to Google Groups. From this moment, if you have problems with your test code or some issues with installation, please ask your questions in https://groups.google.com/forum/#!forum/galen-framework.