Small Victories Blog
170323 case study le fleuriste feature

Case Study

Le Fleuriste – Building a CMS with SV

Using the HTML theme to build a custom site and client-facing CMS

Our studio recently worked with Le Fleuriste to launch their new site. We thought that this would be the perfect project to try out the new HTML and Liquid templating features in the +Plus plan.

Getting started

Start by making an new site and choosing the HTML theme. (You might want to make two and use one for your staging site, but for now we’ll just be working with one.) In your site folder, you’ll see your new site and in it will be some files to get you started.

You’ll want to write your HTML in the index.html, and CSS and JS in the corresponding files. (Remember that you can write SASS/SCSS in your CSS file and we’ll sort it out for you automatically.) This is just normal local development so you can open the files in a browser and see your changes. Of course since it’s syncing to SV, you’ll also be able to see them on the web at the domain you set, too.

Workflow

It probably makes sense to preview most of your changes locally using placeholder content so you don’t have to wait for Dropbox to sync before previewing your changes.

When your layout gets close to being done you can replace the placeholder content with live content, which we’ll go over in the next section.

Setting up your content

In your site folder, you’ll see a couple folders Small Victories has made for you. SV will host flat HTML (with CSS and JS) just like a regular server. In addition, though, it also uses the Liquid templating language for things like inserting partials, logical operators, and loops.

Includes

In the includes folder, you can include .html files that you want to reuse across your site. This let’s you build templates with repeated patterns really easily.

For instance, you probably want the head and foot of your site to be the same on all pages, or you might want a navigation on every page. You’ll just create these as normal HTML files.

Then, you can include them in your HTML:

{{ includes.head }}
{{ includes.nav }}

If you’ve ever worked with partials this should be familiar to you.

Content

You’ll also see a content folder with a couple example files. This is where all the editable content (images and other media, text, snippets) for your site will live.

For Le Fleuriste, we had a few sections and we wanted it to be really clear where to edit each section, so we added some subfolders. These can map to pages, sections, types of content, etc. depending on your content model.

Within those subfolders, you’ll be adding images and text files. Think of these text files as the metafields in a traditional CMS.

Including the content in your layout is really easy at that point.

Inserting content

For this file:

/content/description.txt

Can be inserted with:

{{ content.description }}

If it’s in a subfolder, you can do:

{{ content.subfolder.description }}

If it’s a markdown file, SV will automatically convert it to HTML. If it’s a .txt file, you can tell it to convert:

{{ content.subfolder.description | markdown }}

Images work the same way, basically. For the following image:

/content/image.jpg

You can insert it into your layout like so:

<img src="{{ content.image }}" alt="{{ content.image.alt }}">

Loops

You may also want to loop through your content. The example code that you get when you create a new HTML site uses a loop to show all the images in a folder.

You can display all of these with a simple loop:

{% for image in images %}
    <img src="{{ image.url }}" alt="{{ image.name }}">
{% endfor %}

For a slightly more complex example, in Le Fleuriste we loop through a few projects:

Each ‘type’ corresponds with an individual project, and there are also some general pieces of content for the entire section.

We can then loop through our projects with the following loop:

{% for project in content.projects.types %}
    <!— code goes here —>
    <h1>{{ project.title }}</h1>
{% endfor %}

Snippets

We also have some variables that we set up so the client could make changes as needed or customize.

For instance, each section has its own background color. The brand styleguide has a breadth of colors so we wanted to give the client the option to change them based based on the photography, so we set up a file that holds the background color:

And from there inserted those values into the layout:

<div style="background-color: {{ files.background_color }};">
    <!— code goes here —>
</div>

(We actually used some JavaScript with data selectors in the final implementation so the above code is simplified from the live site.)

We also set it up so they can update things like their Instagram handle, Google analytics tracking code, contact info, Mailchimp list ID, etc.

These can be inserted just like the text snippets we did at the beginning.

Hand-off

Once the site is pretty much ready to go, you can share the content folder with your client (you could share the entire site folder but that might be a bit overwhelming/risky).

If you named the subfolders and files clearly, it should be really clear how to update different parts of the site. They won’t need to use special tools (any text editor should do), remember admin login info, have to manually publish changes, etc.

If you made a staging site (or want to now) you can also give them access to that to test changes. Or they could enable the password while making updates.

Archive and multipage

For Le Fleuriste, we also added a second page, which is an image archive.

We set this up just by making a subfolder, throwing in an _sv_settings.txt file and setting the theme to slideshow, and adding custom styles to an _sv_custom.css file.

We’ll go further into multi-page sites in a future post.

Roadmap

We use a gem for local development that emulates how SV renders sites online. This speeds things up and lets us preview includes and content locally. We may release this tool at some point to help other people speed up their workflows.

Also, for +Plus users, you can export a site. That exports all the assets and files as a flat HTML website, so you could run that for super quick local development.

If you have questions or want to share what you make with us, get us at @SMVIco.

Next Post

News

Announcing SV +Plus plans!