Resource packages

Sitefinity ASP.NET Core Renderer supports the concept of resource packages. This allows frontend developers to use multiple frameworks of choice to style their websites.

The Renderer uses the Bootstrap CSS framework for providing rich and responsive layout and widget templates out of the box. The Bootstrap package includes the capabilities of the respective Bootstrap front-end framework version.
For more information about Bootstrap, see the Bootstrap site. 

Customize views

Custom views can be achieved by using the out-of-the-box views as a starter template from the ASP.NET Core widgets in this Sitefinity GitHub repository.
Next, you need to place the view in the specified folder on the file system of the Renderer project. For example: /Views/Shared/Components/SitefinityNavigation/Default.cshtml (for content blocks).

All the built-in Sitefinity widgets are named with Sitefinity prefix (SitefinityContentBlock, SitefinityNavigation, SitefinityContentList, etc.). Make sure to take this into consideration when overriding the views.

Additionally, you can place any number of views in the widget folder next to Default.cshtml, and they will appear as selectors on the user interface.

Customize scripts

The out-of-the-box scripts are available in this Sitefinity GitHub repository. The scripts contain both a minified and a non-minified version. The way to override these files is to place them under the wwwroot/scripts folder by following the same folder structure and file naming convention.

Customize application settings

The settings for the UI that appear as Margin and Padding are stored in the appsettings.json file of the Renderer. Each of these settings map to a corresponding CSS class. For a full list of the available settings, see the Change grid system sample on Sitefinity GitHub repository.

Along with the Bootstrap package, the ASP.NET Core Renderer supports Foundation and Minimal packages as additional CSS frameworks.

GITHUB SAMPLES: Sitefinity GitHub repository provides working samples of the Foundation package and Minimal package.

Each of the two samples contains a description how to use the package with the Renderer. 

The packages are placed under the ResourcePackages folder of your project. Note that the folders inside of the ResourcePackages folder are mapped in the UI and in the CMS persistence layer with the names of the packages – Foundation, Minimal. If you happen to change the names of the folders and you have existing pages and templates based on them, beware that they will stop working.

Each of the layout files in the packages appears on the UI when creating a page or a template. Upon selecting the layout file, the page/template is automatically assigned to that package. You can change the selected package via Pages Grid » Actions column » Change Template.

All the CSS frameworks can coexist side by side in the same project and you can base different pages and templates on them individually. The backend user interface is configured based on the currently selected package – it will only display the views for the resource package that is referenced by the page/template.