DNN Blogs

Written for the Community, by the Community

Bootstrap Instant 4.10 with Loads of Enhancements

Written By iJungleboy
2020-02-10

We just updated our popular Bootstrap Instant 4 theme with loads of improvements...

Basic Layouts

  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

New: Landing Page Layout

For landing pages we needed another layout, which didn't have a menu and was ready to quickly make amazing landing pages.

This is a great foundation for creating a landing-page builder for your customers. 

Note that most landing pages also need special CTA templates (Call-To-Action) and other content layouts optimized for Landing-Page needs. We're still working on those 😉

Best-Practices Technologies

  1. It's now based on Bootstrap 4.4
  2. and SASS, with a set of variables-files to customize layouts in minutes
  3. and 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](https://razor-blade.net/)
  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

 

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler
Total: 0 Comment(s)

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved