Features on this starter site 

This website includes, but is not limited to, these features:

Bootstrap

The website is based on Bootstrap, the most popular front-end framework for developing responsive, mobile first projects on the web.

Mobile first

The website is built to look best in the different mobile devices. It uses Bootstrap responsive features and  automatically adapts your pages for various screen sizes.

Built with LESS

The website is built with LESS, a dynamic stylesheet language, which makes stylinge very flexible and easy, and allows for theming. 

Easy skinning

You can easily change the way this website looks with Bootstrap theming. Create or auto-generate your own themes with BootTheme theme generator or use one of the prepared sample themes.

HTML meta tags done

Most HTML meta tags are generated automatically. However, you can override individual meta tags if you like.

Scripts elements at the bottom

The function "Layout.Helpers.ScriptsElementsAtBottom" which is used in the MasterLayout page template moves all <script /> elements to the end of the page, making page content appear faster.

5 basic page templates

Pages on this website are created with one of the following layout template.

  • Page
  • Page with left aside
  • Page with right aside
  • Page with navigation
  • Frontpage

Menus, quick links

The website features a top menu, quick links like "contact us" and the menu of other website languages. These are all Razor functions, some of which come with packages pre-installed on this website.

  • The top menu is based on Razor function "Composite.Layout.Navigation.MegaMenu" . On Desktops it can be expanded on mouse hover (by default) or by click. To change the menu behavior go to the Layout perspective, locate  "Main Navigation" template feature and edit function's options.
  • The top quick links are based on Razor function "Composite.Layout.Navigation.TopLinks" and page data folder items. To add new top link go to the Content perspective, under the Home page locate "Top links" data folder and add new data item.
  • The left navigation menu is based on the Composite.Navigation.Distributed package.
  • The Language switcher, based on Composite.Navigation.LanguageSwitcher package.

You can create and manage functions of various types in the Function perspective. You can install the packages from the System perspective under "Packages" / "Available packages".

Search

The search function on the site is based on Composite.Search.SimplePageSearch package.

Profiles component

Profiles component is based on the Composite.Lists.Profiles package and allows to introduce the world to your team. You can see the demo on the "About us" page on this demo website.

Page Blocks functions

The website includes several Page Blocks functions. When you are editing a page and wish to insert a page block, use the Insert button - insert a function. Select one of the functions in the "PageBlocks" folder. 

  • "PageBlocks.Jumbotron" function is mostly used on the Frontpage to show the key content on your site. Background image is  the full width of the page and inside content is vertically centered.
  • "PageBlocks.TopImage" is used to place random top full width image from the specified folder to the content pages. The function call is placed in the Page Template Feature named "Content.Start".
  • "PageBlocks.Statement" is used  to show the contextual messages on your site on primary, light or dark backound.  It is full width only on the "Frontpage" and "Page" pages.
  • "PageBlocks.IconifiedStatement" is used to show the page statement with Icon or Image at the top. 
  • "PageBlocks.ImageAndText" is used to show "Image and Text" page statement, where the image can be placed to the left or rigth side.

Page Blocks Examples

Primary Statement

Quisque malesuada leo quis sem adipiscing et bibendum neque adipiscing. Curabitur egestas venenatis posuere. 

Read more

Dark Statement

Quisque malesuada leo quis sem adipiscing et bibendum neque adipiscing. Curabitur egestas venenatis posuere. 

Read more

Light Statement

Quisque malesuada leo quis sem adipiscing et bibendum neque adipiscing. Curabitur egestas venenatis posuere. 

Read more

Iconified Statement with Icon

Quisque malesuada leo quis sem adipiscing et bibendum neque adipiscing. Curabitur egestas venenatis posuere. Ut nibh eros, tristique vitae tincidunt nec, facilisis et enim. Curabitur cursus, nunc at accumsan varius, tortor est eleifend eros, vel dapibus ipsum dolor in nisl. Nunc non nisl nulla.

Sunset at Tisvilde Beach

Image and Text

This page block fucntion is used to insert "Image and Text" page statement. The image can be placed to the left or right side.

Image and Text

Frontpage 

5


Content in two or three columns

To place content in two or three columns, edit Source code and surround the content with <div class="two-columns" /> or <div class="three-columns" />. Below is an example of two columns of the "Iconified Statements":