Announcement

Collapse
No announcement yet.

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

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

  • 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?
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Hi Leslie,

    You will have to use the u-width utility classes, the grid classes only make equal width columns.
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • 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.

      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • 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)?
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


        • Hi Leslie,

          In those cases, I would recommend creating your own entity within the column and customize the code.
          Matt Zimmermann
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          Comment


          • 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.
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


            • Matt, does using "display: table-cell" work with this framework? (Sounds like that's the behavior type she is looking for.)
              Bruce Golub
              Phosphor Media - "Your Success is our Business"

              Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
              phosphormedia.com

              Comment


              • Hi Bruce,

                No reason it shouldn't work.
                Matt Zimmermann
                Director of UI/UX Standards and Theme Development
                / Miva, Inc.

                Comment


                • 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?

                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                  • 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.
                    Matt Zimmermann
                    Director of UI/UX Standards and Theme Development
                    / Miva, Inc.

                    Comment


                    • 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 :) )
                      Bruce Golub
                      Phosphor Media - "Your Success is our Business"

                      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                      phosphormedia.com

                      Comment

                      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