How to create a price list [Video]

luciandesign · May 15, 2021, 2:18pm

Hi! I just published my first Sparkle tutorial …
In this tutorial we are going to take a look on how to create a price list in Sparkle using just one text element. This is a bit advanced because it requires a few lines of custom CSS.
I’ve added the custom CSS link in the video description.

Part 1

Part 2

macmancape · May 15, 2021, 8:09pm

This is great! Thanks so much!
Very timely for me because I have to produce a new restaurant menu this week.

Might you be able to paste your css code into this blog post, please?
I could probably copy it out of the video, but ….

Thanks so much!
Dave

luciandesign · May 16, 2021, 5:15am

Hi @macmancape … Thanks!
Here is the CSS used.

Part 1

gist.github.com

https://gist.github.com/luciandinu/c4362dbecc382a50b57ee585154e1ff9

price_list_part1.html

<style>
    #price_menu p {
        display: flex;
        justify-content: space-between;
    }
</style>

Part 2

gist.github.com

https://gist.github.com/luciandinu/aa99103bee14114c75715e3fa110f834

price_list_part2.html

<style>
    #price_menu p {
        display: flex;
        justify-content: space-between;
    }
    #price_menu p span:last-child {
        white-space: nowrap;
    }

    #price_menu_dots p {

This file has been truncated. show original

Mr_Fozzie · May 16, 2021, 8:54am

Hi.

Nice work. Thank you for sharing.
I’m not good in writing code, but have you considered to use CSS GRID?

Blockquote
… I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.

Maybe Mr Duncan can tell us more about this method to design a table (without using “table”)

Mr. F.

luciandesign · May 16, 2021, 10:31am

Hi! Thanks!
Depends on what you want to achieve, CSS grids are great for “grids” (or to maybe create/simulate a table) … in my example I’ve used CSS flexbox because that’s what I need it.

The idea was to enhance the output Sparkle generates without braking the layout, but rely on the powerful visual experience of the text element that Sparkle provides.

I’ll try to see if there is a way to “create” a table from the text element, but I don’t want to go completely overboard and create completely new elements from code because this is outside Sparkle area/scope.

geneprofi · May 20, 2021, 10:43am

Thanks a lot @luciandesign I did exactly your tutorial, but I did not get those dots. Maybe I did something wrong. I guess I have to retry it. Do you have any suggestions what I might have done wrong? Thanks in advance

luciandesign · May 20, 2021, 3:33pm

Hi @geneprofi I’ve attached my Sparkle file for this tutorial (I know that is was a bit complex) … Let me know if it works.

https://www.dropbox.com/s/5txl8opy0l5moda/PriceListDesignCSS.sparkle?dl=1

geneprofi · May 24, 2021, 9:21am

Thanks a lot @luciandesign in fact I did it exacly like you did, and at the end I checked it once again with your script, but mine is without the orange dots… I comes like this

luciandesign · May 24, 2021, 10:02am

Hi @geneprofi OMG … you are right the output Sparkle generates is a bit different (the first SPAN tag is missing) … this is why is not working.
You can force Sparkle to create a SPAN tags inside the P tag by making the space between the Title and the Price tag with the “Menu body” text style.

Here is your updated Sparkle file: https://www.dropbox.com/s/6f7vgqw14p02b8x/Preisliste-Restaurants.sparkle?dl=1

I think in the end I will remove this tutorial because the output is not consistent and it will create more confusion. You can write to me in private.

geneprofi · May 24, 2021, 10:30am

Thanks a lot Lucian, thats really great, in fact I re-did it more than once. btw. your other onepager is really a wonderful tool. Thanks once again. Eugene