How do i create layout blocks?

Ignition
, ,
1

i want to block out a View by dropping, uh..., blocks (?) to set a layout that i can work with. coming from webdev, i'd just create some <div> elements, style and size them. i don't know how that is done here.

for example, i want to block out a header template with some images, text, and a menu hamburger. i've started with a coordinate container, which i can style (somewhat) but can't set exact dimensions on, despite being able to resize it. does that not factor if i drop it into another container? when i drop an image and configure that, i can set it's height, but i can't make it just scale to container height. whatever height i set it to, it will maintain that ratio when scaling the container; which either creates gaps as i go bigger or reveals an image clipping. to use a web replacement, i'd set the image height to 100% and that would just scale to the height of the aforementioned <div>. doesn't seem to do that here. would be nice to have a configurable grid-snap, btw.

at any rate, i could go on, but this is the general gist of what i'm trying to do as i try to wrap my head around how Ignition does things.

2

Containers are pretty much divs. Whether you can set a specific size depends on the parent container.
If you dropped in into a flex container, then you can set the basis (it's flex-basis). If you dropped it into another coordinate container, you should be able to set it height and width in the position section of its properties.
You can also add css properties to the style property, like width, height, max-width...
There's also the advanced style sheet, which you can enable with a right click on styles in the project browser. This is a css sheet, no more no less. If you need to give an id to something, you can add a domId in the meta section of a component properties. It's... an id. That you can select with #id in css.

1 Like
3

so in the case of my header template, i'd first create a flex container (which has no dimensions?) then put a coordinate container in that, which does have dimensions, which i can set. the images and text (labels?) go inside this nested coordinate container? and the parent flex manages the whole shebang? am i understanding that right? this is what i see in my head in HTML:

<header>      <-------------------------- presume the flex container?
  <div id='header-block'>     <---------------- coordinate container?
    <img class='client-logo' src='/path/to/image' />        --+
    <p>some descriptive text</p>                              |_ inside
    <nav id='hamburger-menu' />                               |  coordinate
    <img class='corporate-logo' src='/path/to/image' />     --+  container
  </div>
</header>
4

Flex containers are just divs with flexbox. Checkout their position properties and the align, justify...etc properties, you should recognize them. It really is just flexbox.

If you put a coordinate container in a flex container, you can give it dimensions with width and height, but would you do that with html and css ? probably not, it's not what flexbox is for.
BUT, if you put a flex container in a coordinate container, it will have size properties. The position properties and behavior of components depend on their PARENT container, even if they're themselves containers.

In your html snippet, header would be a container, #header-block as well, img is an image, p a label.
Then it's up to you to check what happens with different types of containers, as I can't tell what's in your head.

5

*click*... *click*... *click*... okay. things are starting to make more sense. thank you so very much. this is much more understandable now. just in time to end the day. i don't end on a cliff hanger. :smiley:

and i would totally, and often have, put containers in flexboxes... but i get what you're saying. especially in light of the parent-child relationship here. it makes sense, i just need to tinker some more and let it gel. as i'm banging around, this is beginning to smack of Dreamweaver but with fewer tools.

thanks again. i will be certain to have more questions tomorrow, but hopefully fewer as time goes on and more opportunity to contribute instead. :smiley:

6

I meant, you usually don't give fixed sizes to things in flexbox divs. Or, well, a fixed basis on one or two of them, but... well, just use flex containers like you'd use flex boxes. Because that's what they are.

7

i see what you're saying. gotcha. you let the flexbox manage the sizes based on the basis, wrap, order, &c of the contained items. vous avez raison!