Boxes inside boxes (FW - Float Left)


grantsymon
 

I'm struggling to work out how I can create a similar layout to one I would make in FW, e.g. by inserting 4 HTML Items with a width of 25% into an HTML item and choosing Float Left for these items.  The end result being 4 boxes, side by side.

Specifically in Xway, I'd like to have an image box, a text box and another image box at the same level of the page.


jay farber
 

Me too.

On Jul 4, 2020, at 8:03 AM, grantsymon <xway@gsymon.com> wrote:

I'm struggling to work out how I can create a similar layout to one I would make in FW, e.g. by inserting 4 HTML Items with a width of 25% into an HTML item and choosing Float Left for these items. The end result being 4 boxes, side by side.

Specifically in Xway, I'd like to have an image box, a text box and another image box at the same level of the page.


Seth Rosenblum
 

Me 3!


Jeremy Hughes
 

Hi Grant,

Xway doesn't support float directly (yet), but you can do this using extended style properties: select an item that you wish to float, open the Extended Properties section in the Box Inspector, click on the plus icon, and type "float" for Name and "left" for value (both without quotes).

Using float as a general layout method (rather than for floated images etc.) can be problematic, and sometimes requires additional hacks (such as clearfix). An alternative (better) way of distributing items is to use flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Xway doesn't support flexbox directly (yet), but extended properties can be used once again: this is how the boxes near the bottom of our Xway page ("Built for HTML and CSS from the ground up") are laid out.

https://www.softpress.com/xway/

Jeremy


grantsymon
 

Thanks Jeremy.

That guide looks like it should do get me there.  😊


Steve
 

Hi Grant,

That css-tricks guide was invaluable when I rebuilt the Cotswold Engineering Supplies site a few years ago in Freeway. It meant I could build a responsive site easily (relatively speaking) as it required a lot of extra styles added via CSS: ID - Class FW-7 Action.
Once you get your head around it, it allows you great control of how your site looks, smoothing out some rough edges that sometimes happens when you have more than one box in a row with different heights.

I'm sure you'll find it useful.

I'll be delving into Xway soon to start preparations for the transfer of that site to the new kid on the block!

Cheers, Steve.


ThatKeith
 

On Mon, Jul 6, 2020 at 10:51 AM, Jeremy Hughes wrote:
Xway doesn't support flexbox directly (yet)
Yet? I'd like to pause for a moment to say just this: wow.
I am SO looking forward to this being supported directly! :-O

k


grantsymon
 

I'm just coming back to this and am a bit embarrassed that I've fallen at the first hurdle.  I'm simply trying to emulate the example on the Guide to Flexbox, which looks like this:

guide-to-flexbox

This is what I've tried, using extended properties for the container and the boxes inside it:

flexTest.zip

Can anyone tell me - where I should be entering the code/why it's not working? 


Jeremy Hughes
 

Hi Grant,

It’s much simpler than that!

For the container item, delete everything you have added in Extended Properties, then click on the plus button in Extended Properties and enter:

Name: display
Value: flex

Then create a second property:

Name: flex-flow
Value: row wrap

For the child items, delete everything you have added in Extended Properties. If you want to set a background colour or size, you can do this in the normal way (without using Extended Properties). You might want to use percentage widths (e.g. 25%) rather than pixel widths.

Jeremy

On 13 Jul 2020, at 15:17, grantsymon <xway@gsymon.com> wrote:

I'm just coming back to this and am a bit embarrassed that I've fallen at the first hurdle. I'm simply trying to emulate the example on the Guide to Flexbox, which looks like this:

guide-to-flexbox

This is what I've tried, using extended properties for the container and the boxes inside it:

flexTest.zip

Can anyone tell me - where I should be entering the code/why it's not working?


grantsymon
 

Thanks Jeremy!


It’s much simpler than that!
This is in fact, my favourite description of coding of any sort.

I'm guessing that this means that you've already built a fair bit of this process into XWay?

Just so that I understand... 

Name: flex-flow
Value: row wrap
For any Property, e.g. flex-flow, you can add their Values as space delimited items.  No need to describe them in any other way?


Jeremy Hughes
 


For any Property, e.g. flex-flow, you can add their Values as space delimited items.  No need to describe them in any other way?
That's right. Properties often have a single value, but you can add several values. The most important property here is Name: display, Value: flex.

What you originally added were complete CSS styles, including comments and various properties. You might type this if you were coding by hand, but you don't need it if you're using Xway.

Jeremy


grantsymon
 

Thanks again Jeremy.

You don't need it... if you're using Xway
Sounds like you've just about written Xway's slogan too.


grantsymon
 

