Announcement

Collapse
No announcement yet.

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

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Bruce - PhosphorMedia
    replied
    Originally posted by lesliekirk View Post

    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 :) )

    Leave a comment:


  • Matt Zimmermann
    replied
    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.

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Bruce - PhosphorMedia View Post
    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?

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Bruce,

    No reason it shouldn't work.

    Leave a comment:


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

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    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.

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

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

    Leave a comment:


  • lesliekirk
    replied
    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)?

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    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.

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

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

    Leave a comment:


  • lesliekirk
    started a topic More fun with columns - 1/3 and 2/3

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

    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?
Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept