examples.html

---
title: Getting started with examples | layerJS
frame: getting_started
sitemap:
  priority: 0.8
---
<a name="gettingstarted">&nbsp;</a>
<section class="grey">
  <div class="container">
  </div>
</section>
<section class="grey">
  <div class="container">
    <h1>Getting started with layerJS examples</h1>
    <p>To use layerJS you just need to define the stages and put all content in frames. The following list gives you
      minimal examples for common UX patterns. Feel free to combine them to your liking.</p>
  </div>
</section>
{% for example in site.data.examples %}
<section class="grey examples">
  <div class="container example-container">
    <h2 class="text-center example-headline">{{ example.title }}</h2>
    <div class="row">
      <div class="col-md-5 col-md-offset-1 col-sm-6 col-sm-offset-0">
        <div class="whitebox">
          <p>{{ example.description }}</p>
          <div lj-type="stage" lj-auto-height="true">
            <div lj-type="layer" lj-name="exldesc{{ forloop.index }}" lj-default-frame="!none" lj-native-scroll="false"
              lj-no-url="true">
              <div lj-type="frame" lj-fit-to="responsive-width" lj-transition="none">
                <!-- see https://stackoverflow.com/questions/15917463/embedding-markdown-in-jekyll-html -->
                {% markdown %}{{ example.longdesc }}{% endmarkdown %}
              </div>
            </div>
          </div>
          <a class="btn btn-key" href="#exldesc{{ forloop.index }}.!toggle;exbutton{{ forloop.index }}.!next">
            <div lj-type="stage" lj-auto-width="true" lj-auto-height="true">
              <div lj-type="layer" lj-name="exbutton{{ forloop.index }}" lj-no-url="true" lj-native-scroll="false" lj-fit-to="fixed" lj-transition="fade">
                <div lj-type="frame">more...</div>
                <div lj-type="frame">...less</div>
              </div>
            </div>
          </a>
        </div>
        <div class="whitebox">
          <h4 class="sample-header">Code sketch</h4>
          {% highlight html %}{% include {{ example.include }} %}{% endhighlight %}
          <a class="btn btn-key hidden-xs" target="_blank" href="{{ example.playground }}">See full code on CodePen</a>
          <a class="btn btn-key visible-xs" target="_blank" href="{{ example.playgroundm }}">See full code on CodePen</a>
        </div>
      </div>
      <div class="col-md-5 col-sm-6">
        <div class="trybox">
          <h4 class="sample-header">{{ example.hint }}</h4>
          <iframe src="{{ example.iframe }}" width="100%" height="450px;" frameborder="0"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>
{% endfor %}