Example code of CSS responsive layout system

Responsive layout systems are already very common in today's popular CSS frameworks. It mainly consists of a container class and a grid system with a specified number of rows and columns, forming the skeleton of a framework.

This is reflected in the popular front-end frameworks Bootstrap and Bulma CSS. Like Bootstrap's .container, .row, .col; and Bulma CSS's .container, columns, column all represent this type of layout system. Although the names are different, the principles are the same.

With the popularity of Flex layout, almost all modern grid system implementations choose to use this flexible layout method.

Now let’s take a look at how to implement a minimal CSS responsive layout system.

Let’s start with the container.

In order to ensure the simplicity of the implementation code, this article will be written in SCSS. If you are not familiar with SCSS, don’t worry, the knowledge points used will be introduced in the text.

container

Containers are mainly used to wrap the main content of a web page. The common effect is to display the content in the center of the screen.

We use .container to specify the container.

First, the container is horizontally centered, which is relatively easy to style:

.container {
    margin-left: auto;
    margin-right: auto;
}

The so-called responsive container determines the max-width value used by the container based on different breakpoints, that is, the current viewport width.

Here we refer to the definition of breakpoints in Bootstrap and divide them into the following categories according to the viewport width:

[0, 576px)
[576px, 768px)
[768px, 992px)
[992px, 1200px)
[1200px, +∞)

For breakpoint definition, declare a variable $breakpoints:

$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);

$breakpoints is called a "list", which is a data structure provided to us by SCSS. It consists of key: value pairs. The key in the above example indicates the starting point of the device's valid range.

The container has different max-width values ​​for different devices. So, here we declare another variable $container-max-widths to represent the container width:

$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);

Here, $container-max-widths is also a list, and the key here represents the maximum width of the container under a certain device. For example, on ultra-large screen devices, the maximum width of the container is 1140px, while on ordinary mobile phones, the maximum width of the container is not set and is the default value of none.

Now that we have an idea for implementation, we can start to implement it.

We can use the media query directive @media to give .container different max-width values ​​according to the range of viewport width.

@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}

7 lines of code and you’re done!

The above code is explained below.

We use the @each...in syntax to traverse the list, taking out the corresponding key and value each time to get the current $device and $breakpoint. Map-get is a method provided by SCSS to operate on lists: retrieve the value according to the key. For example, when the value of $device is xs, the corresponding value of map-get($container-max-widths, $device) is none; when the value of $device is sm, the corresponding value of map-get($container-max-widths, $device) is 540px, and so on.

The code contained in @media only screen and (min-width: $breakpoint) { ... } indicates the CSS style to be applied starting from the current device breakpoint. When we set two media queries for breakpoints at the same time in ascending order, the latter will override the style of the former. This is the core principle of achieving containers with different widths under different viewports.

Next, assign the obtained width value to the max-width property of the container.

So far, we have written a responsive container. Let's take a look at the code:

$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);
$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);
.container {
    margin-left: auto;
    margin-right: auto;
}
@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}

Click here to see the effect.

Next, let's introduce the 12-column grid layout.

12 Column Grid Layout

First use Flex layout to write a simplest equal-width layout.

.row {
    display: flex;
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
    }
}

That's right, this is all the code to implement a uniform width layout using Flex layout. If you ignore the blank lines in between, it only takes 7 lines of code.

The principle here is that we set the flex-basis of all flex items to 0, which means that these flex items have no width before growing or shrinking and are the same length. In this way, the final calculated main axis space will be evenly distributed to each Flex item, so that they have the same width.

The simple grid layout we have written so far has two limitations:

1. Non-equal width items cannot be laid out.
2. Line wrapping is not supported.

Line wrapping is easy to do. Just add flex-wrap: wrap to the Flex container. So how do we handle the layout of "non-equal width items"?

In order to achieve the layout of non-equal width items, our idea is: disable the stretching properties of Flex items and use percentage width to specify the width.

First, disable the flex feature of the Flex project. The properties used are as follows:

flex-shrink: 0;
flex-grow: 0;
flex-basis: 0;

The shortcut for writing these three properties equivalently is:

flex: none;

Then use the percentage width to specify the width.

We implement a grid layout with a maximum of 12 columns in a row. That is to say, a row is divided into 12 columns, and the width of each column is approximately 8.33% of the total width. We use .is-columns to specify the number of columns an item should occupy:

.is-1
.is-2
.is-3
.is-4
.is-5
.is-6
.is-7
.is-8
.is-9
.is-10
.is-11
.is-12

According to this rule, we can easily write the grid layout code:

$columns: 12;

.row {
    display: flex;
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
        
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
        }
    }
}

Here we use @for $var from <start> through <end> syntax of the @for directive, increasing from 1 to 12, and define a series of class names such as .is-*. The principle is to disable the elastic properties of the Flex item as we said and assign it a percentage width. How about it, it’s very simple, right?

Next we add support for line breaks ( .row.is-multiline ) and flex item offsets ( .is-offset-* ).

Let's take a look at the code:

$columns: 12;

.row {
    display: flex;
    
    &.is-multiline {
        flex-wrap: wrap;   
    }
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
        
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
            &.is-offset-#{$i} {
                margin-left: percentage($i / 12);
            }
        }
    }
}

.is-multiline is used with .row to achieve the effect of flex-wrap: wrap; item offset is done with margin-left
Property implementation.

At this point, our 12-column grid layout is completeヾ(◍°∇°◍)ﾉﾞ

Complete code

If we combine the above two parts of code, we can get a minimal responsive layout system~ O(∩_∩)O

$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);
$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);
.container {
    margin-left: auto;
    margin-right: auto;
}
@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}
$columns: 12;
.row {
    display: flex;
    &.is-multiline {
        flex-wrap: wrap;   
    }
    .col {
        flex-grow: 1;
        flex-basis: 0;
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
            &.is-offset-#{$i} {
                margin-left: percentage($i / 12);
            }
        }
    }
}

You can view the effect here.

Of course, you can add more rich functions at will, here we only provide a simplest code implementation.

Summarize

The above is the example code of the CSS responsive layout system introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!