Skip to main content

Layout styles

We're going to start styling our TaskFlow navigation for mobile devices. This is refered to as mobile-first. When writing the CSS for an application starting out with writing your CSS for mobile has three benefits:

  • It reduces mobile load times as it doesn't process the desktop CSS;
  • A CSS mobile-first approach usually results in fewer lines of code;
  • It's a familiar practice making the code base more accessible to fellow developers.

But the main reason mobile-first has become a standard in the industry is because Internet use on mobile phones has exceeded Internet use on desktop devices, already in 2016.

Designing your layout​

Each design is different in its own aspects and deserves attention to the way its layout is structured. There are many tools you can use to achieve certain layouts and we'll discuss a few here.

Fixed layout​

When speaking of fixed layout, it means that the width and/or height is set to a fixed size. A good example of this would be the height of a topbar or a label which is designed to have an exact size. A common challenge is having a title that shouldn't be more than one line which can be larger than this label. This can be solved using overflow:

.label__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
};

There's also a different CSS property position: fixed; which locks the element to the screen disregarding the scrolled position.

Fluid layout​

Fluid layout is a design type in which the layout of a web-page and its components resize with the screen size. In other words, the web page adjusts as the screen size gets bigger or smaller.

There's many methods that make your elements fluid and most elements have a certain fluidity by default. We'll look at a few of these.

  • Flexbox and Grid are both display properties. These properties divide their children in groups based on their parents' size.

  • Percentages can be used to make elements a certain percentage based of their first relatively positioned parent. This means the parent must have the position: relative; property. There are a few exceptions to this rule, for example the body element that is relatively positioned by itself and elements that hold display: flex;.

  • vh stands for viewport height which lets you apply a percentage of the total height of the visible page. This can be useful for displaying a fullscreen image, for example like: section: 100vh;. Just like vh there is also vw, which stands for viewport width.

Practice games​

Knowing how to create robust layouts is essential when styling your applications. Both Flexbox and Grid are great CSS modules that help define layout. Having a good understanding of these will be very helpful when styling your application.

Styling the TaskFlow Header​

Make sure you've worked out your header before looking at this solution.

Further reading​