ASP.NET controls and Bootstrap styling

ASP.NET application styling

For quite some time already Infragistics ASP.NET controls have been providing robust and mature CSS styling infrastructure. To look back a bit, it has been almost 7 years (since 2007) that this styling approach was introduced and used by our ASP.NET and ASP.NET AJAX controls.

The structure of the CSS files is very simple. There is one shared file, which contains CSS class that are common among all controls:

ig_shared.css

And there are all other CSS files that are specific to each control:

ig_dataGrid.css

ig_datamenu.css

ig_datatree.css

etc.

What makes it easy to configure and use, is a Visual Studio integration that gets activated as soon as a WebForms page is switched into the design mode. The VS extension watches for this view, and checks right away whether the styling folder exists in the application. If it does not, the folder is automatically created and the developer is informed about default styles copied into this new location:

 

Afterwards the developer can change the style through extension dialog that can be found off

The CSS classes structure itself is very straight forward, does not use complicated CSS queries at all and easy to learn and modify. Each element that gets styled has two or more classes applied to it. First class is from the shared CSS file, second is specific to the control.

Very simple and very straight forward.

Now the technology is changing, new browsers and new standards were developed since Infragistics ASP.NET suite was first released to market. We need to maintain backward compatibility, but we also need to be up to date. What do we do? Read on for the answer!

Bootstrap styling

Guys at Twitter seemed to hit the nail on the head. Everyone likes their open source Bootstrap library. Get your copy here: http://getbootstrap.com/

It is modern looking, responsive to the screen size, uses latest CSS capabilities, and has many themes developed for it already. Even Microsoft includes it as a part of their ASP.NET new project template. The list goes on and on!

To get started using it is very easy, just follow the simple steps on their tutorial page:

http://getbootstrap.com/getting-started/

Putting it together

If you are like me, you are probably wondering if you need to re-write your application in order to start using Bootstrap theme. All of your current front end work needs to be thrown away and countless hours added to redesign of the UI.

But maybe there is another way.

Here at Infragistics we’ve been investing our time into developing a solution that helps older applications to take advantage of newer UI libraries, but still use most of your application’s front end HTML and CSS. Take a look at this prototype tool. That is currently code named “Bootstrap Mapper”:

http://bootstrapmanager.azurewebsites.net/BootstrapConfigure

(Currently the tool has been tested only in the Internet Explorer 11. Please use this browser to avoid some unwanted glitches.)

The idea of this tool is simple: create links between existing CSS classes and the ones that may potentially be changed in the future (like Bootstrap).

In the floating window on the right you can choose your current CSS files and drill down to the style setting level in order to:

• Delete a setting (x)
• Link a setting to another (s)
• Add a new setting (+). The new setting can afterwards be linked to another

Green color indicates whether a class is currently in use. Classes use is monitored in real time, they become green as soon as they are applied.

(x) – hitting the (x) button will remove the style setting from use and will apply default value to it.

(s) – hitting the (s) button will open a dialog for selecting a CSS style and setting to link to:

OK will create the link between the two styles using JavaScript. This is a dynamic link that is independent from the final value of the linked-to style. Because of that you will be able to swap the CSS themes and the link will automatically apply new values to existing settings. Very useful in a case where the Bootstrap theme can be changed.

(+) – hitting the (+) button at the bottom of the dialog will create a new style setting and give it a value. Once it is added to the class, you can also link it to another style on the page.

After all the configuration is done, it is easy to export dynamic linking JavaScript code by hitting the Export button at the top of the floating window. The code will be placed into the Clipboard and you will be able to paste it into your application.

And here is the result of our modifications with the dynamic links applied to this same page:

http://bootstrapmanager.azurewebsites.net/BootstrapLinked

Dynamic linking code for this small demo can be found in the attachment to the blog.

Some features that are in the pipeline for the next version of the tool:

• Provide dynamic linking to Bootstrap for all Infragistics ASP.NET controls
• Static linking – export CSS files (not JavaScript file)
• Export SASS and LESS files

We are working hard to make this tool into production quality and add it to our offering as a part of the product. Hope you like this tool, and we will not be able to make it as good and as useful without your help. So please, send your suggestions and comments. We are listening.