Friday, March 23, 2012

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.


No comments:

Post a Comment