Dev Diary Ep11 - Responsive Navigation / Q&A

[dan (Dan C.)]

Hey Weavers,

This week we take a look at the Extended Navigation Element and how that can work with our responsive breakpoint system. We also look at a few other tidbits and answer some of your questions.

As always, have a watch and let us know what you think.

Dev Diary Ep11 - Responsive Navigation / Q&A

We love feedback!

Remember, we’re building Elements in the open so we can get feedback as we go. We want to make sure we’re building the product everybody here wants (including us). Share your ideas and feedback in the comments below.

I’ll be back next Tuesday as usual.

Thanks,
Dan & Team Realmac

[gfcreative (Eric Goodman)]

Pretty simple control over the different types of menus. I do see one inconvenience comparing this to other third party platforms most of us are using now. With theirs you have one navigation that automatically transforms from full width nav to the mobile nav. And then there’s full control over the styling and behavior of each…all within one stack. With Elements we would have to completely create two independent navs (mobile and desktop).
Also is there plans to add partials to this? So when we add the menu to other pages we can do editing once that affects all the menus across the site.

[Tov (tovergaauw@proton.me)]

Just wondering what specs my Mac will need to run Elements?

[joeace (Joseph Acevedo)]

I’m looking forward to see how sub pages are treated in the site navigation. Are there any limits to how many sub pages can be displayed in the navigation?

[LEZ (Les Hall)]

AFAIK you haven’t shown what the app’s Settings/Preferences are like. Will we be able to change the size of fonts? The colors of the UI etc.

When you were showing the gallery of misc. icons and interface elements was that in Elements or another app?

I understand your philosophy regarding deleting files on our servers – makes sense to me. However, is there any way to mark files that are orphaned or to put them in an orphaned folder?

It’s all looking great and y’all should be rightly proud of your progress and dedication to creating the killer app.

Best, Lez

[gthinx (James Pee)]

This is all still looking amazing and I can’t wait to get my grubby hands on this! Are there any plans to have a 404 solution built in or any seo schema? As a die hard weaver user for over 8 years, I sometimes wish these were a standard feature of rapid weaver

[upssjw (Steve W)]

Dan you missed answering my question from last week - (apart from @upssjw as I had already recorded the video, we’ll get you that one next week).

[upssjw (Steve W)]

was going to ask about entering tailwind code into Elements: just some of my practice code still learning, I have various formats of this, how would you enter this code into Elements ?

<div class="flex  items-center flex-col  lg:flex-row ">
     <div class="flex-1  w-56 text-center px-4 py-2  bg-orange-300">Responsive<div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-blue-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-red-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-purple-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-yellow-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     </div>

[dan (Dan C.)]

@gfcreative

Pretty simple control over the different types of menus. I do see one inconvenience comparing this to other third party platforms most of us are using now. With theirs you have one navigation that automatically transforms from full width nav to the mobile nav.

Yes, we initially did this, but felt it was too limiting. Our goal is to build a really flexible system. We know how important it is that EVERYONE wants to build sometime different, so we’re trying to build the tools that allow our users to do that.

Having said that, there’s nothing stopping us (or a third-party) from building a menu that does exactly what you want. We’re also open to changing things once users get the beta and give us feedback on the Elements.

@gfcreative

Also is there plans to add partials to this? So when we add the menu to other pages we can do editing once that affects all the menus across the site.

We have been working on something very special related to this, but we’re not quite ready to share it… keep an eye on our videos in April

[dan (Dan C.)]

@Tov

Just wondering what specs my Mac will need to run Elements?

It requires macOS 13 (Ventura) or newer and will run on both Intel and Apple Silicon based Macs.

[dan (Dan C.)]

@joeace

I’m looking forward to see how sub pages are treated in the site navigation. Are there any limits to how many sub pages can be displayed in the navigation?

Just like RapidWeaver Classic you can create as many subpages as required in the app, however, it’ll be down to each Element on how many levels it supports.

