As I've looked around at various grid systems, I've found that each system has been made with a certain philosophy and/or naming convention that requires some learning and understanding. So I thought it would be valuable if I made one myself, for the learning experience. I also prefer to build sites with a width of around 980px and most other grid systems are based around 960px. I've built a number of grid systems for different clients, but I've never been entirely happy with them. This is an attempt to build a solid starting point for any project and it will be a work in progress. Final destination: I'm wanting to apply a 320 and up, responsive grid.
I made this grid system while watching "My Neighbor Totoro" with my little girls. So for naming sake I'm just going to call it the Totoro grid system, and no, this won't live up to the movie. I also need to mention that I took a lot of the same naming conventions from the 960 grid system.
Questions? Contact me via Twitter @robkellas or my Google Plus page at Rob Johnson.
Some key pointers for this grid system:
905
51
844
112
783
264
722
234
661
295
600
356
417
417
478
417
417
539
356
600
295
661
234
722
173
783
112
844
51
905
966
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
112
51
51
51
51
51
51
51
51
51
51
51
51
51
264
51
51
51
51
51
51
51
51
51
51
51
234
51
51
51
51
51
51
51
51
51
51
295
51
51
51
51
51
51
51
51
356
51
51
51
51
51
51
51
51
417
51
51
51
51
51
51
51
478
51
51
51
51
51
51
51
539
51
51
51
51
51
51
51
600
51
51
51
51
51
51
661
51
51
51
51
51
722
51
51
51
51
783
51
51
51
844
51
51
905
51
966