Tutorial: Create a website with Timer Bootstrap template | MVC
In this tutorial, you create a responsive Sitefinity CMS website from scratch using the Timer Bootstrap 3 template. The tutorial is primarily aimed at frontend developers, as it showcases how easily and quickly to create any Sitefinity CMS site using intuitive methods for developing UI components.
You create a responsive design, utilizing frontend packages, built-in and custom widgets, widget and page templates, and various styling options.
Overview
The Timer site is an online business card for a web designer who presents his artwork and projects. The goal of the site is to showcase the designer’s work and background and encourage visitors to provide him with feedback and contact him.
You can view the site on a variety of devices - desktop computers, tablets, and smartphones, as it is designed using responsive web design methods. Each page on the site is associated with different topic of the designer’s work. You have a number of options to view artworks and their details:
- By most recent project
- By browsing featured artworks
- By opening related artworks to a certain blog post
- By browsing the Gallery
- By opening the details page of an artwork
In addition, you can filter and browse the designer’s blog posts and contact him via a Contact us online form.
Technical overview
This Timer site is based on the popular frontend framework Bootstrap and the free Bootstrap Timer template.
By using the Bootstrap framework, you can build a responsive, mobile-first design and project by taking advantage ofMVC resource packages. For more information, see Overview: Resource packages.
Structure
The BootstrapTimer project consists of two parts:
- Timer template frontend assets
- SitefinityWebApp - as any other Sitefinity CMS application, the SitefinityWebApp contains all the information required for a Sitefinity CMS site plus the MVC resource packages (Bootstrap), and all widget templates.
Pages and templates
Similar to any Sitefinity CMS site, the Timer site is organized by pages and a page templates. The page template is based on the Bootstrap framework, backed by the resource packages. For details, see For developers: Create MVC page templates based on layout files. The Timer template is applied on the default page template. Several Sitefinity CMS pages are created just to serve or preview specific content – About, Service, Blog, and so on.
All pages contain section widgets and custom grid widgets that require them to be added to one or more templates, depending on whether these widgets are used in all pages or just a few. The templates are based on the default page template.
Navigation
The Timer site has fixed navigation to make browsing the site by topics easier and the search capabilities faster. You modify the Bootstrap navigation to serve the purposes of the site.
As this navigation is part of every page, you drag the Navigation widget on the page template itself.
Artworks
The work of the designer is represented via Artwork items in the Artwork custom module in Sitefinity CMS. Each item has related details, such as title, information, short description, and image. You modify the List and Details templates of the module to reflect your design requirements and site purpose.
You display items with the works custom widget, in combination with Content block widgets. Since there are specific styling and appearance requirements, you replace the template of the widget with a custom one. For details, see Modify widget templates. Artworks are displayed via a couple of lists.
You also display artworks via a custom ImageGallery template and configure the Image gallery widget to display images from this gallery.
Blogs
The Blog posts module has custom fields, for example for related images or artworks. For more details, see Content relations. Blog post details are populated in the corresponding fields and by a Detail template. Each blog post detail template contains a social share option via the Social share widget. In addition, you also enable comments for the blogs.
The specific sections for the Blog page are search section, categories section and recent posts section. For recent blog posts section use the Blog posts widget and create a new template.
Requirements
Workflow
- Setup the project and the Bootstrap package.
- Setup page templates.
- Create and setup pages.