It has been a long time since I have blogged on a technical subject matter. With MWLUG, iPhora, and family it has been very busy and every time I wanted to blog about some technical subject, time does not permit it. Now that the office next to us is under construction this morning, it is a bit hard to concentrate on work. I have decided to blog on a subject matter that is of interest to many, Twitter Bootstrap.
I have talked about using Twitter Bootstrap in my applications in the past and I abandoned it because of its complexity. I was interested in using Twitter Bootstrap as a responsive design framework. However, I found that it was easier for me to use my own responsive design framework and Twitter Bootstrap was put on the shelve.
Since iPhora uses Dojo, all the widgets were Dijits which are a wonder piece of engineering, but they are also very complex and big. I had already minimized the number of Dojo and Dijit modules that I needed to run the interface of the iPhora products but the loading performance was not what I wanted. So I revisited Twitter Boostrap again, but not as a responsive design environment, but as a widget framework. One of the problems is that all the plug-ins for Bootstrap are written in JQuery which I would love to learn but I do not have the time. Kevin Armstrong created Dojo Bootstrap dojobootstrap.com using Dojo 1.7 + with AMD. These dojo based plug-in work great, but I am still using dojo 1.52 though I am working on converting to 1.83. In addition, iPhora widgets have special widget wrappers not normally found in widgets.
So I decided to spend a weekend looking into the core of the Twitter Bootstrap CSS and determine what I needed to create widgets using the Bootstrap CSS. I had already developed my own custom widgets using Dojo only without using Dijits which eliminated the need to load the associate Dijit css and Dijit module files. However, I did not want to invest any more time into creating my own widgets design, since bootstrap provided a much better visual appearance.
First, I had to determine what bootstrap has already provided as part of the CSS and I was amazed on what was already there built into the bootstrap CSS. I would never have the time to invest in building the core CSS.
I started off with a simple INPUT tag which gave me a better understanding on using Bootstrap CSS to create widgets. What amazed me was the responsive layout allowed me to create the concept of a "Responsive Widget" that I was looking into creating for awhile. From the based components that you find on the Twitter Bootstrap site, http://twitter.github.com/bootstrap/index.html , like form, buttons, and inputs you can create amazing widgets quickly like the combo box below which is not part of the basic bootstrap widgets. A Bootstrap combo box looks ugly:
Most of the work that I would normally do using Javascript is handle with CSS, because bootstrap is built from the ground up with HTML 5 in mind. Now that the construct is over with for the day. It is back to work. Next time, I will show how I built this widget.
I have talked about using Twitter Bootstrap in my applications in the past and I abandoned it because of its complexity. I was interested in using Twitter Bootstrap as a responsive design framework. However, I found that it was easier for me to use my own responsive design framework and Twitter Bootstrap was put on the shelve.
Since iPhora uses Dojo, all the widgets were Dijits which are a wonder piece of engineering, but they are also very complex and big. I had already minimized the number of Dojo and Dijit modules that I needed to run the interface of the iPhora products but the loading performance was not what I wanted. So I revisited Twitter Boostrap again, but not as a responsive design environment, but as a widget framework. One of the problems is that all the plug-ins for Bootstrap are written in JQuery which I would love to learn but I do not have the time. Kevin Armstrong created Dojo Bootstrap dojobootstrap.com using Dojo 1.7 + with AMD. These dojo based plug-in work great, but I am still using dojo 1.52 though I am working on converting to 1.83. In addition, iPhora widgets have special widget wrappers not normally found in widgets.
So I decided to spend a weekend looking into the core of the Twitter Bootstrap CSS and determine what I needed to create widgets using the Bootstrap CSS. I had already developed my own custom widgets using Dojo only without using Dijits which eliminated the need to load the associate Dijit css and Dijit module files. However, I did not want to invest any more time into creating my own widgets design, since bootstrap provided a much better visual appearance.
First, I had to determine what bootstrap has already provided as part of the CSS and I was amazed on what was already there built into the bootstrap CSS. I would never have the time to invest in building the core CSS.
I started off with a simple INPUT tag which gave me a better understanding on using Bootstrap CSS to create widgets. What amazed me was the responsive layout allowed me to create the concept of a "Responsive Widget" that I was looking into creating for awhile. From the based components that you find on the Twitter Bootstrap site, http://twitter.github.com/bootstrap/index.html , like form, buttons, and inputs you can create amazing widgets quickly like the combo box below which is not part of the basic bootstrap widgets. A Bootstrap combo box looks ugly:
Most of the work that I would normally do using Javascript is handle with CSS, because bootstrap is built from the ground up with HTML 5 in mind. Now that the construct is over with for the day. It is back to work. Next time, I will show how I built this widget.
Comments