Getting the content from the photo blog, the blog, dev, github, and the twotumblr blogs and interleaving the content was tricky enough. When it came to displaying the updates, I just used an unordered list in version 1. I couldn’t immediately think of an alternative. In previous weeks, we have leveraged Bulma. I figured that we could use it again.
This might be my favorite option, so far. This example uses Bulma‘s Cards. My goals were for long-form posts (like this) to be more prominent and to do something mildly similar to Microsoft’s Metro design language.
I am not completely sure if the Bulma Card solution is best option or not but I do think that there is a next step to this. Previously, we looked at the Notifications API and that got me thinking about incorporating push notifications. I might need to add some sort of Modal (to have something to link to), though.
Previously, we have looked at the navigation bar, the hero image, and the combination of the two. I figured that next natural step is to look at how to style the content on the page. I want to add some sort of visually pleasing container and Bulma‘s box class seems to be a good option.
You will notice that I also added an “upwardbump” class to create a slight overlap of the content over the hero image. It is a visual element that is present on the current style of this blog that I kind of liked.
The above example has no custom CSS in it. It simply uses Bulma and it’s CSS classes for styling. This example is pretty close to the original look and feel but it implements a hamburger menu when the screen width calls for it. It is worth noticing that I did add an “onclick” in order to get the hamburger menu to work.
For second option, let’s look at how to implement the navigation using Bootstrap.
Have a question, comment, suggestion, etc? Feel free to drop a comment, below.
I haven’t had a lot at jws.app since registering the domain so, I spent a bit of time over the past few weekends and finally built a website there. The idea was that it pulls recent activity from travels.jws.app, photos.jws.app, blog.jws.app, github, and DEV and auto-updates the website based upon those feeds. I wanted to pull recent activity from a few other feeds but they have stumped me, so far.
The page has four sections: About, Updates, Photos, and Travel. About and Travel are hardcoded (so far). Updates and Photos are driven by the API calls.
As I pick at the site a little more, I’ll post some of what I am doing here. Want to see what the code looks like? Check out the public github repo for the site.
Joe Steinbring's thoughts on coding, travel, and life