How to create a responsive blog layout with CSS?

0
50

Our world is becoming more modernized every day, especially now during the pandemic. Each of us uses the Internet and visits various sites and blogs. Now in such a difficult time for all of us, we are forced to communicate and work remotely. Every second person spends their time online. We buy clothes, order food, furniture, books, and communicate with others. So, the first thing that attracts our attention is the design of the site. I think you will agree with my opinion that if a site or blog has a good design it is much more pleasant to read it. 

I guess that a lot of people are already interested in how to create a website, design, and layout.

Now I will tell you about CSS, the responsive type of the layout, how to make a responsive blog with help of CSS, and the advantages and disadvantages of responsive layout.

What is CSS?

CSS (Cascading Style Sheets) – CSS is a set of formatting options that are applied to elements in a document to change their appearance.CSS is used to define the styles of your documents, including design, layout, and layout variations for different devices and screen sizes. You can place your CSS styles inside the <HEAD> tag of your inline stylesheet document, or you can attach a separate CSS file that defines your styles externally. To bind an external style sheet to a document, simply add the style sheet link in the <HEAD> of the document. One of the interesting things is that there is such a kind of developer as a CSS developer. СSS developer is a developer who can take a design and easily convert it to CSS. 

How to create a responsive blog layout with CSS?

 

  • Choose a layout

 

You need to plan the architecture of the site, what and where will lead, and how the elements will be interconnected. You can do it in your head, on paper, and so on. Then you need to choose a type of layout. There are different types of layout: rubber, fixed, and responsive ( also you can find the meaning «adaptive»).  In my case, I choose a responsive type. I will tell you a little bit about other types. One of the easiest is rubber. A rubber (flexible) site layout is a layout that changes depending on the width of the working area of the browser window (tab). The need for such a layout arose when many users had 19 “, 21” and larger monitors. There was a time when some users had small monitors, while others had medium and large ones. The resolutions that were set on these monitors began to differ greatly, and it was already difficult to choose a specific width for the layout. The next type is a fixed type of layout. A fixed site layout is a layout that has a strictly defined width (in pixels). This type of design has been widely used for website development in the past when the Internet was just beginning to be introduced into our lives. At this time, computers with monitors with 14 “or 15” monitors “dominated”, in rare cases there were “monsters” with a diagonal of 17 “. These monitors did not differ much in horizontal resolution. Thus, choosing a certain width (we mostly stopped at 960px), it was possible to develop a site that would display optimally on all monitors of this time. A responsive type of layout is such a type, that can be adjusted to different devices. It can be adjusted especially for phones and tablets. The responsive layout changes of the design of the page depending on user behavior, platform, screen size, and device orientation is an integral part of modern web development. It allows you to significantly save money and not to draw a new design for each resolution, but to change the size and location of individual elements. The difference between rubber (rubber is more closer to responsive) and responsive types is that it not only reduces the distance between elements. What processes are still happening? The first process is hiding elements (for example, not very important ones), the left block with the text is hidden. The next process is the transformation of elements (see the menu, it has become a drop-down) The last process is lining up elements under each other, which were next to each other on the desktop. That is, on a desktop computer in one row, and a phone in 2, 3, 4 rows. The adaptive design is built on the use of a static breakpoint, and the page will no longer be adaptive after loading. This will properly load the layout according to the screen size of the device. Thus, you need to consider all the dimensions of the main display, and then design of the appropriate layout. It will download and display the developed screen layout when the user visits the web page. This can make your website user more friendly.

So, a blog is often divided into headers, menus, content, and a footer. A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name.

2)Create a header

Header is a logo or blog name.

For example , code to creating  a header:

 

.header {

   background color: # F1F1F1;

   text alignment: centered;

   filling: 20 pixels;

}

 

Create a navigation bar

The next  step is navigation bar. For example , code to creating  a navigation bar:

/* The navbar container */

.topnav {

  overflow: hidden;

  background-color: #333;

}

 

/* Navbar links */

.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}

 

/* Links – change color on hover */

.topnav a:hover {

  background-color: #ddd;

  color: black;

}

3)Creating a layout

The code for this is :

/* Create three equal columns that floats next to each other */

.column {

  float: left;

  width: 33.33%;

}

/* Clear floats after the columns */

.row:after {

  content: “”;

  display: table;

  clear: both;

}

/* Responsive layout – makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

  }

}

4)Design

After creating a project layout, you can proceed directly to creating a design layout. At this stage, you should start by defining the color scheme of the project. One way to define the main color in a project is to compose a mood board. It is important to note that in the selection of colors to the palette it is always necessary to choose at least two contrasting colors. One of the biggest challenges when working with responsive design is working with images. There are many ways to resize images, and most of them are fairly straightforward to implement. One solution is to use max-width in CSS:

img {max-width: 100%;}

The maximum width of an image is 100% of the width of the screen or browser window, so the smaller the width, the smaller the picture. Note that max-width is not supported in IE, so use width: 100%. The presented method is a good option for creating responsive images, but by changing only the size, we will leave the image weight the same, which will increase the loading time on mobile devices.

And then, I describe to you how you can change the layout of the elements, to add new color and shadow.

5)Customizable page layout structure

For significant page size changes, you may need to change the layout of the elements in general. This is conveniently done through a separate stylesheet or, more efficiently, through a CSS media query. This shouldn’t be a problem as most styles will remain the same and only a few will change. For example, you have the main stylesheet that defines #wrapper, #content, #sidebar, #nav along with colors, backgrounds, and fonts. If your main styles make the layout too narrow, short, wide, or tall, you can define that and include new styles.

6)Text color

If you don’t like the standard text color, you can always change it using the color property, specifying the color you want as a value, for example, color: green.

7)Adding shadow

To add shadow to your text, use the CSS text-shadow property, which can takes up to four parameters:

1)shift the shadow to the right (for positive values) or left (for negative values) of the text

2)offset the shadow down (for positive values) or up (for negative values) from the text

3)blur the shadow, the larger the number, the more blurry the shadow will be, zero value means no blur at all (defines a clear and sharp shadow)

4)color for the shadow

Conclusion

I hope this article has helped you understand how to create a responsive blog with CSS. I think the information about CSS developers was also useful.

Creating a  responsive layout, especially for beginners,  is not an easy task, but I believe in you!