Project URL: https://glitch.com/~stapui
Suppose you had some code to generate a clickable button.
button('b', () => {
alert('b');
})
(don’t click this, it’s just a screenshot)
Add a wrapper called place() to remember where you call this b() function.
function b() {
return place(button('b', () => {
alert('b');
}));
}
Pass those to a function called layout(). Then place() and layout() will lay them out for you.
layout(
b(), b(),
)
What if you want them above and below? Well in the CSS box model, buttons are inline, and for above and below what you would really want is– I’m kidding. You just do this.
layout(
b(),
b(),
)
Wait but that’s still the same function call, the whitespace doesn’t–
Or what if left and right was the way to go, you just needed some more space in between? So at that point the inline layout is kind of… actually there’s this thing called CSS grid, which– I’m kidding again, you just do this.
layout(
b(), b(),
)
You can put them however you want.
layout(
b(),
b(), b(),
b(),
)
Hello police, I’m on the Glitch forum and there’s this guy that’s–
Wrap it in a function to make reusable sublayouts.
function buttons() {
function b() {
return place(button('b', () => {
alert('b');
}));
}
return (0,
layout(
b(),
b(), b(),
b(),
)
);
}
function megaButtons() {
function b() {
return place(buttons());
}
return (0,
layout(
b( ),
b( ), b( ),
b( ),
)
);
}
megaButtons()
No no no no no no no no
Now you can lay out your UIs intuitively.
layout(
t('Filter prefix:'), p(' '),
l(' '), t('Name:'), n(' '),
t('Surname:'), s(' '),
c('Create'), u('Update'), d('Delete'),
)
