Dev Diary Ep15 - Huge New Feature Revealed - Custom Elements

[dan (Dan C.)]

@upssjw

Dan is it possible to target tailwind html to individual screen sizes, so say on mobile size html applies to that screen then md html applies only to that screen, just by selecting each screen at the top of the editor, then putting the putting the html in that screen, but not using the sd: or md: code etc, hopefully you understand that

Not easily, as it’s not really how you’re supposed to build sites. However, you could create 3 Custom Elements, one for each screen size you wanted to target, You then hide and show them at the corresponding break points!

[dan (Dan C.)]

@Heroic_Nonsense

As more and more power features are shown, I understand more and more of the choices you made. Tailwind seems to be an excellent base for RapidWeaver, and the way everything integrates is fantastic!

I’m absolutely sure Elements will greatly help both pro web designers and WYSIWYG users to stay ahead of the curve.

I can also understand why the hard break with legacy RapidWeaver (+Stacks) was needed to make this possible.

Thanks so much @Heroic_Nonsense, it’s great to finally show Elements coming together in public and for you guys to start catching on to our grand vision for the app.

Lots more good stuff to come!

[upssjw (Steve W)]

Dan thanks, understand, it was more for testing rather than completing all the code for a site, but good to know the program is flexible to allow for this, brilliant

[scottsteven]

This is the most interesting video of the first 15. I am sitting here late at night wondering what I can build.

[dan (Dan C.)]

Haha, glad you liked it, it sure feels like things are finally starting to come together

[scottsteven]

I have earmarked a site to rebuild that is a bit long in the tooth so will rebuild it and and its a prime candidate for custom elements. cant wait to get going.

[Lion (Gunther Schenk)]

Hi Dan, Really enjoying where RW Elements is going. The versatility is really great! Just wanted to know if you would be incorporating the ability to create forms in Elements? I think it quite a necessary feature needed in websites today (not just signup forms, but something similar to what Chilli Dog has for RW Classic.)

Thank for all the hard work from your side, cannot wait for the beta.

[Flash]

@Lion

something similar to what Chilli Dog has for RW Classic.

Hopefully @barchard will develop his tools for RW Elements. I know I will buy SEO-RX and FormsPlus for sure.

[Lion (Gunther Schenk)]

That is for sure

[barchard (Gregory Barchard)]

Yes, I will support Elements. cc// @Lion

[upssjw (Steve W)]

@dan another test please to check how I would enter this in Elements, works in tailwind play
html code and config. It is just a multi animation test, still learning this part of tailwind

html code

<div class="flex justify-center items-center h-screen bg-yellow-200">
   <div class=" animate-steve w-1/2">
    <div class=" animate-spin  w-16 h-16 rounded-lg bg-slate-700"></div>
</div>
</div>

config code

export default {
  theme: {
    extend: {
            keyframes: {
        steve: {
            '0%, 60%': {
                transform: 'rotate(-360deg)'
            },
            '30%': {
                transform: 'rotate(360deg)'
            },
        }
    },
    animation: {
        steve: 'steve 5s ease-in-out infinite',
    }
},
},

  plugins: [],
}

[dang]

@upssjw

@dan another test please to check how I would enter this in Elements

I think there’s a high probability you will be in the first wave of beta testers.

[upssjw (Steve W)]

cool lots of things to test

[dan (Dan C.)]

@upssjw

@dan another test please to check how I would enter this in Elements, works in tailwind play
html code and config. It is just a multi animation test, still learning this part of tailwind

You won’t have access to the Tailwind config in RW Elements, so can’t setup custom animations like this. However, animation is on our roadmap just not for the 1.0 release.

Oh, and you could still do this with standard css and custom classes in the meantime.

Hope that helps.

[upssjw (Steve W)]

Thanks, I think Tailwind outputs to css for animations, so if there is the option to add to css with the tailwind html probably will work, tailwind generates this css below for my config code, not that I have delved into css yet, but assume this is what is generated

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes steve {
  0%, 60% {
    transform: rotate(-360deg);
  }
  30% {
    transform: rotate(360deg);
  }
}
.animate-steve {
  animation: steve 5s ease-in-out infinite;