The reason for this is I was more concerned about replicating the desktop version of the design through the use of Grid and less concerned about how best to display that information on smaller screens (although I do start to get to that at the end of the process). What would a periodic table look like if I built it from a purely semantic point of view in HTML, and how would that then translate to the screen from a visual design point of view.Īs a word of warning on this … I probably haven’t approached the CSS Grid Layout in the best way possible, and the approach that I’ve used (very much a large viewport first) goes against everything that I would usually preach for approaching content design. Was it really a table? Was the information in a tabular form because it needed headings and rows, or was it called a table because that was the best visual representation of the data. Out of nowhere I suddenly thought about the periodic table. The other day I was racking my brains around the best use of the grid system, because at the time I was kind of at the point where I thought “meh, sure it lays out the page in the same way that we’ve been doing things for years. See the Pen Periodic Table Grid CSS by Justin Avery on CodePen. make sure you enable flags in your browser. If you just want to see code then here it is…. The CSS Grid specification provides us with the ability to take web design to the next level without having to succumb to adding in otherwise un-needed HTML or the use of CSS hacks (looking at your floats).
0 Comments
Leave a Reply. |