Frontend development basics

Overview

Sitefinity CMS leverages ASP.NET technology for simplified application development, enabling you to take control of markup.

You benefit from:

  • Mobile first
    All widgets are built with a mobile-first mindset. Responsive design is provided by the CSS framework, used in the Bootstrap package.
  • Convention-based framework
    Widgets, designers, templates and views: all wired-up based on a simple convention that does not require mappings and XML.
  • AngularJS designer framework
    AngularJS SPA implementation of widget designers to help you create new designers or modify existing ones in matter of minutes.
  • Bootstrap framework
    Bootstrap is installed with Sitefinity out-of-the-box. You can work with other frameworks, as well.
  • Package your CSS, images, widget templates, layout templates and a master template, all in one package. You can thus apply the packaged resources to templates.
  • Open source widgets in the Sitefinity CMS GitHub repository.

For more information, see Develop with ASP.NET MVC.

Workflow

When designing the frontend of your site, you follow the general steps, described in the table below:

Step Description 
Define requirements 
  • Site structure
  • Types of templates needed
  • Built-in widgets and/or custom ones required
  • Bootstrap or minimal package

RECOMMENDATION: We recommend you to use the Minimal package in case you want to use a frontend framework other than Bootstrap.  

Create page templates and pages 
  • Create layout files
  • Base page templates on layout files
  • Build site structure by creating pages

For more information, see:

Implement the design 
  • Structure the Bootstrap package
  • Extend package to implement design:
    • CSS
    • JavaScript
    • Modify markup of default template

For more information, see Overview: Resource packages.

Configure site layout 

Add customizable grid widgets

For more information, see Design page templates in the Layout editor.

Configure widgets and widget templates 
  • Configure widget preferences
  • Change the appearance of widgets

For more information, see Overview: Widget templates | MVC.

You can also customize the functionality you implement on the site by:

Frontend packages

Sitefinity CMS enables you to base your design on one of the most popular CSS and frontend frameworks -Bootstrap, which is installed with Sitefinity CMS out-of-the-box. You do this using resource packages, with which you group your resources in separate packages. Sitefinity CMS automatically applies these packages on your templates, based on their naming. A package can contain style sheets, scripts, images, or entire layout templates.

Page templates

Before you populate your page with content, you create a layout that helps the display of content. For example, you allocate space for the navigation, the title, and the content blocks. To do this, you use predefined or custom page templates, which you can modify if needed. You can apply three types of templates on your pages:

  • MVC only
  • Web Forms only
  • Hybrid

In Sitefinity CMS, you base your page templates on MVC layout files or on ASP.NET Master Pages. Templates can be either Sitefinity CMS built-in layout files, master pages, or your own custom ones.

For more information, see Overview: Page templates.

Widget templates

Sitefinity CMS widgets are standard MVC widgets that you can find in the widget toolbox. You place the widgets on any page or template to add specific content or functionality. Each widget provides you with options to configure the widget's preferences in the user interface.With widget templates you can change the look of the built-in Sitefinity CMS widgets by controlling the rendered HTML and modifying the markup of the MVC widget templates according to your preferences.

For more information, see Overview: Widget templates.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Resource packages