Modification

            After last week’s cleaning up of the html file (news.html – I renamed it to news_hansen.html) that I worked on, it was time to moved on to modifying contents of the web page. Before I modified anything, I noticed that the section that listed lounge members was in a vertical one column list; it was also displayed right in the middle of the website. This also applies to the news feed section which it had the content display in the same style as the lounged members section.

            Basically, I modified the original code of just displaying the contents in a list to containing div tags to create columns within the list.  The result came out to be three columns of contents within the list. I also applied a similar design to the news feed section to place the news content in columns instead of just one column of content right in the middle. Now the modified site looks like this in the picture.

            For this week I will look into other contents in the site to see if there are any other things to modify or some current things that needs to fix. Also, I will look into fixing the mime-type of the svn so it will display the site correctly on Google Code.

           

Cleaning Up

            For this week the focus is on cleaning up the files so it doesn’t contain unnecessary code to make the files smaller in size. It also makes the code cleaner to look at and even easier to follow. For example, cleaning up and having less div tags in html and even ids makes it easier to locate where things begin and end.

            I selected the news.html (which will upload later on) and cleaned up as much of the ids in the div tags as I can. I only ran into some trouble with a part where I took out an id and the content disappeared from the site. Otherwise I managed to clean up most of the ids and combined some class into one div tag instead of separate div tags for each class. For example

            Original

            <div class=”content”>

                        <div class=”content-title”>

            Cleaned

            <div class=”content” class=”content-title”>

            Overall, this week’s progress is better than last week; unfortunately last week I was too ill to have done as much as I wanted. As of now with the cleaned up html file I will move on to making the page be responsive but still retain organize contents.

Lessify-Again

 

            Previously before Spring Break I was experimenting with the .less file to change the theme and experimented with the columns from Twitter Bootstrap. For this week I worked on the help.html.

            Basically, I applied what I done from the week before Spring Break and tried to maintain the content in an organize manner in small window. Well, nothing is better than a picture since picture is worth a thousand words.

          

           It does look very little work due to me falling ill this week. Stomach ache, fever etc kept me behind schedule. Hopefully I will fully recover by next week to work on more pages than just one.

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.

Makeover 3

            As of last week I worked on moving the contents around to different position and put in a new background color (Refer to last week’s blog for more information paste link here). Unfortunately last week’s design was a little mush up so this week I took one page (news.html) and tried to take things apart to create a partial design (view picture below).

            The picture above shows that my idea is to take away the icons in the nav bar and move it to the side to be replaced by a vertical menu and the other contents would be almost as it is in the original design with only color changes.

            Through the week I had a confusion of what was to be done, which brought me to borrow another member’s theme and edit what the project supervisor asked to edit to make it look better. Basically, I checked out the project and copy over Sean Chung’s theme and edited it so that content box on home.html with the large icons would be curved and took away that horizontal black line. Later on I found out that we can still work on our own design by using original files and to put in new colors.

            Overall, it was a week of a little more progress of understanding more about HTML and CSS and glad the confusion of what needs to be done is over. For this upcoming week will experiment on finding color schemes/backgrounds that would make the site to have the potential to make it look appealing before moving on to moving things around to make a complete new site.

Makeover 2

            For this week on my Kukui Cup website project I took apart one of the webpages and try to reconstruct it into the possible design I want. Also, pick a background that involves less mixture of colors. Basically, I went from colorful to a simple background approach.

            Last week I was thinking more of a nature background color and trying to move some contents to some places. Refer to last week’s blog for more information: Makeover. This week while reconstructing I took away that nature background color and went with simple white background with a greenish background for content boxes. As for the text color I went with a darkish green color to bring out the background of the content boxes.

            I was successful in getting the bar with links (we call it nav-links) to be on the side and act as a side menu. This time I was able to keep it within the container but out of the header (the part in the website that contains the Home button, user and floor info etc). As for the other contents I wasn’t too successful with moving it to the positions I want.

            Overall, my problem is still with how to get the contents to move to a certain position on a page. Whenever I move it I have trouble figuring out which kind of tag or code to type into CSS to actually place it nicely at a certain spot. That is why this time I was able to have a simple background and move some content, but the others wasn’t successful so things does seem mush up together. I hope that soon I will figure out a way to get everything place nicely and apply it to every page.