Relearning CSS: Part Five

🎨 Front End

Oct 29, 2022

5 min read

In this post I look at flexbox/css grid, styling forms and responsiveness.

If you want to go back and read part four, which covers styling gradients and backgrounds, accessibility and colours, pseudo elements and classes, and typography, click here.

Building a Layout

There are two main ways to create a layout for a web page; flexbox and grid. Depending on preference and the type of application, will depend which one you chose.

Flexbox

Flexbox is a one dimensional grid. Through examples such as flex-grow and flex-direction, you will see that this grid wraps elements and stacks elements above and below, depending on how styles are specified.

When setting up a flexbox layout, you will need to have a parent HTML element, that wraps around all the elements within your layout. This is usually referred to as a container.

<div class="container">
  <div>Info</div>
</div>

.container {
  display: flex
}

The display:flex style specifies this is a flex grid. If you wanted to use CSS Grid you would use display: grid but more on that later.

Justify-Content

Let’s say you have more divs within your container you would like to style in a certain way. Maybe you want to center an element. You might want a space around all the elements. You may want all of the elements to be spaced out evenly within the flexbox layout. All of this is possible with justify-content.

Flex-Wrap and Flex-Grow

flex-wrap will wrap elements within the container, depending on the width specified on the container.

See the Pen Part Five of Relearning CSS: Flexbox (flex-wrap) by ummadev (@ummadev) on CodePen.

flex-grow enables you to grow one child or all the children within the container.

See the Pen Part Five of Relearning CSS: Flexbox (flex-grow) by ummadev (@ummadev) on CodePen.

CSS Grid

Grid is a two dimensional grid.

A grid is made up of horizontal and vertical lines, known as grid lines. A grid track is the space between two lines. And a grid cell is the space between made up of these grid lines and grid track, which invariably make up rows and columns. If you have multiple grid cells, this refers to grid area.

.container {
  display: grid;
  grid-template-columns: 5em 10em 30em;
    grid-template-rows: 200px auto;
    gap: 5px;
}

<div class="container">
  <div>Item One</div>
  <div>Item Two</div>
  <div>Item Three</div>
  <div>Item Four</div>
</div>

The `fr` Unit

The fr unit works is similar to flex: auto in flexbox. It distributes space after the items have been laid out.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Styling Forms

Inputs and Labels

<label>name</label>
<input />

label {
  color: green;
}

input {
  border-radius: 3px;
  width: 300px;
  height: 20px;
  margin-top:10px;
}

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: yellow;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: blue;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Buttons

<button>Click here</button>

button {
  border-radius: 5px;
  background: green;
  border: none;
  width: 100px;
  height: 50px;
  margin-top: 10px;
  color: white;
}

button:hover {
  cursor: pointer;
  color: red;
}

Example

See the Pen Relearning CSS Part Five: Forms by ummadev (@ummadev) on CodePen.

What is Responsiveness?

Responsiveness means ensuring pages on a website fit the device the user is looking at the website on. In CSS this can be done through media queries. There are standard breakpoints for mobile, tablet and desktop.

Media Queries

Mobile: 320px - 480px
Tablet: 481px - 768px
Laptop: 769px - 1024px
Desktop: 1025px - 1200px
TV: 120px +

Applications

There are numerous applications that you can download to see how your application would look like on different devices. Alternatively you can use dev tools on browsers too, which offer any array of different devices

Responsively

sizzy