wireframe
wireframe copied to clipboard
agauniyal
Rewrite: Move to custom tag based framework
Originally I wrote an in-house js script which generates simple html <div> tags with supplementary css classes to style them properly. This approach is good for short wireframes but doesn't scale with the complexity of the design. I'm thinking of moving to proper js framework that supports custom tags like -
<Header />
<HeroImage />
<Carousel />
<Footer />
which could be individually styled and glued together. This will help in reducing the cognitive load from writing index.html which will be lot easier with custom tags, plus open more possibilities for this project.
Open to suggestions.
Hey @agauniyal!
Firstly, shouldn't custom tags be named like <wireframe-header/> and so on?
Also, by using these tags would just changing the code in css from using classes to referring to the custom element name be good enough?
@ajayns you're right, the tags must be prefixed with some term, but I think it should be shorter than wireframe so it's easier to type as well.
Also, by using these tags would just changing the code in css from using classes to referring to the custom element name be good enough? I think yes. To expand onto this, I'm thinking a structure like custom components we see in frameworks like React.js or Vue.js (I'm personally biased towards vuejs ones) where they are composable and work fine with each other.
Wouldn't something like wf- be a good idea? Also what do have in mind when you say composable? I'm pretty new to Vue.js @agauniyal
Since this resource is not used in production, it's fine to use custom tags instead of CSS classes. We don't have to worry about SEO optimization since the output is not being used in production.
+1 for using wf-{element} format.
@agauniyal is this project and issue still active? I would like to help you.
Is it ok to adopt React for this? I think that using create-react-app (very barebones, build system included) as a base and rebuilding on top of it would work nicely.
What about the styles? Do you still want them to live as scss files or is it ok to have them always related to components?
Another detail. Is the balloon dependency supposed to be working? Running locally for me it didn't.
I think it's okay for them to live with components as long as they're only for those components. Balloon dependency works for me but I'm not on the latest develop commit.
@ericorruption imho I don't think you should bring the insane overhead of React in just for a wireframe.
