Friday, March 20, 2009

Free DotNetNuke skin template of BluePrint CSS framework

There are lots and lots of css framework available across the world which means to solve the repetative css code writing problem for you. There are two remarkable frameworks that earn respect in the designing web 2.0 websites, 960 grid framework and BluePrint css framework. There are some good articles for comparing the the two and lots of other one, and most of the discussions ends with BluePrint css framwork is better than anyone else and after that 960 css framework. You can just click here for search results about comparing BluePrint vs 960 framwork. There are good css frameworks which can be found through google by the term Css Framework.


I found an implementation of 960 grid framework for dotnetnuke in dotnetnuke forums. You can visit the site here. Its always helpful to get this kind of efforts available online. Because of this implementation news, I started thinking about which is the css framework that really can help speed up the skin development in dotnetnuke. As 960 is a good option to go with, those who want to use 960 will get started with the implementation at http://www.dnngrid960.com/. Those who think BluePrint is a better option, I implemented a very basic skin. Here is how it looks like the one shown in the image. Here is a quick summary:

  1. The template is of so basic lavel
  2. There is a single container
  3. Single skin file with html4 strict doctype validation.
  4. No skin objects or dotnetnuke controls are added in it
  5. Very light weight and simple template

You can download the skin template from here. The template will help you implementing your skin quickly.

You can find an example skin BluePrint0.1 implemented here.

  • The example skin implementation is a very basic level and same as the default dnn blue skin
  • Tried implementing the sking with just a grid.css and only core basic classes so that everyone can understand the dnn classes as well as blue print css classes easily
  • IE and Mozilla fonts are leaved intentionally different so that users can understand they can fix ie related css stuff in ie.css
  • No images, single basic container.
  • YSlow : 28.4k Stylesheet files(4 files), 0.05k image (BluePrint.png), 169.2k Javascript files, total 214.4k with 17 requests.
Hope this will help you understand the BluePrint css implementation as well as help speed up your dotnetnuke skin development.

4 comments:

  1. Hmmm Obvious the menu was missing which made life a little difficult (but I guess that is by intention)... also I could not even get the action menu to work which meant I could not get past the skins page (DNN 5.0.1).

    Very interesting though...

    ReplyDelete
  2. Having read the blog post again I guess I'm saying I would like to see this with some controls to start off with (have two seperate downloads I guess, one example one template)...

    Great stuff!

    ReplyDelete
  3. Thanks for your valueable feedback Alex. Well initially i was thinking of a basic stuff that can be reused everytime you start developing a new skin. My next article will be a skin using this simple template which will make the thing much more understandable. Get back to you soon.
    Regards

    ReplyDelete

Please add your valuable comments about this post if it helped you. Thanks