[Resolved] what tools did GP use to make their columns?

Home Forums Support what tools did GP use to make their columns?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1096162
    Josh

    I really like the columns on this page: https://generatepress.com/site-library/
    that have a rollover and a bit of movement. Is this part of the GP library or is this custom?

    https://generatepress.com/premium/ – I’d be curious about these ones too. I love the movement and simplicity.

    #1096199
    Leo
    Staff
    Customer Support

    Hi there,

    That’s using Flexbox to create columns:
    https://www.screencast.com/t/WzjM4Rkl

    You can see all the code associated with it by using the browser inspector tool.

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

    #1102416
    Josh

    So is it part of generate press or that code actually in the page as in the screenshot? It’s not a builder of some sort. Correct?

    #1102465
    David
    Staff
    Customer Support

    Hi there,

    No Pagebuilder just HTML and Flexbox which is a CSS Property that is supported by all modern browsers.
    If you’re happy writing some HTML then this will get you started:

    <div class="flex-grid">
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
    </div>

    And this CSS:

    /* Add flex to container */
    .flex-grid {
        display: flex;
        flex-wrap: wrap;
    }
    /* Add gutters */
    .flex-item {
        padding: 10px;
        box-sizing: border-box;
    }
    .flex-inner {
        /* Add styles to grid item container */
    }
    
    /*  Mobile width */
    .flex-item {
        flex: 1 0 100%;
    }
    /* Tablet Width */
    @media (max-width: 1024px) and (min-width: 768px) {
        .flex-item {
            flex: 1 0 50%;
        }
    }
    /* Desktop Width */
    @media (min-width: 1025px) {
        .flex-item {
            flex: 1 0 33%;
        }
    }
    #1102470
    Josh

    Perfect. This is what I was doing. Just wanted to make sure I wasn’t missing anything.

    #1102475
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.