Time 2shine with Bootstrap5 and Dnn - 99 PageSpeed Mobile

Excited to share the first Bootstrap5 Theme for Dnn - and that all core 2sxc Apps have been Updated to support BS5. Merry X-Mas!

2shine in Action

We're really proud to share the new 2shine theme with you. Here some examples of what can be done:

99 Points on PageSpeed Mobile

Thanks to improvements in Bootstrap5, removal of jQuery and the way we built the new theme we got 99 points on Google Page-Speed Mobile:

This is real! 99% on a real-life site configured as follows:

1. Standard Dnn 9.6 or newer
2. 2shine Theme
3. 2sxc 12 with the latest Content-Templates optimized for Bootstrap 5
4. Disabled jQuery in Dnn for viewers

We also tried visually heavy pages like the Animals-Demo and got 90 points. We believe we'll get that to ca. 95 Points once we release 2sxc 13 with WebP support. 

What Bootstrap5 Best Practice Means

The Bad Way to do CSS

There are different ways people use Bootstrap, so it's important that you understand what we're doing. Most people use Bootstrap by doing the following:

1. including it from a CDN as-is
2. writing some custom CSS to override certain aspects and colors

That's nice to start, but it's not good. Here's why:

1. It includes everything in Bootstrap, even parts your page never needs - this will slow down the browser and Google PageSpeed will also punish you. 
2. It is inefficient in terms of working, because you have a SASS rocket to build amazing CSS, but you're actually patching stuff on it, instead of using it.
3. The result is often not very reliable, as you have to remember all the things you patched and have to test it in many scenarios and on many devices. 

The Professional way using SASS

Web professionals have code which looks like CSS but uses variables and functions which contain all the rules for the final CSS. A compiler (usually SASS) will then change this into CSS which browsers understand. This is much more efficient and results in much better, reliable CSS. And this is how 2shine is meant to work. It's documented on 2shine.org/docs/sass.

The Professional Way to do JavaScript

For better JS quality it's critical to move up to TypeScript. It's simple, but the resulting code will be much more reliable. This is also how it's done in 2shine. 

The Professional Way to use WebPack

The final piece of the puzzle is Webpack (which runs on node.js). It is a engine to do all kinds of compiling and optimizing for SASS and Typescript. So the way 2shine is built all you have to do is run webpack to auto-compile all your changes on the fly. 

2sxc Content-Templates for Bootstrap5

In addition to the theme, we've also secretly updated the 2sxc Content-Templates to work perfectly with Bootstrap5. Test it on a new site, or just copy the /bs5/ folder from a new installation to an older one to get these benefits. 

2sxc Apps for Bootstrap5

Yes, all our awesome 2sxc apps have also been updated to work perfectly with Bootstrap5, so there is nothing stopping you from creating DNN sites today using Bootstrap5

Big Thanks to...

1. Tom Lendi for his dedicated work to making this so awesome
2. Roman Opalko for his technical expertise and work
3. Maxim Hüsler for updating all the 2sxc Apps
4. Daia Robbi for creating the docs (he's still new to this, but starting strong)
5. 2sic for sponsoring all this work and sharing it for free

Get Started

Try it now - go to 2shine.org to download the Theme and find instructions / docs to get started. 

Love from Switzerland
iJungleboy