Showing results for "design"

Tags
    Author
      Technology
        Rating
        Pricing
        Sort By
        Video
        Results To Show
        Most Recent
        Most Popular
        Highest Rated
        design
        Reset
        https://image.mux.com/EGNaRZyOqwsf00jok02rowfgD7aQQGikn3C3Bj21ETp5k/thumbnail.png?time=0

        lesson

        The Column Drop Design Pattern in FlexboxMastering CSS Layout

        The grid pattern is impossible using Flexbox, but the column drop is available and achieved using a flex-wrap, justify-center, and, flex-grow.

        https://image.mux.com/sZFaSKY1ZV4UgSfWHCyxyZ01bS01t6oYnXn2TfWxndzR4/thumbnail.png?time=0

        lesson

        The Center Design Pattern in FlexboxMastering CSS Layout

        The center pattern sets the same margin properties, but the children is implemented using flex properties instead of grid.

        https://image.mux.com/3W1WKOyqvdO4qTI101FrLakfkUPuXWzIRGYVMeI4101JM/thumbnail.png?time=0

        lesson

        The Cover Design Pattern in FlexboxMastering CSS Layout

        he cover pattern is almost identical to the grid implementation, but just uses flexbox properties.

        https://image.mux.com/BMkmAdTv5VBlK8dUyyMs5B00zJBxoYgfNXsM01KhKPlYk/thumbnail.png?time=0

        lesson

        The Responsive Split Design Pattern in FlexboxMastering CSS Layout

        The split can be made even more responsive by adding the minItemWidth and switchAt.

        https://image.mux.com/5pu8zwez02IZtDdt3p01Rr6MTT2UybDlh5LUuFIEARMeY/thumbnail.png?time=0

        lesson

        The Split Design Pattern in FlexboxMastering CSS Layout

        The Split pattern using flex box can seem complicated, but is a very powerful when all the fractions are setup.

        https://image.mux.com/01XMdqa3rHHNQqyhapIaNXpyR013j14rWe9alPA4t01VSE/thumbnail.png?time=0

        lesson

        The Inline-Cluster Design Pattern in FlexboxMastering CSS Layout

        The inline-cluster pattern is accomplished using the wrap and align-items center.

        https://image.mux.com/WBQ0085sHolyamZMkhwV9NRgnUiM9O01oAVY00OpHH6aps/thumbnail.png?time=0

        lesson

        The Stack Design Pattern in FlexboxMastering CSS Layout

        In this lesson, we will learn how to implement the stack pattern using Flexbox.

        https://image.mux.com/GNGPBtYSFeaFBRPYzi33Z16KYIPxCgt02JE6I98qGRJY/thumbnail.png?time=0

        lesson

        The Grid Design Pattern in CSS GridMastering CSS Layout

        The Grid pattern combines a few specific CSS Grid Properties that allow for an auto grid layout optimized to the inline size available to the component.

        https://image.mux.com/okcOgxtk3FZjRWW6I6jGoFH5UraP1k00FPt7gRkDMaiU/thumbnail.png?time=0

        lesson

        The Center Design Pattern in CSS GridMastering CSS Layout

        Half of the centering is done through your typical auto margin technique. The children are centering through a few extra CSS Grid properties.

        https://image.mux.com/rvC00crLffsudSMuyy6gBjjkNSneR8hCWb4ntRI5HER00/thumbnail.png?time=0

        lesson

        The Cover Design Pattern in CSS GridMastering CSS Layout

        The cover works like the stack but vertically centers a specific layout part.

        https://image.mux.com/nyfVNQ02GnirXUDnI6i200v71NGzAsABeIzDFkfSKRc1s/thumbnail.png?time=0

        lesson

        The Split Design Pattern in CSS GridMastering CSS Layout

        CSS Grid allows you to set two columns using fr units to set ratios.