1
\$\begingroup\$

I have coded an UI from dribble design as a challenge and completed it but I think The CSS I wrote is really bad. I am a beginner. How can I improve my CSS?. One of the main problems is that I am using position: absolute for positioning everything. I want it to be responsive.

This is the dribble design I was trying to code enter image description here

This is what I coded looks (on my machine) enter image description here

*
{
  margin: 0;
  padding: 0;
  outline: none;
}

body
{
    font-family: 'Montserrat', sans-serif;
    
  
}


.dash-container
{
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 700px;
  overflow: hidden;
     
}

.left-side {
    position: absolute;
    width: 25%;
    height: 100%;
    float: left;
    /*background-color: rgb(236, 235, 235, 0.4);
    
    background-color: rgb(110, 145, 255 , 0.1);*/
    background: white;
    margin-right: 10px;
    
}

.right-side {
    position: absolute;
    width: 80%;
    height: 100%;
    right: 0;
    background-color:  rgb(164, 171, 195, 0.2);
    

}

.logo {
    position: absolute;
    /*color: #6FE3FF; */
    color: #3bccf6;
    font-size: 2.2em;
    font-weight: 900;
    
    top: 20px;
    left: 50px;
    letter-spacing: 1px;

}
.profile-pic{
    position:absolute;
    top: 90px;
    left: 40px;
 }

.profile-pic img {
    
    border-radius: 100%;
    width: 50px;
    height: 50px; 
    
}

.profile-name .profile-job-title{
    position: absolute;
    display: block;    
}

.profile-name{
    position: absolute;
    top: 99px;
    left: 102px;
    font-weight: bold;
    font-size: 0.9em;
    color:gray;
}
.profile-job-title{
    position: absolute;
    top: 118px;
    left: 102px; 
    font-size: 0.65em;
    color: grey;
    font-weight: lighter;
}

.sidebar-options {
    position: absolute;
    top: 200px;
    left: 40px;
    color: gray;
    font-weight: lighter;
}