Right now the Compact and Extended Elements support two levels. @bon has been working on an Element called “Tree Navigation” this will be super flexible and support unlimited levels. It’s perfect for information dense sites with lots of pages — I’ll see if I can demo that one next week!

[dan (Dan C.)]

@LEZ

AFAIK you haven’t shown what the app’s Settings/Preferences are like. Will we be able to change the size of fonts? The colors of the UI etc.

You can choose between dark and light mode, and we use the system’s accent colour in the UI for Highlights, it’s pretty cool.

@LEZ

When you were showing the gallery of misc. icons and interface elements was that in Elements or another app?

Yes, I was designing those in an app called Sketch.

@LEZ

I understand your philosophy regarding deleting files on our servers – makes sense to me. However, is there any way to mark files that are orphaned or to put them in an orphaned folder?

That’s a good idea on how to handle it. I’ll add it for a future consideration (i.e. it won’t be in the beta).

@LEZ

It’s all looking great and y’all should be rightly proud of your progress and dedication to creating the killer app.

Awww, thank you

[dan (Dan C.)]

@gthinx

This is all still looking amazing and I can’t wait to get my grubby hands on this! Are there any plans to have a 404 solution built in or any seo schema?

Not right now, but we’ll give it some serious thought, especially the “SEO Schema” - what exactly did you have in mind?

[dan (Dan C.)]

@upssjw

Dan you missed answering my question from last week - (apart from @upssjw as I had already recorded the video, we’ll get you that one next week).

Doh, sorry, here we go…

@upssjw

nice and easy, thanks for the video, really liking the menu element, I previously asked (on Circle) if you could offset out of the top bar, eg your Realmac logo could be half in half out at the bottom, overlap

That’s very specific and not built-in. However, you could certainly do it with a custom/tailwind css class!

[dan (Dan C.)]

@upssjw

was going to ask about entering tailwind code into Elements: just some of my practice code still learning, I have various formats of this, how would you enter this code into Elements ?

<div class="flex  items-center flex-col  lg:flex-row ">
     <div class="flex-1  w-56 text-center px-4 py-2  bg-orange-300">Responsive<div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-blue-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-red-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-purple-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     <div class="flex-1 w-56 text-center px-4 py-2 bg-yellow-200">Responsive <div><br></div><div class="w-16 h-16 rounded-full mx-auto bg-gradient-to-r from-white animate-spin shadow-lg "></div><div><br></div></div>
     </div>

Ah, you’d use the HTML Element (not styled… yet). Here’s a very quick demo using your supplied HTML…

[gfcreative (Eric Goodman)]

Thank you Dan. As far as having to work with multiple menus I would have to physically do it to have a real opinion over whether it’s simpler or not than the way I’ve been doing it now. Looking forward to seeing more updates…and eventually diving in.

[upssjw (Steve W)]

Dan the colours are missing it shows all the colours when using tailwind, see here my practice
https://sjwjaw.co.uk

[LEZ (Les Hall)]

Thanks Dan. I gotta say though that me eyes ain’t so good as they woz! Hence the question about the text size. Will Elements respond to the macOS accessibility thang where you can select larger fonts for apps that play ball?

Cheers.

[gthinx (James Pee)]

Maybe just a little schema structure like type of organisation/services etc to assist search engines better differentiate each site’s offerings, maybe a couple of fields in the tab where the seo description is? There are a number of great ways I currently do this but I believe having this built in, is something that no other platform I’ve seen is offering. Keep up the great work!

[dan (Dan C.)]

@upssjw

Dan the colours are missing it shows all the colours when using tailwind, see here my practice
https://sjwjaw.co.uk

I needed to add the colours to the Theme Studio (see video below). However, it’s still missing the gradient on the dot, I’m guessing it’s just a value that’s not defined in our Tailwind setup - @bon will know exactly why that is (and I’m sure there’s a way of working around it).

While this is not the intended use case, it’s pretty cool this stuff works