Adjusting web layouts (CSS)(1)

Summary

CSS (Cascading Style Sheets) is a language for configuring the appearance and layout of HTML, XML, and other documents. CSS enables the centralized management of styles and layouts for websites and applications. To improve the efficiency of CSS development, CSS frameworks such as Bootstrap, Foundation, Materialize, and Bulma, as well as preprocessors such as Sass, Less, and Stylus, are provided as tools.

Adjusting web layouts (CSS)(1)

This section describes how to adjust the layout of the page created by building the Elasticsearch UI. First of all, the following simple examples can be used for reference.

For beginners! 4 examples of layouts that can be done with CSS | UX MILK

Layout summary and sample code – Memorandum

In these examples, I used a two-column, left sidebar layout for the reactivesearch UI.

The code would be as follows

body {
width:980px;
margin:0 auto;
}
.A {
height:150px;
background-color:#009b9f;
}
.B {
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:left;
margin-top:10px;
}
.C {
margin-left:260px;
width:720px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
.D {
margin-top:10px;
width:980px;
height:100px;
background-color:#009b9f;
}

After that, you can wrap each component on React (reactivesearch) side with the corresponding class (A, B, C, D in the above code).

<div className=”A”> Component</div>.

Some reference books on CSS are “CSS Textbook for Web Designers,” “HTML5/CSS3 Modern Coding Front-End Engineers Teach You How to Create 3 Full-Scale Layouts: Standard, Grid, and Single Page Layouts,” and “Less Web Development Essentials” and so on. I will introduce these in the next article.