Galen Specs Language 2.0 comparison with old version

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 are moving 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. This way more people will be able to help you.

comments powered by Disqus