Current Version 8.4

Resource Files

In this blog we will go through the DesignBais (RD) resources files with an example.



Complete the Hello World exercise to build a responsive design web site at http://localhost/dbnetrd. 

Our developer tools are at: http://localhost/dbnetrd?ac=dev 

The web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd

Complete the exercise in blog Work folders, URLs, Files and Organisation



  • Observe the location of res (resource) folders
  • Create your own theme (css) file
  • Amend your demo-hello page and your theme file to change the HTML H3 heading colour to red.


Location of Resource Files

DesignBais creates a resource folder for each work folder that you create.  The resource folder associated with our "demo" work folder is:


Each resource folder contains four subfolders:

  • css
  • fonts
  • images
  • meta


The css folder includes a number of css files (e.g. blue.css, green.css etc.).  In DesignBais these are called "theme" files (or css files). 


Note browser's caching!!

Please note that browsers aggressively cache css files amongst other file types.  In order to be able to see your changes to your style sheets (css files), we recommend that you open Chrome's developer tools (F12), select the Network tab and tick "Disable cache". For the rest of this exercise, please keep the Chrome developers tool open. 


Change the heading style

Create new theme file

In Windows, open your folder: c:\inetpub\wwwroot\dbnetrd\res\demo\css

Copy the file blue.css and paste as demo.css in the same folder.  

Now we have c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css as our theme file.

Select your page theme

Navigate to http://localhost/dbnetrd?ac=dev and open your Responsive Design Form Designer.

Check the bottom left corner to make sure that your work space is /demo. Otherwise, set your work folder to /demo.

Menu > File > Properties, select "demo" from the Theme dropdown and OK to close.

Your page theme has now been set to "demo".

Click the HTML text "Hello" on the page and press CTRL+Q to edit.  Click the word "Hello" set its format to "Heading 3" (corresponds to H3 in HTML code).

Press CTRL+S to save and then CTRL+L to publish this page.

Edit the CSS file to change the style of "Heading 3" 

Open c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css in Notepad, scroll to the end and add these lines:




Save the file and close.


Test Point

In a new Chrome browser TAB, make sure that Chrome developer tools are open (F12) and navigate to http://localhost/dbnetrd?dbpage=demo-hello

Press CTRL+F5 to refresh the page.  You should see the word Hello in red colour.


Deployment to live (production) web server

When you deploy your website to another webserver (e.g. live, production) the "demo" folder is the only folder that you should worry about copying from your development server.  This folder includes all stylesheets, fonts, images and other resources that you need in getting the "demo" running on your production server.


Other Resource Folders

We'll go through the remaining resource folders (fonts, images and meta) in our other blogs.