DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


New: DNN Instant Theme / Skin with Bootstrap 3 & SASS

Want to create high-quality DNN themes within minutes? Introducing the DNN Instant Theme with Bootstrap 3, SASS and many features. 

So if you love DNN and Bootstrap, this is for you, because we are now open-sourcing our 2sic template, which we use for every website we create. Enjoy :).

This is what's in the Package

  1. A clean, best-practices, responsive Bootstrap 3 Skin / Theme
  2. ...based on SASS, with a set of variables-files to customize layouts in minutes
  3. An e-mail encryptor to encrypt mail addresses in the layout
  4. A SEO-title optimizer
  5. An automatic svg/png integration for responsive logos
  6. Layout footer implementing SEO microformats
  7. Bower configuration for all dependencies
  8. Gulp to process the sass into the resulting CSS

How to Install

You can either install the skin-package from the latest git-release or if you're more of a CLI nerd, just use git to pull it into DNN with

git clone https://github.com/2sic/dnn-theme-bootstrap3-instant "YourNameHere"

More installation options are explained in the wiki

This is what it looks like after initial installation:

Note that with this theme/skin you can create new your own custom skins in minutes or hours. For example this layout was created using the same theme as foundation:

Quick Technology Recap

First, you need to know about the basic technologies in the package. You probably know all of this already, but just a quick recap:

  1. CSS is the set of rules how things look on your web site - and how the look changes based on screen size or output media (print, screen, etc.). A modern site needs so many rules, that it is hard to manage them in pure CSS. Instead, we'll use a CSS framework like Bootstrap 3
  2. Bootstrap 3 is a CSS framework which standardizes how you name your CSS styles and how you solve various issues like Separation-of-Concerns, grid-layouts and more. You should know the basic conventions and philosophy of it to get good. 
  3. SASS is a CSS preprocessor which lets you write Meta-CSS with variables, if/else and more. It especially allows you to use variables in a central location which then are used to generate the final CSS.
  4. Bootstrap SASS is the official version of Bootstrap which is created using SASS. This means that almost everything only needs some variable changes, rebuild, and you're done :) 
  5. Bower is a system which automatically downloads additional stuff your code relies on - like the "naked" Bootstrap parts and more. The dependencies are listed in a bower.json file, so if you want to do sophisticated work requiring a full rebuild of everything, all you need to do is call "bower install" to get all the parts which you need, ready to then re-compile your CSS
  6. Gulp is a task-engine which will automate development work for you. For example, it will watch the files for changes, and every time you save a SASS file, it will auto-generate the CSS for you
  7. Node is the platform-independent engine which runs Bower and Gulp. You need this :)
  8. NPM is the package-manager for node, which is in charge of downloading platform-independent programs like Gulp and Bower

How To Use Overview

You only have to adjust some variables like colors and then recompile your CSS to create your most awesome, customized skin. It's as easy as that. So the steps you'll usually perform are:

  1. Install all the basics parts including Node (which also installs NPM), Gulp, Bower and SASS
  2. Start the Gulp-Watcher which keeps an eye on your files so that any changes are automatically compiled into new CSS
  3. Adjust your variables and watch the magic unfold

Note that most javascript professionals already have node, gulp and sass installed, but if you're still a javascript-virgin, check out the installation instructions in the wiki

Customizing Your First Theme in 30 Seconds

Let's just change the primary color to 50 shades of blue and rebuild your entire CSS. For this, first run gulp, to watch your src files for changes. 

  1. Make sure you have all dev-tools and dependencies installed, as documented in the wiki
  2. Open your command line in your skin-folder and type "gulp". You now have a watcher monitoring your file for changes (or use Visual Studio code and do the same in the terminal of VS code)
  3. Open the file /src/_variables.scss and change
    this line: $brand-primary: #5C4483 !default;
    to this: $brand-primary: #0088F4 !default;
  4. save the file

You should now see in your command-prompt that gulp recognized the changes. It will recompile the CSS within a few seconds. Refresh your browser, and your entire theme should now 50 shades of blue

More Customizations

You have everything you need now, to create awesome themes within minutes and hours, instead of hours and days. Of course you need to understand Bootstrap and SASS, so if you're still missing that, dive into that first.

TL;DR

This package contains everything we from 2sic use every day to create themes. Actually all the sites we created in the last few years are based on this material. Hope you love it :)

Love from Switzerland,
Daniel and Luca (who is in charge of this theme)


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 forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler

Comments

John Cornelison
So generous, and so innovative! Thanks for the nudge into these technologies.
John Cornelison Tuesday, May 23, 2017 7:45 PM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (29)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (29)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (146)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (2)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (272)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (53)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (39)
Will Strohl (164)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out