examples.gspec

@import galen-extras/galen-extras-rules.gspec

@objects
    header              #header .middle-wrapper
    box-*               .box-container .box .panel
    menu                #menu  .middle-wrapper
        item-*              ul li
    content             #content
    greeting            #content h1
    footer              #footer .middle-wrapper

@groups
    (box, boxes)                box-*
    (menu_item, menu_items)     menu.item-*
    skeleton_elements           header, menu, content, footer
    skeleton_element            &skeleton_elements
    image_validation            header, menu.item-*


= Skeleton =
    | &skeleton_elements sides are vertically inside screen
    | &skeleton_elements are aligned vertically above each other

    = A page should be centered horizontally inside screen with 900px on desktop, but on mobile and tablet it should stretch to screen =
        | every &skeleton_element is centered horizontally inside screen

        @on desktop
            | every &skeleton_element has width 900px
        @on mobile, tablet
            | every &skeleton_element is aligned vertically all screen

    = Menu items should adapt layout  =
        @on *
            | amount of visible &menu_items should be 4
            | every &menu_item is inside menu and has height ~ 64px
            | first &menu_item is inside menu 0px top left

        @on desktop, tablet
            | &menu_items are aligned horizontally next to each other

        @on mobile
            | &menu_items are rendered in 2 column table layout


= Main Section = 
    = Greeting =
        greeting:
            height 30 to 60px
            inside content 40px top, 20px left right

        @on *
            | amount of visible &boxes should be 3
            | test all &boxes with box-component.gspec

        @on desktop, tablet
            | &boxes are aligned horizontally next to each other with equal distance
            | &box sides are inside content with 20px margin from left and right
            | every &box is below greeting ~ 10px
            | every &box is above footer > 19px

        @on mobile
            | &boxes are aligned vertically above each other with 20px margin
            | every &box is inside content 20px left right
            | first &box is below greeting ~ 10px
            | last &box is above footer > 19px

= If conditions =
    | if all header, menu are visible
        header:
            above menu