CodeShare Starter Kit is out now
Some of you may be aware that I have built my own starter kit for Umbraco. I wanted to create a package which gives examples of simple and up to date concepts in Umbraco.
Demo site
I created a demo site for you to be able to see what you get when you install the package.
Download
You can download the package from Our Umbraco or install it in the developer tab of Umbraco.
What is a starter kit?
A starter kit is a package that you install, which has document types, templates, content, media and all sorts of other things to give you a starting point when you are getting used to Umbraco.
What's different about this one?
This starter kit was built for Umbraco version 7.7.6 and above. It uses Nested Content which is now built into Umbraco. It allows you to create lists of things in a single property. Read more about how to use Nested Content.
How do I install a package in Umbraco?
If you need to know how to install a package in Umbraco, watch this video I made.
Here is a list of features in the starter kit:
- Bootstrap template.
I used Bootstrap studio to create a template for the starter kit. It is a simple, clean bootstrap template. Watch this video to find out what is Boostrap Studio is and how to use it?
- Home page carousel using Nested Content and Bootstrap
I built the carousel using Nested Content in the backend and Bootstrap on the front end. I even added the functionality to disable Nested Content items, so they don't show on the front end but you can keep them in the list until you are ready to use them. Read this article to find out more about how Nested Content works.
- Content pages using the Umbraco Grid Editor
I like the Grid Editor in Umbraco, it works really well with Bootstrap. The starter kit comes with the grid editor set up so you can see how to use it in your Umbraco sites.
- Blog or News section.
Every website needs a blog or news section right? I added a article list document type and an article document type. It has an author name and an article date. Apart from that it's a normal content page using the grid editor. I've not added categories as I wanted to keep it fairly simple with it being a starter kit. I created a partial view which renders the latest articles, I use this on the homepage as well as the news list page. You can tell it how many articles to load.
- SEO
When you are editing the pages, you can edit the Meta Name, Meta Description, Meta Keywords and Browser Title. All of these properties get rendered into the HTML of the page to help with SEO. Find out how to optimise your website for search engines in this blog post.
- Contact Form which uses Ajax
I built a simple contact form with Name, Email and Message. The Controller and Model for it are inside a dll, but you can get the code for it from the project in GitHub. The form submits using Ajax and it shows a success or error message, depending on whether there was an error or not.
- Simple Umbraco Search
The package comes with a simple site search page which uses the Search functionality which is already built into Umbraco. Find out how to create this simple search in this blog post and video.
- Bootstrap Navigation Menu with Dropdowns
I've been asked quite a few times to show people how to create a bootstrap navigation menu which uses dropdowns. This lets you click on the parent item to open it, then you can click on the parent to visit that page or click on the links in the dropdown to visit them. See the code for the navigation menu partial.
- Pretty Links
I like to create what I call "Pretty Links". These are content items which act like links. This allows you to create short links to pages in your site or even to external web addresses. I use them in the navigation menu of the site. Watch this video to see how you can create Pretty Links in your project.