Lessify

            Last week I experimented with getting the contents to be in perfect columns using Twitter Bootstrap. Although, not too successful, but it allowed me to understand a little bit more of how it really works. Initially I didn’t quite get what the @media tags were for, this week I understand that it’s for the browser screen size and different screen size will correspond to the spans which will create columns.

            Besides understanding more about the Twitter Bootstrap, I also had to understand the .less file really works. Fortunately this .less file is not too hard to understand, in fact I find it easier to understand than a CSS file. One reason is the use of variables that can represent hex value of a color etc. With one variable representing a color it can be used in other parts of the file with few modifications to create different shade.

            For this week I picked the energy.html that was designed by another person call Cam. Basically, I had to modify the provided .less file to change colors and get understanding of the file’s structure. I also experimented with different ways of creating columns to make the site look better in small window size. I managed to get the contents to move into kind of a organized way when in small version. However, still need to play with more to get everything in a more comfortable view in tablet or mobile size.

            Glad upcoming week is spring break which will give me more time to experiment and play around. I’m looking forward to make more progress even if it means the progress produce failure results. It will just give me a chance to learn more.

Bootstrap Organized

            After several weeks of experimenting with layout, background color and so forth we finally move on to experimenting with a responsive structure for Kukui Cup website. Before I viewed the tutorials and read through what Twitter Bootstrap is I thought it was something from Twitter.

            Initially, when I went through the tutorial of the first version of Twitter Bootstrap I was amazed at how it has a nicely planned out grid structure. As I understand things can be in rows and with the use of the class of span it can create columns to have everything organized. Now with the version 2 we can go onto the Customize and Download page (http://twitter.github.com/bootstrap/download.html) we can customize what will be included in the bootstrap.css file.

            I tried playing around with the home.html by taking out some parts and try to test out how to incorporate bootstrap.css into the website to make it responsive. Although, not too successful, but I at least saw how the content reorganized in certain size of a browser (e.g. tablet size browser window).

            For now more experiment must be done to understand how the styles work, and how to organize everything so when browser window gets to any size it will work like the examples provided from download. Overall this is a good start of having a decision on what responsive style to use so everybody can be focus and have improvements in upcoming weeks.