Smarty, Bootstrap, and LESS

Stuff that PageRoost is built from.

That stuff sounds made up.

We promise, it's not. Smarty is a PHP templating engine, Bootstrap is a front-end framework, and LESS is a CSS preprocessor... Yeah, that probably didn't help.


Smarty

Smarty is a very powerful template engine that allows you to include logic in your content without any programming knowledge. You may use Smarty in page content, <head> and <foot> code on pages, templates, and in settings, and in e-mail autoresponse subject and body fields. To get the most out of it, you should visit the Smarty site and familiarize yourself with some of the features of engine.

By default, smarty uses a single curly brace for it's delimiters (the things at the beginning and the end of the code). We found this caused too many problems so we set it to double curly braces, like Handlebars. So, anywhere you see an example on the Smarty site, remember, in PageRoost, you need to use the double curly braces.

Examples
Personalize a form autoresponse

The code below will display "Hello," if no first name is available, and "Hello John," if a first name is available (and someone entered "John").

Hello{{if isset($Visitor.first_name)}} {{$Visitor.first_name}}{{/if}},

Display the "Created" time of a page

The code below uses the "created_timestamp" field of a page and displays a date like December 14, 2017

{{$Page.created_timestamp|date_format:"%B %e, %Y"}}


LESS

LESS is a CSS preprocessor. It's also amazing way to write stylesheets. You can use LESS to do things like assign variables, create mixins, and write nested CSS queries. Just like Smarty, you should visit the LESS site to get the most out of this awesome tool. PageRoost will process .less files that you have uploaded into the "Files" area and are using on a template or page in the "Stylesheet" property section. PageRoost will NOT process any LESS syntax included in the <head> code for templates, pages, or the site.

Example
Assign a color to a variable

The code below shows you how to set a color into a variable and how to use it as a background color and a font color.

@favoriteColor: #FF0000;
#someDiv{
   background-color: @favoriteColor;
}
.some-link{
   color: @favoriteColor;
}

The benefit of this is that everywhere you use the @favoriteColor variable instead of a hard-coded value, you can easily change the color later by simply changing the value of the @favoriteColor variable.


Bootstrap

Bootstrap is a toolkit that makes front-end web development faster and easier. PageRoost uses Bootstrap to create mobile friendly sites right out of the box. The grid editor ensures bootstrap syntax conformance and all you have to do is drag and drop stuff where you want it! You can use the features from Bootstrap in rich text areas and in your LESS files. Like the other libraries, you should visit the Bootstrap site to learn about everything it can do.

Examples
Rich Text Area: Make a link look like a button

The code below shows how you would assign bootstrap classes to a link so that it looks like a button which is green and large. The bit in bold is what makes the magic happen.

<a href="/contact-us" class="btn btn-success btn-lg">Contact Us</a>

LESS file: Make a link look like a button

The code below shows how you would use bootstrap mixins to make link look like a button which is green and large. This code assumes you have a link with a class "big-green-button" assigned to it.

.big-green-button{
   .btn();
   .btn-primary();
   .btn-lg();
}


File Locations

To make sure that your site has what it needs to look good, there are a few LESS files that you should always include in your stylesheets. You can refer to the "pageroost.less" file that ships with PageRoost for a more detailed explanation, but just know that you need the following files.

@import "/core.less";
@import "/pageroost/forms.less";
@import "/pageroost/collections.less";