More fun with columns - 1/3 and 2/3

[lesliekirk]

I understand how the u-grids-3 (with its different iterations) will create 3 equal columns with its confines. How do I create a 1/3 column followed by a 2/3rds column?

[Matt Zimmermann]

Hi Leslie,

You will have to use the u-width utility classes, the grid classes only make equal width columns.

[lesliekirk]

Hi Leslie,

You will have to use the u-width utility classes, the grid classes only make equal width columns.

Thanks, I was just going to come back and answer my own question with that I did. I removed the u-grids-1 u-grids-3--m from the section and added u-width-12 u-width-4--m to the figure. I'm working on finding the best "breakpoints" for the various screen sizes.

[lesliekirk]

Matt - is it possible to make the column the size of the image without making it a fixed width? Or should I just make my own custom wide (with the flex-basis calc)?

[Matt Zimmermann]

Hi Leslie,

In those cases, I would recommend creating your own entity within the column and customize the code.

[lesliekirk]

Hi Leslie,

In those cases, I would recommend creating your own entity within the column and customize the code.

It's kind of cool to be able to do that.

[Bruce - PhosphorMedia]

Matt, does using "display: table-cell" work with this framework? (Sounds like that's the behavior type she is looking for.)

[Matt Zimmermann]

Hi Bruce,

No reason it shouldn't work.

[lesliekirk]

Matt, does using "display: table-cell" work with this framework? (Sounds like that's the behavior type she is looking for.)

Any examples of how best to use this? I found it super easy to create my own flex-basis calc (which allowed me to fine-tune the width). But it's always good to have more than one option.

For posterity sake, Matt isn't the goal to standardize coding methods? What will be the approved method for something like this?

[Matt Zimmermann]

Hi Leslie,

Generally, the recommendation is to follow the BEM structure mentioned in the documentation and use the "t-" prefix for your styles so you, and any other developer you have work on the site, know that this is something theme specific.

[Bruce - PhosphorMedia]

Any examples of how best to use this? I found it super easy to create my own flex-basis calc (which allowed me to fine-tune the width). But it's always good to have more than one option.

For posterity sake, Matt isn't the goal to standardize coding methods? What will be the approved method for something like this?

You'd just apply it to the container holding the image, or the top level container that is defining the width. (Hard to be more specific.)

"display: table-cell" just makes the container behave like an 'old style' <td></td> meaning it infers more from what's INSIDE it than what IT (the container) inside.

(Yea, you might need to read that several times :) )