Hands-on: Tweak and Personalize Website Starter Code to your Liking

June, 15th 2015

Website Starter defines a template for creating websites. It allows you create your pages by combining Content Slices that fill nicely into a fluent layout. It also includes a "theme settings" document where you can tune colors, fonts, etc. This should offer you quite a lot of options for building your unique websites.

But if you like diving into code to add your own touch, Website Starter is conceived just for that! Here we will walk you through the different things you can tweak in a Website Starter if you know some CSS, HTML and maybe a little PHP!

Download and Run the Code

Website Starter is an open source project that we've deliberately designed to be easy to tweak and evolve. Simply download the source code from GitHub, run it locally, and you're all set to start hacking!

Views and Assets

There are two folders containing files of interest:

Fluent Layout with Content Slices

Website starter defines a global fluent layout for pages to guarantee the coherence of your website. The layout defines columns, rows, margins and colors that behave fluently in different situations.

Once the layout is defined, we use a unique feature namely "Content Slices" to fill in different parts of the page. A Content Slice constitutes a possible part of your page. For instance this Website Starter includes Content Slices for "featured items", "slides" and "FAQ".

It is by combining Content Slides into the fluent layout that you can create your unique website pages rapidly!

Add a Label to an Existing Content Slice

This Website Starter defines a set of Content Slices. Let's take for example the "featured items" Content Slice.

As we can see, we can choose among different design variations of "featured items" using the associated labels. How about creating our own design variation of featured items using a new "Micro" label!

design variation example when using the "Micro" label

To do so, start by declaring a new label for "Featured Items" into the "Page" Document Mask. From the Writing Room, go to Settings / Document Masks.

A Document Mask is a configuration file that allows developers to define what fields a document contains.

In the code of the Document Mask below, we ommit other Content Slices for more clarity.

Have a look at the JSON: The "Content" tab contains a "Slices" field with different Content Slices "Choices", it also defines possible labels for each of the Content Slices.

Now that we've added the "Micro" label for "Featured items" Slice, let's go ahead and implement our design variation.

A straightforward way to add a design variation for a label is to use the file name convention. In app/views/slices you'll find files name using the convention slicename-label.php.

Simply copy the existing featured-items-mini.php to featured-items-micro.php and customize it as needed. You can also add targeted CSS rules in page.css (public/assets).

It is a good habit to use prefixes for CSS rules targeting specific Slices, this avoids conflicts and confusion.

Implement a new "People" Content Slice

Now, it is time to add your own Content Slice, together with its design in the layout! A very useful missing Content Slice for our layout is the "People" Slice. People Slice can be used to feature teams, sponsors, board members, etc.

With a quick analysis we can imply that a "People" Slice should be a repeatable group, each item should include: name, description and a photo. Let's get that configured in the "page" Document Mask:

To display our Slice, let's create a file people.php and quickly write some HTML:

We can add some specific CSS rules for our new Slice in page.css :

And that's it, let's add some people to our homepage:

Can't Wait to See your Works!

Now you can change the layout, add labels to existing Content Slices and define your own Slices. Time for you to show us your creations!