Just for anyone else doing this ...

If you're mixing Graphics and Boxes (text) inside the same container (on the same page level) then they need to be inside their own Boxes, otherwise it seems that Paragraphs come in to play and none of the CSS works as desired.


jay farber
 

PLEASE:
I have read the thread and am trying to use the process but, I cant seem to find a listing of the proper formate. I have looked at: https://www.w3.org/TR/css-flexbox/#propdef-flex-basis. and https://css-tricks.com/snippets/css/a-guide-to-flexbox/.  But that seems to be hand coded from scratch.

Can anybody clue me in on a usage format for Xway please?
name= display
value= ?   : if I want to add 3 child to a parent container?
or if I want to add  5 child boxes to a parent container with a wrap?
or if I want to specify the sizes of the boxes in the container and then qty 3 boxes , set to wrap?

Thank you


ThatKeith
 

Hi Jay,

Here are some steps:

  1. Start by creating your parent box, then add the child boxes in that.
  2. Give the child boxes widths that would allow them to fit beside each other – they will start off full width. They won't actually BE beside each other but make sure there's room.
  3. Give each one of these its own background fill colour so you can easily see which is which.
  4. Then select the parent and go to the Extended Properties pane. (NOT the Extended Attributes pane!) Give it these two extended properties:

  • NAME: display VALUE: flex
  • NAME: flex-flow VALUE: row wrap
Preview and try resizing the browser window to see how things adjust. Basically, the parent container tells its children how to behave. ;) You don't need to use code or properties to create the children OR tell them directly how to behave. There are quite a few other options you can play with but this should get you started.

k


jay farber
 

Seriously… THANK YOU!
I really can't wait for Xway to be a full fledged app.

Trying to produce two replacement websites that I originally built in Freeway,
Is kinking my butt.

I need a decent WYSIWG product that offers the ability to setup custom attributes,
If they are needed, without having to research hand coding to complete the task.

I’m not that smart!

If I where, I would do all this in BBEdit.

Be safe.

Jay

On Aug 12, 2020, at 9:29 AM, ThatKeith via groups.io <Thatkeith=mac.com@groups.io> wrote:

Hi Jay,

Here are some steps:

• Start by creating your parent box, then add the child boxes in that.
• Give the child boxes widths that would allow them to fit beside each other – they will start off full width. They won't actually BE beside each other but make sure there's room.
• Give each one of these its own background fill colour so you can easily see which is which.
• Then select the parent and go to the Extended Properties pane. (NOT the Extended Attributes pane!) Give it these two extended properties:

• NAME: display VALUE: flex
• NAME: flex-flow VALUE: row wrap
Preview and try resizing the browser window to see how things adjust. Basically, the parent container tells its children how to behave. ;) You don't need to use code or properties to create the children OR tell them directly how to behave. There are quite a few other options you can play with but this should get you started.

k


jay farber
 

Thanks

I did as described and now have 3 boxes to apply Images.
But, I need to add text below each box. ( I see how to add text internally)

I noticed Code for doing vertical text layout on w3.org

But I still can't figure out how to translate those instructions
To the extended attributes fields in Xway.

Sorry to have to keep inquiring, but I’m in over my head so far.

There are seemingly only a few steps in building my fairly basic websites,
that leave me clueless so far.

Much appreciated.

Jay

On Aug 12, 2020, at 11:13 AM, jay farber via groups.io <jfmusic=me.com@groups.io> wrote:

Seriously… THANK YOU!
I really can't wait for Xway to be a full fledged app.

Trying to produce two replacement websites that I originally built in Freeway,
Is kinking my butt.

I need a decent WYSIWG product that offers the ability to setup custom attributes,
If they are needed, without having to research hand coding to complete the task.

I’m not that smart!

If I where, I would do all this in BBEdit.

Be safe.

Jay





On Aug 12, 2020, at 9:29 AM, ThatKeith via groups.io <Thatkeith=mac.com@groups.io> wrote:

Hi Jay,

Here are some steps:

• Start by creating your parent box, then add the child boxes in that.
• Give the child boxes widths that would allow them to fit beside each other – they will start off full width. They won't actually BE beside each other but make sure there's room.
• Give each one of these its own background fill colour so you can easily see which is which.
• Then select the parent and go to the Extended Properties pane. (NOT the Extended Attributes pane!) Give it these two extended properties:

• NAME: display VALUE: flex
• NAME: flex-flow VALUE: row wrap
Preview and try resizing the browser window to see how things adjust. Basically, the parent container tells its children how to behave. ;) You don't need to use code or properties to create the children OR tell them directly how to behave. There are quite a few other options you can play with but this should get you started.

k