.sidebar-options ul li {
    font-size: 13px;
    line-height: 45px;
    list-style: none;
    
  
}
.sidebar-options ul li.active {
    color: #6FE3FF;
}
.sidebar-options ul li i{
    position: relative;
    left: 85px;
    float: right;
    top: 15px;
     
}
.add-project-btn {
    position: absolute;
    top: 380px;
    left: 0px;
    width: 185px;
    font-size: 0.9em;
    text-align: center;
    height: 40px;
    color: white;
    /*background-color: rgb(7, 104, 104); */
    border: none;
    border-radius: 50px;
    background-image: linear-gradient(to right, rgb(87, 193, 219) 0%, #2FC7F5 51%, rgb(28, 189, 230) 100%);
}

.header {
    display: block;
    position: absolute;
    float: left;
    background: white;
    top: 0px;
    height: 70px;
    width: 100%;
}


.fa-search{
    position: absolute;
    font-size: 16px;
    top: 32px;
    color: lightgray;
    left: 30px;
    cursor: pointer;
        
}
input::placeholder {
    color: lightgray;
}
input{
    position: absolute;
    background-color: white;
    width: 45%;
    height: 30px;
    top: 25px;
    left: 65px;
    font-size: 18px;
    border-radius: 50px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    color: gray;

}

.header-profile-pic{
    position:absolute;
    top: 22px;
    left: 550px;
}

.header-profile-pic img {
    
    border-radius: 100%;
    width: 35px;
    height: 35px; 
    cursor: pointer;
}

.green-dot .fa-circle {
    position: absolute;
    color: #00ff00;
    top: 51px;
    left: 555px;
    font-size: 8px;
    
}

.header-name {
    position: absolute;
    color: rgb(3, 3, 3,0.6);
    top: 31px;
    left: 595px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.87em;
    font-weight: lighter;
    
}
.dropdown {
    position: absolute;
    color: rgb(3, 3, 3,0.6);
    top: 32px;
    left: 699px;
    font-size: 0.87em;
    cursor: pointer;
}
.message {
    position: absolute;
    color: rgb(3, 3, 3,0.6);
    top: 32px;
    left: 770px;
    font-size: 1em;

}
.red-dot-1 {
    position: absolute;
    color:#ff0000;
    top: 28px;
    left: 782px;
    font-size: 5px;
}
.notify {
    position: absolute;
    color: rgb(3, 3, 3,0.6);
    top: 32px;
    left: 840px;
    font-size: 1em;
}
.red-dot-2 {
    position: absolute;
    color: #ff0000;
    top: 28px;
    left: 850px;
    font-size: 5px;

}
.burger {
    position: absolute;
    color: rgb(3, 3, 3,0.6);
    top: 32px;
    right: 60px;
    font-size: 1em;
}

.dashboard-heading h1 {
    position: absolute;
    color: rgb(128, 128, 128, 1);
    top: 100px;;
    left: 100px;
    font-size: 1.2em;
}
.blue-rect .fa-tachometer-alt {
    position: absolute;
    color: white;
    background-image: linear-gradient(to right, rgb(87, 193, 219) 0%, #2FC7F5 51%, rgb(28, 189, 230) 100%);
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    top: 93px;
    left: 50px;
    font-size: 1em;

}




.card-1 .card-icon {
    position: absolute;
    font-size: 1.5em;
    top: 20px;
    left: 40px;

}
.card-1 .card-title {
    position: absolute;
    font-size: 0.9em;
    top: 60px;
    left: 40px;
}

.card-1 .card-price {
    position: absolute;
    font-size: 1.4em;
    top: 90px;
    left: 40px;
}

.card-1 .card-footer {
    position: absolute;
    font-size: 0.9em;
    top: 130px;
    left: 40px;
}

.card-1 .card-background-up {
    position: absolute;
    height: 130px;
    width: 130px;
    top: 0px;
    left: 220px;
    z-index: 10;
}
.card-1 .card-background-down {
    position: absolute;
    height: 135px;
    width: 135px;
    top: 80px;
    left: 197px;
    z-index: 10;
}

.card-2 .card-background-up {
    position: absolute;
    height: 130px;
    width: 130px;
    top: 0px;
    left: 220px;
    z-index: 10;
}
.card-2 .card-background-down {
    position: absolute;
    height: 135px;
    width: 135px;
    top: 80px;
    left: 197px;
    z-index: 10;
}

.card-3 .card-background-up {
    position: absolute;
    height: 130px;
    width: 130px;
    top: 0px;
    left: 220px;
    z-index: 10;
}
.card-3 .card-background-down {
    position: absolute;
    height: 135px;
    width: 135px;
    top: 80px;
    left: 197px;
    z-index: 10;
}

.card-2 .card-icon {
    position: absolute;
    font-size: 1.5em;
    top: 20px;
    left: 40px;

}
.card-2 .card-title {
    position: absolute;
    font-size: 0.9em;
    top: 60px;
    left: 40px;
}

.card-2 .card-price {
    position: absolute;
    font-size: 1.4em;
    top: 90px;
    left: 40px;
}

.card-2 .card-footer {
    position: absolute;
    font-size: 0.9em;
    top: 130px;
    left: 40px;
}

.card-3 .card-icon {
    position: absolute;
    font-size: 1.5em;
    top: 20px;
    left: 40px;

}
.card-3 .card-title {
    position: absolute;
    font-size: 0.9em;
    top: 60px;
    left: 40px;
}

.card-3 .card-price {
    position: absolute;
    font-size: 1.4em;
    top: 90px;
    left: 40px;
}

.card-3 .card-footer {
    position: absolute;
    font-size: 0.9em;
    top: 130px;
    left: 40px;
}

.card-1 {
    background: linear-gradient(#c694f9 0%, #ab64f4 100%); 
    position: absolute;
    top: 150px;
    left: 50px;
    border-radius: 10px;
    height: 25vh;
    width: 23vw;
    color: white;
}

.card-2 {
    
    background: linear-gradient(#6aa5e3 0%, #6866e9 100%);
    position: absolute;
    top: 150px;
    left: 440px;
    border-radius: 10px;
    height: 25vh;
    width: 23vw;
    color: white;
    

    
}
.card-3 {
    
    background: linear-gradient(#feb683 0%, #ff8993 100%);
    position: absolute;
    top: 150px;
    left: 830px;
    border-radius: 10px;
    height: 25vh;
    width: 23vw;
    color: white;
}
.cards {
    display: inline-block;
    
}

.table-container {
    background-color: white;
    border-radius: 10px;
    position: absolute;
    top: 365px;
    left: 50px;
    height: 45%;
    width: 92%;
}
.table-container .table-title {
    color: rgb(29, 27, 27, 0.6);
    font-size: 1.1em;
    position: absolute;
    top: 20px;
    left: 42px;
}

.table {
    position: absolute;
    top:60px ;
    left: 40px;
    width: 90%;
    text-align: left;
    height: 77%;
    font-size: 0.9em;
    color: black;

    
}


td, th {
    border: none;
    text-align: left;
    padding: 5px;



  }
  
  tr:nth-child(even) {
    background-color: rgba(171, 240, 240, 0.2);

  }

  .pending {
    background: linear-gradient(#c694f9 0%, #ab64f4 100%); 
    border-radius: 5px;
    color: white;
    text-align: center;


  }
.approved {
    background: linear-gradient(#6aa5e3 0%, #6866e9 100%);
    border-radius: 5px;
    color: white;
    text-align: center;
}
.rejected {
    background: linear-gradient(#feb683 0%, #ff8993 100%);
    border-radius: 5px;
    color: white;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        
    <title>Dashboard</title>
</head>

<body>
    <!-- container -->
    <div class="container">

        <!--dash-container-->
        <div class="dash-container">

            <!--left-side-->
            <div class="left-side">
                <div class="logo">
                    blueBox
                </div>
            
            <div class="profile-pic">
                <img src="profile.jpg" />
            </div>

            <div class="profile-name">
                Gourav Thakur
            </div>

            <div class="profile-job-title">
                Project Manager
            </div>

            <!--sidebar options-->
            <div class="sidebar-options">
                <ul>
                    <li class="active">
                        Dashboard
                        <i class="fas fa-home"></i>
                    </li>

                    <li>
                        UI Elements
                        <i class="fab fa-elementor"></i>
                    </li>

                    <li>
                        Components
                        <i class="fab fa-slack"></i>
                    </li>

                    <li>
                        Forms stuff
                        <i class="fab fa-wpforms"></i>
                    </li>

                    <li>
                        Data table
                        <i class="fas fa-database"></i>
                    </li>

                    <li>
                        Icons
                        <i class="fas fa-tv"></i>
                    </li>

                    <li>
                        Sample Page
                        <i class="fas fa-pager"></i>
                    </li>

                    <li>
                        Extra
                        <i class="fas fa-gopuram"></i>
                    </li>


                </ul>

                <button class="add-project-btn">Add Project</button>
            </div>
            <!--end of sidebar-options-->

            </div>
            <!--end of left-side -->

            <!--right-side-->
            <div class="right-side">

                
            <!-- header-->
            <div class="header">
                <span class="search">
                    <i class="fa fa-search"></i>
                    <span class="search-box">
                        <input type="text" name="search" id="search" placeholder="Search Project"></input>
                    </span>
                </span>
                <span class="header-profile-pic">
                    <img src="profile.jpg" alt=""/>
                </span>
                <span class="green-dot">
                        <i class="fas fa-circle"></i>
                </span>
                <span class="header-name">
                    Gourav Thakur
                </span>
                <span class="dropdown">
                    <i class="fa fa-angle-down"></i>
                </span>

                <span class="message">
                    <i class="fa fa-envelope"></i>
                </span>
                <span class="red-dot-1">
                        <i class="fa fa-circle"></i>
                </span>

                <span class="notify">
                        <i class="fa fa-bell"></i>
                    </span>
                    <span class="red-dot-2">
                            <i class="fa fa-circle"></i>
                    </span>

                <span class="burger">
                    <i class="fa fa-bars"></i>
                </span>
                
            </div>
            <!--end of header-->

            <!--   main-content   -->
            <div class="main-content">
                <div class="dashboard-heading">
                        <div class="blue-rect">
                            <i class="fas fa-tachometer-alt"></i>
                        </div>
                        <h1>Dashboard</h1>
                </div>


                <!-- card -->
                <div class="cards">

                <div class="card-1">
                    <span class="card-icon">
                    <i class="fas fa-dollar-sign"></i>
                    </span>
                    <h1 class="card-title">Stock Total</h1>
                    <h1 class="card-price">$150000</h1>
                    <h1 class="card-footer">Increased by 60%</h1>
                    <img class="card-background-up" src="circle.png"/>
                    <img class="card-background-down" src="circle.png"/>

                    
                </div>

                <div class="card-2">
                        <span class="card-icon">
                                <i class="fas fa-database"></i>
                        </span>
                        <h1 class="card-title">Total Profit</h1>
                        <h1 class="card-price">$25000</h1>
                        <h1 class="card-footer">Increased by 30%</h1>
                        <img class="card-background-up" src="circle.png"/>
                        <img class="card-background-down" src="circle.png"/>
    
                        
                    </div>

                    <div class="card-3">
                            <span class="card-icon">
                                <i class="fa fa-flag"></i>
                            </span>
                            <h1 class="card-title">Unique Visitors</h1>
                            <h1 class="card-price">250000</h1>
                            <h1 class="card-footer">Increased by 80%</h1>
                            <img class="card-background-up" src="circle.png"/>
                           <img class="card-background-down" src="circle.png"/>
        
                            
                        </div>

            </div>
                <!-- end of card-->
            
            <!--table-->
            <div class="table-container">
                <h1 class="table-title">Standard Table Design</h1>
            

            <table class="table">
                    <tr>
                      <th>Name</th>
                      <th>Email</th>
                      <th>User Type</th>
                      <th>Joined</th>
                      <th>Status</th>
                    </tr>
                

                    <tr>
                            <td>Mike Band</td>
                            <td>[email protected]</td>
                            <td>Admin</td>
                            <td>25 Apr, 2018</td>
                            <td class="pending">Pending</td>
                    </tr>
                    
                    <tr>
                            <td>Kevin Pietersen</td>
                            <td>[email protected]</td>
                            <td>Editor</td>
                            <td>10 Aug, 2018</td>
                            <td class="approved">Approved</td>
                    </tr>

                    <tr>
                            <td>Andrew Strauss</td>
                            <td>[email protected]</td>
                            <td>Editor</td>
                            <td>20 Dec, 2019</td>
                            <td class="approved">Approved</td>
                    </tr>

                    <tr>
                            <td>Ross Taylor</td>
                            <td>[email protected]</td>
                            <td>Admin</td>
                            <td>13 Sep, 2018</td>
                            <td class="rejected">Rejected</td>
                    </tr>

                    <tr>
                            <td>Mike Hussey</td>
                            <td>[email protected]</td>
                            <td>Subscriber</td>
                            <td>05 Oct, 2018</td>
                            <td class="pending">Pending</td>
                    </tr>
                    
                    
                  </table>

                </div>
            <!--end of table-->

                
            </div>
            <!--end of main content-->
            
            </div>
            <!--end of right-side-->

        </div>
        <!--end of dash-container-->

    </div>
    <!--End of container-->
</body>

</html>

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

Oh deer. Oh deer. oh deer.

Here you go friend, have a look at this: https://jsfiddle.net/d3o2Lex4/56/

Should be easy enough to understand. One thing to keep in mind when making things responsive is using % for widths. You will also have to learn the css @media query to make things adapt at different screen sizes. That's how Bootstrap works. If you haven't heard of Bootstrap check it out, you don't have to use it but it will give you insight as to how some people do things. I have used it in this example to get things going quicker.

HTML


<div id="app">
  <header>
    header stuff goes here
  </header>

  <aside>
    <div>user name badge goes here</div>
    <nav>
      <a href="">links</a>
      <a href="">go</a>
      <a href="">here</a>
    </nav>
  </aside>

  <main>

  <!-- with bootstrap you could do something like this, the classes I have used here: container, row, col, card, mb-4 are all part of the bootstrap library -->
  <!-- see it here: https://getbootstrap.com/docs/4.3/getting-started/introduction/  -->
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="card mb-4">card 1</div>
      </div>
      <div class="col">
        <div class="card mb-4">card 2</div>
      </div>
      <div class="col">
        <div class="card mb-4">card 3</div>
      </div>
    </div>

     <div class="card"> this is a card example</div>

   </div>
  </main>  
</div>

SASS

/* reusable variables  */
$nav-width: 280px;
$header-height: 65px;

#app {
 width: 100%;
 height: 100vh;
 background: gray;
 overflow-x: hidden;
}

header{
  height: $header-height;
  background: white;
  padding: 15px 30px; /* 15 is top and bottom. 30 is left and right  */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

aside{
  width: $nav-width;
  background: white;
  padding: 30px;
  /* keeping it fixed on the side */
  position: fixed;
  left: 0;
  bottom: 0;
  top: $header-height;
  /* if on small screens it can fit it will have a scroll bar */
  overflow-y: auto;
}

nav a{
 display: block;
}

main {
  padding: 30px;
  margin-top: $header-height;
  margin-left: $nav-width;
}

.card{
  border-radius: 8px;
  background: white;
  padding: 30px;
}

* {
  box-sizing: border-box;
}

hope this is helpful!

\$\endgroup\$
2
  • 1
    \$\begingroup\$ Welcome to Code Review! First: What's up with those calls to animals living in the forest? Second: "Should be easy enough to understand." -> This is not what we do here. Explain essential parts of your code and show the reasoning why your approach is better than the original code. \$\endgroup\$
    – AlexV
    Commented May 8, 2019 at 9:52
  • \$\begingroup\$ Thanks! I might have to delete my post. Unfortunately I am busy at work and have spent enough time putting this example together. I added a bit of personality to my post, obviously not cool. I don't have time to explain everything but figured something would help rather than nothing - seeing as no one has responded to his post in 5 days. I will get in touch with Gourav privately and send him links and answers that way - at least then we can have a discussion and work through it rather than having to provide everything in one long answer. \$\endgroup\$
    – Gregg Od
    Commented May 8, 2019 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.