Doing More with LESS

This week was dedicated to working with LESS and working with making the Kukui Cup page responsive using the Twitter Bootstrap framework. After some reading and tutorial videos I felt like I was ready to take a stab at implementing them both into the Kukui Cup page. However, it wasn't with its own challenges.

Working with Twitter Bootstrap was actually not too bad. It was similar to using the Skeleton structure we tried using a few weeks ago, but a little more straight forward with the class names and exactly what they did. It came with a nice class that allowed divs to be put into rows as well as a 12-column system that allows divs to put into 12 even columns or other versions of it (ie. 3 columns of width 4, 2 columns of width 6, etc.). It seemed easy, until actually inserting the div tags around already existing divs. With a page already having a few dozen div tags, it was quite simple to find the opening div I wanted to surround, but finding the corresponding closing div was a task that took some time. Now that a few of the simpler pages are done (ie. news and profile) its time work on the others like 'activity' that contain fixed with width objects.

As for LESS, as expected it was WORLDS simpler than having to re-enter the same css code or having a semantically bad css file that is hard to read. LESS allowed me to save things like color and paths to pictures in variables to reuse them later in other lines of the code. This saved a lot of time since I wouldn't have to go back and search through what color I used or look up what color that hex or RGBA code was. There are still some problems however. When I try loading the page in Google Chrome, the less.js file throws an error and I am not sure how to fix it. I will be looking into it more over the next few days so that the file will work well in all browsers (or well, maybe not Internet Explorer).

Time to Bootstrap in!

After weeks of redesigning, we're finally moving on to the next step of redesigning the Kukui Cup website. We are now in the step of using Bootstrap, a simple HTML5, CSS3, and JavaScript structure from Twitter to make the site responsive. After watch watching a bunch of excellent tutorials (found here), Bootstrap seems so much easier to use than the previous frameworks that we have tested.

So far, all I have done is set up a local file structure to prepare to incorporate the new Kukui Cup website with Bootstrap. I am quite excited to begin work using Bootstrap as it seems WORLDS easier than a lot of other frameworks.

In addition to Bootstrap, I have started looking into "less" and good gravy is this going to make my life SO much easier. Sometimes, less is more and in this case it is more and will save me (and the rest of the group) a lot of headache in refactoring CSS files. Less allows us to declare "variables" and save things like colors to them. This will save us from hours of headaches in figuring what color is what and the overall semantics of the CSS file. Finally, some programming-ish features in website design.