Earlier, I decided that the table approach was too cumbersome to work with in HTML as the grid was divided into several table bodies, each using a series of table rows (<tr></tr>) and cells (<td></td>) to organize and separate the information in the grid. Each cell then contained a class particular to each type of activity in the grid. There are excursions, commitments, activities, events, and specials. I added another class called "grid-title" to handle the styling issue of having to deal with two seemingly unrelated tags (div id="activity category" and div class="get-started"). This made it easier to specify styles and formatting in the styles.less file and the makahiki-structure.css file. The site is not currently using the makahiki-structure.less file, which I will explore at a later time, but for now I'm making changes in the appropriate places.
In response to the cumbersome table, I re-created the entire "smart grid" game area from scratch, using a series of nested spans to create the grid as a series of columns. This would allow all the categories to remain in position and new grid elements could then be added to the bottom of each respective column without ruining the format of the grid. The HTML for the row-fluid and span version of the "smart grid" was much easier to look at and edit. Unfortunately, I realized that neither grid really looked that good when actually viewing the site. The main reason is that each grid element had different heights, which caused the grid to fall out of alignment. This was the case for both the table and the row/span versions. Interestingly enough, I realized that the table version was formatted similarly to my approach as only the table header elements shared a particular row. Each column under the header was contained in a single table data tag, or cell, which then contained a series of rows of single cells. Given this structure, it is no wonder the grid does not stay aligned well with cells of different sizes, and why the HTML is so difficult to follow.
I did solve the main problem by setting a "min-height" for each grid element to be 55px. This gave the elements a unified structure and everything seemed to work well enough in response. Below are some images of the results:
Before:
This is still a work in progress, however, as I have to continue to work on the style and structural formatting for each version. In the images above, the images on the top are the row/span version and the images below are the table version. The table version continues to have inconsistencies in size, which I have been trying to find. It is unclear as to why certain elements are more narrow than others. I've even tried to set min-width values, but that didn't seem to fix it. I'm still working on a way to remove the extra space between the three major spans of the row/span version. I feel the solution is to add the spacing to the each element and not the span. I will be making that change later today.
I have also been removing the style tags for the text within the "smart grid" elements, as they were utilizing the header 5 tags (<h5></h5>) and header 3 tags (<h3></h3>) which should be reserved for page elements unrelated to the grid. That way, if the header styling changes for the page, it will not affect the grid elements. I did change the color of the text in the grid to the @black variable in the sky-theme.less file, but it has not yet applied when viewing the site. I've been searching the other LESS and CSS files to find out where this is being overwritten.
Thus, while I feel that I have learned a great deal about table formatting and alternative approaches, I still have a lot of work to do before our team meets again. Even though I have spent a great deal of time working on these issues, some of the problems still elude me and I would like to have a clean looking version to demonstrate at the meeting. I will be continuing to work on these issues in the meantime.
No comments:
Post a Comment