This week I completed some major fix-up on my grid. Remember when I thought that it was almost fixed? Well I was wrong. In fact I ended up recalculating the whole thing and basing it on a single column being 65px or 6.5% in width. Happily it is now working exactly as I need it to (Mozilla Developer Network saved the day again<fn>https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Creating_a_fluid_grid</fn> – I am going to up my donation this year).
I am feeling griddy
Now that my grid is in situ, I am able to base layout elements on it. I do think that in most cases I will need to make unique versions of the columns and tweak the row layout, but keeping the grid architecture in place and temporarily adding the rows/columns to the html has been really helpful for planning out the sections (as shown in the screenshot below). I used my grid to start planning the layout of the content on the Flickity carousel cells – as it turns out this took quite a bit of work (more on that in my next post). I also had my first go at creating an SVG, albeit a very simple one as a placeholder for the first cell in the carousel. The SVG shows the outline of a head and I made it in Adobe Illustrator, this will need to be replaced by more of a photographic image for needs of the project.
Adding in an About section as the timeline really jumps right into talking about the fictional Patient. I will need to update the task list to reflect this, but it remains within the bounds of the tasks as task scenario 1 included, “Read introductory information”, this needs to become task scenario 2 and the others need to be bumped up. I also need to revise things where they are areas as opposed to pages, it is bit too specific at the moment.
Testing in Internet Explorer 9
I was astounded to find that pretty much everything on the site is working as one would expect in Internet Explorer 9. This is fantastic and vindicates some of the script selections that I have made in terms of browser support. I was very concerned that the z-index settings would not be respected, but thus far it is looking good. Safari is still a problem though…
Toying with the notion of animation
Basques, K. (2016, December 8). How to use the Timeline tool. Retrieved December 8, 2016, from https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool
Common CSS questions. (2015, October 26). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions
daneden. (2016, September 27). Daneden/animate.Css. Retrieved December 8, 2016, from https://github.com/daneden/animate.css
Grids. (2016, October 7). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Creating_a_fluid_grid
Lewis, P. (2016, December 8). Rendering performance. Retrieved December 8, 2016, from https://developers.google.com/web/fundamentals/performance/rendering/
SVG and CSS. (2016, January 2). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS
Z-index. (2016, December 2). Retrieved December 8, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/z-index