In our final meeting of 2017 we reviewed a number of tools available to help in building just the right grid for web page layout.
We kicked off with a video (actually just looking at the splash screen for the video – more on that later) that provides an excellent overview of the CSS Grid topics we have covered over the past 4 months. It’s about 20 minutes or so, but very well done.
https://www.youtube.com/watch?v=paMmgo4MhQ8
Mac/Windows Grid Builder, from CoffeeCup Software is a well developed tool. Currently available for free, it does require registration for the download link. The tool is advanced. It has tons of options, but work through it and you will be able to export everything needed to launch a grid based web design. Read all about it here: https://cssgrid.cc/
Over the past months, as we reviewed the capabilities of CSS Grid, we frequently used the Inspector tool in the Chrome browser (my development browser of choice) to view the generated html. However, for a more complete view of the Grid, you must use Firefox Devtools. Here is an intro to the Grid specific capabilities of the tool – https://mozilladevelopers.github.io/playground/css-grid.
The Firefox Developer Tools website offers a detailed breakdown on how Firefox 52 takes the grid view tool to the next level. Read all about it: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
As a WordPress developer by profession, I tend to read a lot from talented WordPress developers. One of my online mentors is Morten Rand-Hendriksen. He recently completed a re-do of his personal website which is a fine example of the use of CSS Grid. Take some time to go through the front page, using Firefox dev tools to see how the grid is implemented. https://mor10.com/
We went through a live demo of a cool online tool that generates correct CSS grid code that can be dropped right into your project. Check it out on your own to see how it might benefit your next web project: http://griddy.io/.
Codepen, an online resource that we go to often, has a number of projects for use. This pen, by Anthony Dugois, is a good example of using named grid areas for design.
And finally, a big shout out to Valentino Gagliardi for this amazing resource of CSS Grid ‘stuff’. I pulled from it to flesh out this year-end wrap up to our CSS Grid section. https://github.com/valentinogagliardi/awesome-css-grid. Be sure to watch this repo so you don’t miss a single update.
Back to that video reference from early on. I mentioned that I had some difficulty finding a good way to download a YouTube video for offline viewing. I wanted to show that CSS Grid video that I referenced as part of the December meeting. I didn’t want to 1) risk trying to watch a video live over our PACS internet connection in Giant, and 2) eat up too much download bandwidth early in the day. I ended up showing the splash screen for the video as a stop gap.
As expected, two of our SIG attendees offered recommendations for tried and true options to permit offline viewing of YouTube videos. Our president, Don Arrowsmith, highly recommends YouTube Downloader HD. A new attendee at the WebDesign SIG, Don Brown, the self proclaimed ‘Old Guy with Grey Hair’, who was a guest presenter at the Social Media SIG earlier that day, offers this tutorial for downloading video for offline viewing.
That’s about it for now. Here’s to a happy and safe 2018 for everyone.
