Resource packages

Once you create pages and templates in Sitefinity CMS, you need to modify their markup and style them. You do this with the help of resource packages. They group your resources in separate folders and apply these resources on your pages and templates. A package can contain style sheets, scripts, images, task running configuration, widget templates, and layout templates.

Sitefinity CMS automatically creates a ResourcePackages folder in the root of your project. This folder contains all resource packages. By default, with Sitefinity CMS, you get the Bootstrap 4 package but you can add your own packages in the ResourcePackages folder.

You can have several packages with different package names. However, a specific page or page template can only use one package. You associate resource packages with a template or a page by adding a template with the resource package. You can also edit an existing template. For more information, see Page templates.

Bootstrap resource packages

PREREQUISITES: When working with Resources packages and Bootstrap 4, you need Node.js and npm installed. For more information, see Introduction to Node.js on Node.js site.

Sitefinity CMS comes with the Bootstrap 4 package installed out-of-the-box. The package includes the capabilities of the respective Bootstrap front-end framework version. For more information, see the Bootstrap site.

NOTE: Projects created with Sitefinity CMS versions before 12.0, that have the Sitefinity Bootstrap 3 resource package installed, will preserve this package after upgrade to versions 12.0 or later when upgrading via Sitefinity Project manager. When you use NuGet to upgrade to versions 12.0 or later, the package is automatically removed, and you must add it back manually, if you intend to use it further.

For more information about the structure of the Bootstrap package and the location of front-end assets, see Bootstrap 4 GitHub repository

The Sitefinity CMS Bootstrap package contains front-end assets, CSS source files, widget templates, based on the framework, such as NewsBlogsImages, and so on.

Тhe Bootstrap 4 package provides the following benefits:

  • Npm scripts infrastructure
    Bootstrap 4 comes with updated build infrastructure — it no longer relies on Grunt but instead uses npm scripts. To enhance customization capabilities, Bootstrap 4 package provides you with various configuration options in package.json. Such options include package distribution folder name, styles distribution folder name, main SCSS import file name, and so on. Also, redundant and time-consuming tasks are removed from the package - for example, the tasks for icon font generation and JavaScript concatenation.
  • SVG icons with Font Awesome
    Following the latest trends, the Bootstrap 4 package uses Font Awesome with solid SVG icon sprites.  All icons are vector graphics, so you can easily scale them while maintaining perfect quality. For more information, see the official documentation of Font Awesome about SVG sprites.
  • RTL support
    With Bootstrap 4, RTL support for multilingual sites is turned on by default. When RTL support is not needed, you can always switch off the RTL option via the settings in the SCSS variables file.
  • Accessibility improvements
    With the Bootstrap 4 package and its significant accessibility improvements, you easily meet accessibility standards such as WCAG 2.1 Level AA or section 508. Bootstrap 4 follows the most common accessibility best practices for developers and provides out-of-the-box support for:
    • Keyboard support
    • Enhanced error handling
    • Forms that meet accessibility standards
    • Wai-aria
    • Automatic detection of page language
    • Accessible captcha

      NOTE: Keep in mind that meeting website accessibility standards is a collective effort that requires designers, developers, and content authors working together. This is an iterative process, and each subsequent change must be made with accessibility in mind and be properly tested.

To get better acquainted with website accessibility standards and important tips, check the following:

NOTE: As of version 12.0,  Sitefinity CMS ships with the Bootstrap 4 resource package only, and this is the officially supported Bootstrap version. If you need to use Bootstrap 3, you must add it manually. You can find the Sitefinity Bootstrap 3 package on the Bootstrap 3 GitHub repository Bootstrap 3, and the  Bootstrap 3 GitHub repository templates will be supported by the end of 2019. 

Bootstrap and responsive design

Bootstrap front-end framework enables you to build and develop apps that are responsive, mobile-first, and work seamlessly on any device – desktop or mobile. All MVC widgets are built with a mobile-first mindset and their responsive design is based on the Bootstrap front-end framework.

NOTE: The Navigation widget is an exception. For more information, see Add customizable grid widgets to MVC templates.

For details on the supported browsers and devices by Bootstrap, see Bootstrap 4.

Following are a few essential best practices to keep in mind when developing CSS or custom grid widgets in regard to responsive design and Bootstrap:

  • To avoid having excessively long pages, hide content that is not that important
  • Put the most important content on top of the page, so it is above the fold, and page visitors can see it
  • Use SVG files and responsive images
  • Design for thumb interactions and tap interactions in mind, for example, buttons and links with larger interaction areas
  • Mind typography and readability on different screen sizes
  • Use fluid and adaptive layout by default

    NOTE: If you are working with the grid widgets that use the Bootstrap grid system, the layout is fluid by default. 

  • Test on mobile

Minimal resource package

Minimal is a basic package, which contains all default templates of the front-end widgets, such as News, Blogs, and Images, as plain HTML, minimal CSS, and a basic grunt configuration.

RECOMMENDATION: We recommend you to use the Minimal package in case you want to use a front-end framework other than Bootstrap. Like the Bootstrap package, Minimal has a task-runner configuration that helps you to process styles, scripts, images, and so on.

The structure of the Minimal resource package is the same as that of the Bootstrap package, as it also contains minimal front-end assets, widget templates, grid widget templates, and Grunt configuration. For more information, see GitHub Minimal repository.

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

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to 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

Page templates