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.

Bundling & Minification

Bundling and minification is part of website optimization where all the JavaScript files with scripts used on web pages are collected and concatenated in one single file ("bundling") making it as small as possible ("minification") - and including it as the last thing in your HTML. The same is true for stylesheet files (CSS and LESS). 

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

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":