Tehnologii Web/2022-2023/Laborator 3

Introduction edit

This is an assignment-driven laboratory.

You are encouraged to continue the work from the previous laboratory.
You can use the existing CSS classes and HTML components.
You will need a separate HTML file for this task.
We are going to implement a responsive grid system (similar to Bootstrap) from scratch.

Task edit

Implement the following web dashboard having responsiveness in your mind.

Approach edit

In general terms, there are 3 viable approaches:

Standard layout (default / stacked, in-line, floats and breakpoints)
Flex layout
Grid layout
Responsive grid based on 12 columns - in this lab

Notes edit

Option 1) is still popular, but we can leverage modern browser capabilities.
Option 2) would work in this case, but is not necessarily the easiest way for complex page layouts.
Option 3) introduced recently would be the best fit, but the browser coverage is not yet 100%, currently at 96% (flexbox for instance has 99.7% browser support).
HTML Grid - 12 columns taking full height
Option 4) is implemented in the most popular frontend frameworks. We will implement our own responsive grid from scratch. We will still use flexbox and media-queries but the effort is significantly lower than option 1).

Tips edit

The navbar takes 100% width (12 columns).
The left sidebar takes 2-3 columns on desktop and 12 columns on mobile.
The main content takes around 8-10 columns on desktop and 12 columns on mobile

Steps edit

Step 1 edit

Generally, it is a good practice to set the sizing for all the elements as border-box.

Border-box means, essentially, the width and height values would take account of the element's padding and border.

* {
  box-sizing: border-box;
}

Step 2 edit

In your CSS stylesheet add the following classes for the columns.

/* Desktop size */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Step 3 edit

When the browser width is less than 768px, we will trigger our mobile view, then, our columns will take the entire width.

Assignment: Web Dashboard - desktop view

Lab assignment - mobile view

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

Step 4 edit

Our content will be displayed under several rows. We want to clear the rest of the content in the row container. Also, adding some padding for our columns is also a popular practice.

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

Step 5 edit

Your HTML body could look like this.

<body>

    <div class="navbar">
      <h1>Your Web App</h1>
    </div>

    <div class="row">
      <div class="col-3 side-menu">
        <ul>
            <li>Home</li>
            <li>Profile</li>
            <li>About</li>
            <li>FAQ</li>
            <li>Contact</li>
        </ul>
      </div>
    
      <div class="col-9">
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard of your application.</p>
        <p>Resize your browser to test your responsiveness!</p>
      </div>
    </div>
</body>

Your task: complete the HTML and CSS files in order to match the desktop and the mobile view.