I’ve updated my internal HTML and CSS templates to include a responsive grid and other enhancements.
What is this?
For many projects, I’ve used my own collection of HTML and CSS to give me a starting point and speed up project development. I’m more likely to use Bootstrap or Foundation now, but my own internal templates are still useful on occasion and give me a chance to experiment and refine my process. My earlier set of HTML did not use a responsive design, and was getting outdated. This provided an opportunity to experiment with responsive design techniques, and also examine other frameworks in depth.
I liked some elements of Foundation, some elements of Bootstrap, and the starting HTML of the HTML5 Boilerplate. To update my own set of HTML templates, I incorporated some best practices from the HTML5 Boilerplate such as the IE classes on the HTML element. I created a responsive grid, borrowing elements from both frameworks. I designed the classes to accommodate different coding styles. For example, a seven column span could be defined with the class “.seven” (similar to Foundation 3 naming conventions), or “.span-7” (similar to Bootstrap 2 naming conventions). My own convention has been to use a format like this: “.col-7.” I also added classes for half, one quarter, two thirds, etc.
It was an interesting experiment, and I’ve used the result on one project with some success. I would still favor Bootstrap at this point for its maturity, robustness, and wide-spread adoption.
