Skip to content
This repository has been archived by the owner on Nov 8, 2022. It is now read-only.
ijungleboy edited this page Feb 10, 2020 · 10 revisions

The Bootstrap Instant Theme 4.10+

Using Bootstrap 4.4 and compatible with DNN Versions 7, 8, 9

If you are looking for instructions for the older theme v4.0, you can find it here

This theme is a layout/skin for the CMS DNN based on Bootstrap 4.4+ and SASS. It allows you to create simple custom designs within minutes and complex designs within a few hours. This is why it's called instant.

What's in the Package

  1. A clean, best-practices, responsive Bootstrap 4 Skin / Theme
  2. Three core layouts (Normal, Wide/Panorama, Box)
  3. Three core menu placements (left, right, centered)
  4. A special Landing-Page Theme

Best-Practices Technologies

  1. It's based on Bootstrap 4.4
  2. and SASS, with a set of variables-files to customize layouts in minutes
  3. NPM for all dependencies and WebPack to build it all

More Goodies

  1. An e-mail encryptor to encrypt mail addresses in the layout
  2. A SEO-title optimizer
  3. An automatic svg/png integration for responsive logos
  4. FavIcon best-practices using Razor Blade
  5. Layout footer implementing SEO microformats

Plus various Recipes to get you started 🚀

Theme Installation

There are two ways to install the initial package

  1. Install the Theme Package (recommended)
  2. By using git clone

Customize and Redesign everything within Minutes

You can now quickly customize and redesign everything within minutes. Here are some instructions:

  1. Prepare your setup with npm install
  2. Customize most common things
  3. Just change the primary color and logo
  4. Just add custom fonts to the build

Creating Awesome Designed Content

You now have created the layout within minutes or hours, but you're still missing the perfectly designed inner pieces, like tile-lists, content-accordeons, galleries, sliders, blogs and more. Fortunately these are both super-easy to add and use the same mechanisms for design. They can even re-use the variables of your skin, to automatically match look and feel :)

To get the awesome designed content, install 2sxc and the default bootstrap4 content-templates. You can then change the SCSS in the content-templates to also point to the _variables.scss of this skin, and re-generate all styles for an amazingly fast development workflow.

Love from Switzerland

Daniel, Aaron, Tom and Raphael