Starterkit Package Includes

Version 2 Compatible with Umbraco 8+

Listed below are all the items included in the Starterkit Package.

Table of Contents

1. Templates
2. Partial Views
3. Macros
4. Stylesheets
   1. Base Stylesheet Structure
5. Scripts
   1. Recommended Scripts and Plugins
6. DocumentTypes
7. DataTypes
8. Custom Code

Templates

The below templates are included in the Starterkit Package.

Partial Views

The below partial views are included in the Starterkit Package.

Partial View Files Explained

Macros

The macros included in the starterkit listed below are features directly related to the form handler to handle all form submissions within Umbraco. View Form Handler Documentation.

• Form Handler
  • Macro partial view: ~/Views/MacroPartials/FormHandler.cshtml
  • Parameters:
    1. Title: Inherit From Alias: InheritFrom Type: Textarea
• Form Email Master
  • Macro partial view: ~/Views/MacroPartials/FormEmailMaster.cshtml
• Contact Form
  • Macro partial view: ~/Views/MacroPartials/ContactForm.cshtml
• Contact Email Template
  • Macro partial view: ~/Views/MacroPartials/ContactEmailTemplate.cshtml
• Contact User Email Template
  • Macro partial view: ~/Views/MacroPartials/ContactUserEmailTemplate.cshtml

Stylesheets

Basic unmodified vendor stylesheets are included in the starterkit. These files are located in the /css/ folder.

The master template utilizes these stylesheets by default with the client dependency to bundle and minify these resources. You can update these to use the latest version of the plugin when you start a site.

• ~/css/user.css
  • The user stylesheet will need to be configured to be used by the rich text editor in Umbraco. It is typically an empty file that just imports the main css file to display some of the styling into the rich text editor within Umbraco. View on Github.
• ~/css/bootstrap.css
  • The starterkit includes an unmodified version of the vendor Bootstrap stylesheet.
• ~/css/fa-all.css
  • The starterkit includes the vendor FontAwesome stylesheet. The stylesheet name has been updated and the webfonts file path has been updated to reflect the new directory location but the styles remain untouched.
• ~/css/fonts/ [Directory]
  • The fonts directory includes unmodified vendor FontAwesome webfont files.

Base Stylesheet Structure

The starterkit base stylesheets are located in the ~/scripts/scss/ folder. Using this directory makes it so that a backoffice user cannot modify the compiled stylesheet directly from the Umbraco backoffice.

View Base Stylesheet Structure

Scripts

The starterkit includes the following for getting started:

• ~/scripts/scss/ [Directory]
  • In the scripts folder, there is a /scss/ or /less/ directory to store the files used to generate the website stylesheets with the preprocessor you want to use.
  • Using this directory makes it so that a backoffice user cannot modify the compiled stylesheet directly from the Umbraco backoffice.
  • Learn More about the Base Stylesheet Structure or view the scss file structure on Github.
• ~/scripts/main.js
  • The main.js file includes a custom function for linking directly to bootstrap accordion items and opening them on page load. View on Github.
  • This file is intended for initializing custom scripts, plugins and resources your site needs.
  • This file is included in the master template client dependency to bundle and minify this resource.
• ~/scripts/bootstrap.bundle.min.js
  • The starterkit includes an unmodified version of the vendor Bootstrap javascript.
• ~/scripts/jquery-3.5.1.slim.min.js
  • The starterkit includes an unmodified version of the vendor jquery library that Bootstrap requires.
• ~/scripts/jquery.validate-1.15.0.min.js
  • The starterkit includes an unmodified version of the vendor jquery validate library. This is utilized when building custom forms with the form handler.

Recommended Scripts and Plugins

• ~/scripts/matchheight.min.js
  • A jquery plugin called Match Heights is used frequently in builds.
• ~/scripts/slick.min.js
  • A jquery plugin called Slick is used frequently in builds.

DocumentTypes

• Pages
  • Home
  • Article Page
  • Components Page
  • XML Sitemap
  • Search Page
• Organizational Items
  • Page Components Folder
• Page Components
  • Grid Layout
• Compositions
  • Form Settings
  • Page Settings
  • SEO
  • Component Settings
• Content Only
  • Global Settings
  • Nested Address
  • Alternate Link

There are important practices to follow to keep your site organized and easy for editors to use when setting up your Umbraco website. Please read the doctype setup instructions and important notes about doctype naming conventions.

Doctype Setup Instructions

DataTypes

• Starterkit [Organizational Folder]
  • Nested Address
  • Better Label
  • Image Picker
  • Navigation MNTP
  • Open Graph Image Cropper
  • Schema Markup Type
  • Simple Editor
  • Single Link
• Page Components [Organizational Folder]
  • Article Image Cropper
  • Grid Layout
• Component Settings [Organizational Folder]
  • Background Position Dropdown
  • Background Repeat Dropdown
  • Background Size Dropdown
  • Horizontal Alignment Dropdown
  • Size Dropdown
  • Text Markup Dropdown
  • Vertical Alignment Dropdown
  • Video Aspect Ratio Dropdown

Custom Code

---

Table of contents

• Document Types
• Dynamic XML Sitemap
• Partial Views
• Search
• Stylesheets

---