Skip to content

Instantly share code, notes, and snippets.

@SaiEmaniFlipp

SaiEmaniFlipp/sample.sfml

Last active February 12, 2020 12:28
Show Gist options
  • Save SaiEmaniFlipp/1e5709aea4476f0f4db00638a70de6f8 to your computer and use it in GitHub Desktop.
Save SaiEmaniFlipp/1e5709aea4476f0f4db00638a70de6f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sample.sfml
<storefront xmlns="http://schemas.flipp.com/sfml/2.0" title="STEP by STEP" subtitle="April 20 to April 20" uuid="452435423543254325">
<head>
<!-- styles can control borders, padding, margin, fonts and backgrounds -->
<styles>
<!-- PADDING AND MARGIN STYLE -->
<style id="1"
padding="30 -30 30 -30"
margin="10 -10 10 -10"
border-right-style="solid"
border-right-color="#a7a3a3"
border-right-width="10"
border-top-style="dotted"
border-top-color="#a7a3a3"
border-top-width="10"
border-bottom-style="dashed"
border-bottom-color="#a7a3a3"
border-bottom-width="1"
border-left-style="solid"
border-left-color="#a7a3a3"
border-left-width="10" />
<!-- BACKGROUND STYLE -->
<style id="2" padding="10 -10 10 -10" background-url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/templates/test123/graybkg.png" />
<style id="4" padding="10 -10 10 -10" background-color="#43ce33" />
<!-- flex box module style w/ border-->
<style
id="5"
padding="10 -10 10 -10"
margin="10 -10 10 -10"
border-right-style="solid"
border-right-color="#a7a3a3"
border-right-width="10"
border-top-style="solid"
border-top-color="#a7a3a3"
border-top-width="1"
border-bottom-style="dashed"
border-bottom-color="#a7a3a3"
border-bottom-width="1"
border-left-style="dotted"
border-left-color="#a7a3a3"
border-left-width="10" />
<style id="6" font-size="12"/>
<style id="7" font-size="10" font-color="#FF0000" font-weight="bold"/>
<style id="8" font-size="16" font-color="#000000"/>
<style id="9" font-size="10" font-color="#aaaaaa"/>
</styles>
</head>
<body>
<linear-layout width="match-parent" height="wrap-content">
<!-- LAYOUT ELEMENTS TEST SECTION -->
<image width="match-parent" height="preserve-aspect" aspect-ratio="0.333">
<url-source url="https://dummyimage.com/300x100/ff00ff/000000.png%26text=LAYOUT%20ELEMENTS%20TEST%20SECTION" width="300" height="100"/>
</image>
<linear-layout width="match-parent" height="wrap-content">
<!-- 1-UP -->
<image width="match-parent" height="wrap-content">
<url-source url="https://dummyimage.com/480x480/000000/ffffff.png%26text=LINEAR%20LAYOUT%201UP%20IMAGE" width="750" height="780"/>
</image>
<!-- 2-UP -->
<flexbox width="match-parent" height="wrap-content" orientation="horizontal">
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="1" source="ecom" orientation="horizontal">
<url-source url="https://dummyimage.com/481x458/ff0000/ffffff.png%26text=FLEXBOX%202UP%20ITEMATOM" width="481" height="458"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom" orientation="horizontal">
<url-source url="https://dummyimage.com/481x458/000000/ffffff.png%26text=FLEXBOX%202UP%20ITEMATOM" width="481" height="458"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
<!-- 3-UP -->
<flexbox width="match-parent" height="wrap-content" orientation="horizontal" >
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/000000/ffffff.png%26text=FLEXBOX%203UP%20ITEMATOM" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/ff0000/ffffff.png%26text=FLEXBOX%203UP%20ITEMATOM" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/000000/ffffff.png%26text=FLEXBOX%203UP%20ITEMATOM" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
<!-- 2-UP-LARGE -->
<flexbox width="match-parent" height="wrap-content" orientation="horizontal" >
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/ff0000/ffffff.png%26text=2UP%20LARGE" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="2" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/ff0000/ffffff.png%26text=2UP%20LARGE" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
<!-- NESTED LINEAR LAYOUT -->
<linear-layout height="wrap-content" orientation="horizontal" width="wrap-content">
<flexbox height="wrap-content" orientation="horizontal" width="316">
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/000000/ffffff.png%26text=NESTED%20LINEAR%20LAYOUT" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
<flexbox height="match-parent" orientation="vertical" width="158">
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
</linear-layout>
<!-- COLLAPSABLE LAYOUT -->
<collapsible-layout anchor-id="4" width="match-parent" height="wrap-content" title="SHOW LEGAL DISCLAIMERS" exposed-title="HIDE LEGAL DISCLAIMERS">
<linear-layout width="match-parent" height="wrap-content">
<image width="match-parent" height="preserve-aspect" aspect-ratio="0.10505836575875499">
<flyer-source path="flyers/307d308d-9261-483c-9f81-abb3d8cab162/" rect="74.56 -2367.28 1272.18 -2493.1000000000004" width="51112" height="2560" resolutions="8.0 5.33 3.7 2.33 1.55 1.0"/>
</image>
</linear-layout>
</collapsible-layout>
</linear-layout>
<!-- LAYOUT ELEMENTS TEST SECTION -->
<!-- VIEWS TEST SECTION -->
<image width="match-parent" height="preserve-aspect" aspect-ratio="0.333">
<url-source url="https://dummyimage.com/300x100/ff00ff/000000.png%26text=VIEWS%20TEST%20SECTION" width="300" height="100"/>
</image>
<!-- IMAGES -->
<image width="match-parent" height="preserve-aspect" aspect-ratio="0.333">
<url-source url="https://dummyimage.com/300x100/000000/ffffff.png%26text=IMAGES" width="300" height="100"/>
</image>
<!-- ITEM ATOMS -->
<item-atom flex-grow="1" width="match-parent" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/000000/ffffff.png%26text=ITEM%20ATOM" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<!-- VIEWS TEST SECTION -->
<!-- BADGING -->
<image width="match-parent" height="preserve-aspect" aspect-ratio="0.333">
<url-source url="https://dummyimage.com/300x100/ff00ff/000000.png%26text=BADGES" width="300" height="100"/>
</image>
<!-- IMAGES -->
<image width="match-parent" height="preserve-aspect" aspect-ratio="0.333">
<url-source url="https://dummyimage.com/600x200/7da385/ffffff.png%26text=Badge" width="600" height="200"/>
<!-- <badge h-pos="0" v-pos="0" url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/badges/Newlow.png" x="start" y="start" width="40" height="40"></badge> -->
<badge h-pos="0" v-pos="1" url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/badges/Newlow.png" x="start" y="end" width="40" height="40"></badge>
<badge h-pos="1" v-pos="0" url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/badges/Newlow.png" x="end" y="start" width="40" height="40"></badge>
<!-- <badge h-pos="1" v-pos="1" url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/badges/Newlow.png" x="end" y="end" width="40" height="40"></badge> -->
<badge h-pos="0.5" v-pos="0.5" url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/badges/Newlow.png" x="center" y="center" width="40" height="40"></badge>
<badge h-pos="0" v-pos="-0.1" url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/badges/Newlow.png" x="center" y="center" width="40" height="40"></badge>
<badge h-pos="1.05" v-pos="1.1" url="https://s3.amazonaws.com/storefront-sfml-assets-production/2135/badges/Newlow.png" x="end" y="end" width="40" height="40"></badge>
</image>
<!-- BADGING -->
<!-- STYLING -->
<image width="match-parent" height="preserve-aspect" aspect-ratio="0.333">
<url-source url="https://dummyimage.com/300x100/ff00ff/000000.png%26text=STYLING%20TEST%20SECTION" width="300" height="100"/>
</image>
<linear-layout width="match-parent" height="wrap-content">
<!-- PADDING MARGIN -->
<image width="match-parent" height="wrap-content" style-id="1">
<url-source url="https://dummyimage.com/480x480/000000/ffffff.png%26text=PADDING%2030px%20INSIDE%20AND%20MARGIN%2010px%20OUTSIDE" width="750" height="780"/>
</image>
<!-- ITEM ATOM STYLE -->
<flexbox width="match-parent" height="wrap-content" orientation="horizontal" style-id="2">
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="1" source="ecom">
<url-source url="https://dummyimage.com/481x458/ff0000/ffffff.png%26text=ITEMATOM%20DEET%20STYLE%20AND%20BACKGROUNDURL" width="481" height="458"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/481x458/000000/ffffff.png%26text=ITEMATOM%20DEET%20STYLE%20AND%20BACKGROUNDURL" width="481" height="458"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
<!-- BACKGROUND -->
<flexbox width="match-parent" height="wrap-content" orientation="horizontal" style-id="4" >
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/000000/ffffff.png%26text=BACKGROUND%20GREEN" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/ff0000/ffffff.png%26text=BACKGROUND%20GREEN" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/000000/ffffff.png%26text=BACKGROUND%20GREEN" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
<!-- BORDERS -->
<flexbox width="match-parent" height="wrap-content" orientation="horizontal" >
<item-atom style-id="5" flex-grow="1" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/ff0000/ffffff.png%26text=BORDER%20STYLE" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
<item-atom style-id="5" flex-grow="2" width="0" height="wrap-content" source-id="2" source="ecom">
<url-source url="https://dummyimage.com/381x358/ff0000/ffffff.png%26text=DOTTED=L%20DASHED=B%20SOLID=R/T" width="381" height="358"/>
<text style-id="6" value="Name of Item"/>
<text style-id="7" value="Sales Story"/>
<text style-id="9" value="prePrice Text"/>
<text style-id="8" value="$124.00"/>
<text style-id="9" value="Post Price"/>
</item-atom>
</flexbox>
</linear-layout>
<!-- STYLING -->
</linear-layout>
</body>
</storefront>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment