Build a Bento Grid in Elements

Building a bento grid in Elements is super easy, here’s a quick video and project to show you how to get started.

:backhand_index_pointing_right: Open Sample Bento Box Project in Elements

Have a play and let me know if you have any questions;

Oh, and if you liked this and want to learn even more you should check out the proper grid tutorial @ben did earlier in the week :star_struck:

5 Likes

That’s a really great video and it shows perfectly how to get the most out of the Grid component.

I’d love to see a whole series of similar videos and small example projects, each focusing on the different Elements components (like Flexbox, Image Slider, Modal, Reveal, and so on). I think this would help a lot of people in the community when creating their websites – and it would follow in the footsteps of Adam’s (Elixir) very successful and helpful YouTube videos that he used to make.

Two quick things on the side :wink:
Loving the new component icons, and the “Empty Spacer” component is a nice touch!

3 Likes

Hi @dan

A very useful video. :grinning_face:

I liked the idea of your Empty Spacer custom component. I see in the code … :

<div id="{{id}}" class="pt-20">

</div>

… what is the relevance of the id=“{{id}}”, i.e. how would one use that. It would seem that the class of “pt-20” could be defined as a property to enable different values to be used.

Would it be useful to have this Empty Spacer as a standard component as it seems to be very helpful in visualising Bento grids?

way back in may I posted an example file of some “bento” grids I had a play with hope these help?

elementsapp://downloadDocument/1TIPvNvrox7q

That’s just the default when you create an HTML component, although I believe it needs updating to id="{{node.id}}" so it outputs a custom id. Useful for targeting the element.

Hmm, would it :thinking: we added spacing to most components to avoid this… but, would be easy enough to add if users wanted one… Actually, I suppose I could have put dividers in them, with no BG colour…

And that’s the flexibility of Elements, so many ways achieve the desired outcome :stuck_out_tongue:

i would like one

Okay, so you want a “Spacer” component with just some padding options?

1 Like

@logrunner
margin and padding option should be enough!?

Yes, I should think so. :slightly_smiling_face:

I think me and @ben talked about this before and decided it wasn’t needed, but the fact I created a custom component to do it, and you guys are requesting it perhaps means we should add one.

@ben won’t be happy, but I’ll see if I can twist his arm :stuck_out_tongue: Look out for it in the next build :crossed_fingers:

1 Like

sometimes, it’s those tiny little things that make us happy.

If you have some time can I kindly ask you to look at my file above and comment, I am playing but love to learn. THANKS in advance!

@PMUK Looking good, seems like you have got the hang of it :+1:

1 Like