How to quickly prototype apps with a CSS grid and CSS variables

    Both the CSS grid and CSS variables are powerful tools for frontend developers. The first allows you to significantly simplify the creation of web site layouts, while the second gives you all the power of variable style sheets.

    image

    In this article, I will show you how to use both tools to quickly prototype application design.

    Skillbox recommends: an online course for UX-analytics We
    remind: for all Habr readers - 10 000 discount when writing to any Skillbox course using the promo code “Habr”.

    Customize mesh container


    Our applications will work with CSS-grid, a module that allows you to quickly create layouts and manage them. This is useful, in particular, if you are working with the grid-template-areas property. (I'll show you how to use it below).

    Let's evaluate the appearance of our application - this is a chat:

    image

    If we open the developer tools in Chrome, then we can see what this grid is. As you can see, there are six columns and six rows.

    image

    Here is the code for creating such a grid:

    .app {
      display:                grid;
      grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;
    }

    First we create a container for it. Then we say that we would like to have six columns at the output, and each of them should be 1fr wide. This means part of the free space. Thus, we divide the free space of the screen into six equal-width parts.

    But with strings different. The height of each of the first five lines is also 1 fr, but we limit the height of the last one to 60px instead of 1fr.

    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

    Now, when we have marked the grid, we proceed to the next part - the placement of elements.

    Mesh placement


    Each straight "heir" of the mesh container is a mesh element. In total, we have four elements, each of which is placed in a rectangle, as shown in the screenshot below.

    image

    In order for the elements to be placed exactly as shown above, we need to use the grid-template-areas property.

    .app {
      display:                grid;
      grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;
      grid-template-areas:
        "r m m m m m""r m m m m m""r m m m m m""r m m m m m""r m m m m m""n s s s s s";
    }

    Each of the lines of code represents one row of the table, and each character is a grid cell. Symbols have a semantic relationship to the grid elements that they represent (a list of rooms, a list of messages, a new room form, a message form).

    Now we need to use symbols with their grid-area values ​​to place our elements according to grid-template-areas. Here's how:

    .new-room-form {
      grid-area: n;
    }
    .rooms-list {
      grid-area: r;
    }
    .message-list {
      grid-area: m;
    }
    .send-message-form {
      grid-area: s;
    }

    Of course, these classes also apply to our grid elements in your HTML. However, I will not discuss this in detail, as you most likely know how to add classes to HTML tags.

    From this moment we start experimenting with the layout. We can change a lot by changing the values ​​of grid-template-areas.

    image

    As shown in the illustration above, I try to use four different layouts, changing the positions of the “List of Rooms” element and the new elements of the room shape. The only thing I am changing is the grid-template-areas property.

    Below are four of these options. Try to match each of them with the appropriate layout.

    grid-template-areas:
        "n m m m m m""r m m m m m""r m m m m m""r m m m m m""r m m m m m""r s s s s s";
    grid-template-areas:
        "r m m m m m""r m m m m m""r m m m m m""r m m m m m""r m m m m m""n s s s s s";
    grid-template-areas:
        "m m m m m r""m m m m m r""m m m m m r""m m m m m r""m m m m m r""s s s s s n";
    grid-template-areas:
        "m m m m m n""m m m m m r""m m m m m r""m m m m m r""m m m m m r""s s s s s r";

    Color change using CSS variables


    Well, now we will try to change the color of the application using CSS variables. If you have not worked with them until now, let's see what they are.

    image

    image

    The method shown in the bottom image makes the code somewhat easier to read, because, if you can put it that way, the variable name is more semantic than hexadecimal. In addition, the second method provides greater flexibility in the question of changing the code.

    Let's see what can be done with our application using different variable values.

    :root {
      --main-color:            #5ea3d0;
      --secondary-color:       white;
      --main-text-color:       #3e5869;
      --secondary-text-color:  #b0c7d6;
      --new-room-form:         #d9e1e8;
      --send-message-form:     #F5F5F5;
    }

    They are repeated 17 times in our layout. But we will not check all the locations, let's better see how the main color works as applied to the color of messages and the left sidebar.

    image

    That's how we beat it all up in the code.

    .rooms-list {
      background: var(--main-color);
    }
    .message-text {
      background: var(--main-color);
    }

    Variables are good because we can edit their declaration, and this will be enough to change the entire application. Example:

    :root {
      --main-color: red;
    }

    And here's the result:

    image

    We can simply change the variable declaration in: root, which will allow us to play with the appearance of the application.

    image

    Let's replace some colors in: root, using the palette above.

    :root {
      --main-color: #5ea3d0;
      --secondary-color: white;
      --main-text-color: #3e5869;
      --secondary-text-color: #b0c7d6;
      --new-room-form: #d9e1e8;
      --send-message-form: #F5F5F5;
    }

    The result is a completely different chat appearance:

    image

    Merge the grid and variables


    If we combine all this, we will be able to completely change the design of our chat. Let's do that.

    image

    image

    This is how the initial version looks compared to the final one. As you can see, I changed both the palette and the layout. The only difference between these two examples is the 11 lines of code I highlighted here.

    :root {
      --main-color:           #ff66ff;
      --secondary-color:      #fbd8fb;
      --main-text-color:      #3e5869;
      --secondary-text-color: #d8b2ff;
      --new-room-form:        #ffb2ff;
      --send-message-form:    #d8b2ff;x
    }
    .app {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
      grid-template-areas:
        "m m m m r r""m m m m r r""m m m m r r""m m m m r r""m m m m n n""f f f f f f";
    }

    Really cool?

    Skillbox recommends:


    Also popular now: