dcsimg

Smart New CSS Features That Make Web Design Easier

By Madan Pariyar

WEBINAR:
On-Demand

Application Security Testing: An Integral Part of DevOps


Not long ago, web developers were stuck with limiting tools that didn't let them flush out their complete creative potential. Today, the game has changed thanks to all the new CSS features that are making web design more intuitive and simpler.

The major complaint from most customers was that the sites had a similar design style - there was a lack of variation. Two websites taken at random had a good chance of having a similar web layout. This took out the element of having something original and unique, which in turn made branding difficult. Most online business ideas suffer from this fate as they use similar design or layout for their website.

However, web developers were also stuck. Even if they had the talent, and even if they were creative, they just lacked the tools to achieve what they envisioned or what they were hired to do.

But with the new features introduced with CSS, the scenario has changed. Here is how the new CSS features are having an effect on the world of web design.

The Impact of CSS Grids

In web design, the de facto rule was using a 12-column grid layout. This was easy and effective, but it was limiting, nonetheless. However, with the advent of CSS Grid, manipulating grids has become ridiculously simple.

Making Grids Mobile-friendly

Having a responsive layout, or a mobile-friendly website is a must these days. Luckily with CSS, responsiveness can be achieved with a simple keyword.

Using the fr unit (flexible length) in CSS, you will be able to tell the browser to divide the space and allocate areas to columns based on the fr multiple.

Here is an example of how to create a responsive layout of four columns with equal length:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
}

Manipulating Grid Widths

The major reason for not bothering to tweak around with the base grid layout was because it required a lot of math and computation to figure out the right width of each column.

But now with CSS Grid, specifying grid width and the number of columns you want in your grid layout is as simple as data entry.

For example, if you want a 4-column grid, you simply have to write 100px 4 times within the grid-template-columns declaration and that's it. Here is how the code would look like:

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-column-gap: 20px;
}

And best of all, you also get the option to create grids with unequal width as well as height-based grids. For instance, to create a grid layout where the columns have unequal width, you can play with the fr multiple. Consider this piece of code:

.grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 2.25fr;
  grid-column-gap: 1em;
}

Here, the second column is 1.5 times the first and the third is 1.5 times the second. Hence they maintain a sense of proportion, all the while being unequal in length.

And then, through the use of viewport units, CSS Calc, and CSS Grid, developers now have the power to make grids based on the height of the website. As you know, this was something of an impossibility before these technologies.

Manipulating the Breakpoints for the Grids

Look here how some simple lines of code coupled with the media query can help include different breakpoints while changing the grid structure.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
}
@media (min-width: 30em) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Manipulating Grid Item Placement

There were also troubling calculations involved with positioning grid items, and hence it was many times avoided by developers. But even here, CSS Grid takes out the need to go through all the troubling math. You can specify where an item needs to be placed on the grid with a simple keyword.

For example, if you want to place an item on a specific column, you can use a similar code:

 .grid-item {
  grid-column: 3; /* Put on the third column */
}

And if you want the item to take up multiple columns, use a code similar to this:

.grid-item {
  /* Put in the 1st column, span 3 columns */
  grid-column: 1 / span 3;
}

Create Curves with CSS Shapes

Previously, most of the layouts followed a rectangular design style. Some rebels went on to experiments with triangles or circles. However, no developer dreaded to think about irregular shapes, let alone implement them. Yes, things were that hard back then!

But now, with CSS Shapes coupled with the new clip-path keyword, it is possible to create irregular shapes, and that too without much effort. This allows developers to create truly unique design styles that they can call their own.

It is worth considering that CSS Shapes aren't as intuitive as CSS Grid, however, it is still a viable means for integrating irregular shapes into your design. You can check out this read to understand how to work with CSS shapes.

CSS Writing Mode and Text Flow

You must know that not all the languages in the world are written from left to right as is the case with English. However, on the internet, we see words flowing from left to right. This is because the web is predominated by English users.

However, if we were able to make words flow from other directions, then it would make people from other places feel more at the place. For example, for the Chinese, the natural word flow is from top to bottom, and for the Arabic, their sentences go from right to left.

Tweaking the word flow on a site wasn't easily manageable before. However, with CSS' writing mode, developers now have the option to make text flow in a fashion similar to the native language of the audience.

Besides this, writing mode has many more use-cases from which you can benefit. For example, you can rotate text in different degrees to create a stunning layout. Here is a good video to watch on the subject.

In Conclusion

As you can see, the new CSS features have truly helped developers with tasks that were somewhat difficult if not impossible before. So are you one of the veteran developers who feel these new CSS functionalities are a godsend? Let us know the struggles you faced before, and how modern CSS is helping you overcome them.

About the Author

Madan Pariyar is a blogger at WebPrecious and a digital marketing strategist helping clients to resolve their website woes. When not busy with all these things, you may find Madan occasionally watching movies, traveling and spending time with family.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date