Slice your content
The previous chapter showed how to use data-simply-list to build a main menu. This chapter will show some more uses for lists.
Lists are a very powerful feature in SimplyEdit. By using lists well, your website will be easy to edit while keeping true to your design.
There are many design elements that lend themselves to lists. We've already show how to build a menu using lists. But you can also use it to show a slide show, show a portfolio or a list of employees. Or you can even use it to create modern responsive websites using 'content slices'.
A content slice is a horizontal section of your web page, that has its own design and responsive behaviour. These slices can be re-used on many pages and you can use many and different slices on a single page.SimplyEdit makes editing content slices easier than ever.
The following example uses a design with three different content slices: A full width hero image, a quote and a text slice with a title.
The HTML that came from your design looks something like this:
<body>
<header>
<div class="constrain-width">
<h1>Page title</h1>
</div>
</header>
<div class="slices">
<div class="hero">
<img src="hero.jpg" alt="">
</div>
<div class="quote">
<div class="constrain-width">
<blockquote>An inspirational quote</blockquote>
</div>
</div>
<div class="text">
<div class="constrain-width">
<h2>A subtitle</h2>
<p>And some text</p>
</div>
</div>
</div>
The class constrain-width makes sure the contents don't grow wider than, say, 960 pixels. The here image is meant to go full width, so it doesn't have this class.
Now we turn this into a list. But there is one problem. The list is not a list of one thing. There are three things that can be in this list.
No problem, we'll just make three templates:
<body>
<header>
<div class="constrain-width">
<h1 data-simply-field="Page title">Page title</h1>
</div>
</header>
<div class="sections" data-simply-list="sections" data-simply-sortable="true">
<template data-simply-template="content" data-simply-template-icon="fa-align-left">
<section class="content">
<h2 class="title" data-simply-field="title">Title</h2>
<div class="text" data-simply-field="text">Text</div>
</section>
</template>
<template data-simply-template="pullquote" data-simply-template-icon="fa-quote-right">
<section class="pullquote">
<div class="text" data-simply-field="text">Text</div>
<blockquote class="quote" data-simply-field="quote">Quote</blockquote>
</section>
</template>
<template data-simply-template="image left" data-simply-template-icon="fa-picture-o">
<section class="image-left">
<img class="image" data-simply-field="image">
<div class="text" data-simply-field="text">Text</div>
</section>
</template>
</div>
And you're done. If you edit the page now, you'll see an empty list again. But if you press it, the 'Add' button now has a little arrow below it:
If you press it, your templates will show up:
We've added a data-simply-list named 'Content'. This list has three templates. To tell them apart, we've given them each a name with the data-simply-template attribute, and an icon with the data-simply-icon attribute.
Take a look at this codepen for a complete example: http://codepen.io/poef/pen/vXAAyL