Tag Archives: Bulma

Playing with Vue Router

Back in July, we looked at how Vue CLI and webpack work and I figured that it was time to look at Vue Router, as a follow-up.  Vue Router is going to be pretty necessary for the state parks app, moving forward.

Like I did last time, I used VueCLI and Bulma.  I also put the code on Github and used Render to host the end-result at vue-router-demo.jws.app.  If you look at the repo, you will find three .vue files in the src/components folder: About.vue, Pizza.vue, and PizzaListing.vue.  If you look at src/main.js, you can see that the routes are set up like …

 

import About from './components/About.vue';
import Pizza from './components/Pizza.vue';
import PizzaListing from './components/PizzaListing.vue';


const routes = [
{ path: '/', component: About },
{ path: '/pizza/:id', component: Pizza },
{ path: '/pizzalisting', component: PizzaListing }
]

 

This makes the About file the file that loads when you go to the root of the site, the Pizza file what loads when you go to /pizza/[something], and PizzaListing loads when you go /pizzalisting.

If you have any questions, comments, etc, feel free to drop a comment below.

 

[ Cover photo by Peter Herrmann on Unsplash ]

Fixing JWS.app: The “Superfeed” (Part 1)

One of the goals for JWS.app was for it to pull in activity from a bunch of sources and update itself.  That is the reason why I created the “superfeed”.  Let’s start by looking at its current state.

See the Pen
JWS.app – Superfeed (Before)
by Joe Steinbring (@steinbring)
on CodePen.

Getting the content from the photo blog, the blog, dev, github, and the two tumblr 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.

See the Pen
JWS.app – Superfeed (After – Option 1)
by Joe Steinbring (@steinbring)
on CodePen.

The above example uses Bulma‘s Media Objects.  This look is similar to what you see with things like twitter.  It feels like a lot of waste, so let’s try another option.

See the Pen
JWS.app – Superfeed (After – Option 2)
by Joe Steinbring (@steinbring)
on CodePen.

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.

 

[ Cover photo by AbsolutVision on Unsplash ]

Fixing JWS.app: Turning our attention to the footer

I have never been fond of the footer on JWS.app but I’ve been unsure what to use, there.

After addressing the elements at the top of the page, it makes sense to turn our attention to the very bottom of the page.  Considering how much we have leveraged Bulma so far, it also makes sense to do it the Bulma way.  Let’s see how that would look.

See the Pen
JWS.app – The Footer
by Joe Steinbring (@steinbring)
on CodePen.

It works but let’s try it another way.

See the Pen
JWS.app – The Footer (Option 2)
by Joe Steinbring (@steinbring)
on CodePen.

I’m not sure if I prefer option 1, option 2, or future option 3 but I am guessing that there might be a part 2 to this post.

 

[ Cover photo by Cristian Newman on Unsplash ]

Fixing JWS.app: Styling the content on the page

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.

See the Pen
JWS.app – Adding Section Boxes
by Joe Steinbring (@steinbring)
on CodePen.

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.

 

[ Cover photo by Kelli McClintock on Unsplash ]

Fixing JWS.app: What if we merged the nav bar with the hero image?

Previously, we looked at using Bulma to improve the nav bar and we looked at ways we could improve the hero image.  I figured that this week, we would combine the two.

See the Pen
JWS.app – Hero with Nav
by Joe Steinbring (@steinbring)
on CodePen.

I kind of like this look but the nav bar might not have enough contrast.  Let’s try one more variant.

See the Pen
JWS.app – Hero with Nav (Option 2)
by Joe Steinbring (@steinbring)
on CodePen.

 

What do you think?  Have any questions, comment, etc?  Feel free to drop a comment, below.

 

[ Cover photo by TK Hammonds on Unsplash ]

Fixing JWS.app: The Nav Bar (Part 2)

Last week, we looked at two ways to fix the nav on JWS.app.  For the first option, we simply added an additional header that displays when the screen width gets narrow enough.  For the second option, we introduced a hamburger menu.  This week, let’s look at two new options.

The first of this week’s options uses Bulma.  We have looked at Bulma‘s responsive navigation bar once before.  Let’s see how it works to implement our JWS.app navbar with it.

See the Pen
JWS.app – Header (After – Option 3)
by Joe Steinbring (@steinbring)
on CodePen.

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.

See the Pen
JWS.app – Header (After – Option 4)
by Joe Steinbring (@steinbring)
on CodePen.

The biggest difference with the above example is that it not only requires the Bootstrap CSS library but it also requires the Bootstrap javascript library and that library requires jQuery.  Without the javascript libraries, the hamburger menu doesn’t work.

Have a question, comment, suggestion, etc?  Feel free to drop a comment, below.

 

[ Cover photo by Joseph Barrientos on Unsplash ]

Bulma 101: Grid Layout

Three years ago, I posted something on Bulma while trying to figure out how navigation works with it.  After my post on CSS Grid, I figured that I would show how to do a grid-based layout with Bulma.

See the Pen
Bulma 101: Layout
by Joe Steinbring (@steinbring)
on CodePen.

By default, the column spacing is set to auto.  You can use classes like is-full, is-three-quarters, is-two-thirds, is-three-fifths, or is-half to tweak the column widths, though.

So, are you better off using CSS Grid or CSS Grid via Bulma?  There are pluses and minuses with both.  You will notice that the pen has no CSS or JavaScript in it.  You will also notice that there is more HTML in it.  I think that there is more room for problems with the straight CSS Grid route.  If the spacing is defined by a global library and used throughout the project, you know that everything will be uniform.

Have any questions, comments, etc?  Leave them in the comments, below.