Frontend development basics
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.
When designing the frontend of your site, you follow the general steps, described in the table below:
- 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:
- 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:
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.
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 the following types of templates on your pages:
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.
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.