Dev Diary Ep15 - Huge New Feature Revealed - Custom Elements

Elements Dev Diary
22

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!

23

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!

2 Likes
24

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

1 Like
25

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

2 Likes
26

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

27

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.

1 Like
28

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.

32

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

33

That is for sure

34

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

3 Likes
35

@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: [],
}
36

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

1 Like
37

cool lots of things to test

38

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.

1 Like
39

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;