the Info page

The Services, Info and About page are generic-type pages. In general, your page content will be textual, maybe with an image. Use the Info page to supply additional information about your business, such as your location, studio ammenities, client list, etc.


Advanced formatting with HTML

Optionally, you may use HTML to format your content using some of the advanced formatting available in CE3. Examples follow, and more information may be had in our online documentation.


Font Awesome

...

CE3 is preloaded with Font Awesome, a vector-based icon library. You may deploy icons anywhere that the engine accepts HTML, or via PHPlugins. For a full list of available icons and how to use them, visit the Font Awesome website at http://fortawesome.github.com/Font-Awesome/.


Section Dividers

As seen on this page, divide sections using a horizontal rule:

<hr />


Inline Images

TTG Logo

You can place images inline with text using the HTML<img /> element.

If referencing images from your filmstrip, you should know that large images are in the photos/ folder and thumbnail images in the thumbnails/ folder. You may assign the classes float-left, float-right or inline-image to position the image, or omit a class and the image will be placed as centered block elements. You may use the inline style attribute to set width, borders, margins, etc. Use the snippets below as examples.

<img alt="Some Text" class="float-left" src="photos/my-photo.jpg" style="max-width: 400px; border: 1px solid #000;" />

<img alt="Some Text" class="float-right" src="thumbnails/my-photo.jpg" />

<img alt="Some Text" class="inline-image" src="resources/images/favicon.png" />

Tables

The CE3 framework allows for “responsive tables”, the layout for which will change when viewed on small displays, making tables easier to read on devices such as iPhones. The formatting for tables is therefore very specific.

Surname Given Name Gender Year of Birth
Finn Liam male 1984
Nicks Stevie female 1948
Shields Kevin male 1963
Simon Émilie female 1978

In the code above, note the use of <thead> and <th> tags to establish headings for the table cells.

Avoid using rowspan and colspan table attributes.

Your can prevent a table being responsive by applying the class “not-responsive” to your <table> element:

<table class="not-responsive">

You may freely use the rowspan and colspan attributes on tables which are not responsive, but these tables will not readjust on small devices.


Responsive Grid Framework

CE3 includes its own responsive grid scaffolding supporting 12-column or 16-column grid layouts. For details, see the online documentation. Here’s an example using three columns:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper ipsum nibh. Proin vitae erat at enim semper placerat non in metus. Praesent et sodales orci. Maecenas tristique ultricies lorem non lacinia. Mauris sem elit, scelerisque vel laoreet at, placerat a nibh. In nec nunc vel neque sollicitudin euismod. Mauris vitae lorem dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper ipsum nibh. Proin vitae erat at enim semper placerat non in metus. Praesent et sodales orci. Maecenas tristique ultricies lorem non lacinia. Mauris sem elit, scelerisque vel laoreet at, placerat a nibh. In nec nunc vel neque sollicitudin euismod. Mauris vitae lorem dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper ipsum nibh. Proin vitae erat at enim semper placerat non in metus. Praesent et sodales orci. Maecenas tristique ultricies lorem non lacinia. Mauris sem elit, scelerisque vel laoreet at, placerat a nibh. In nec nunc vel neque sollicitudin euismod. Mauris vitae lorem dui.