From the autor of this website: Don't miss this!Visit www.kodhus.com for the best tutorials on howtos on web design and development.

Most used admin and dashboard html/css layouts explained

Kodhus >
By Ramsich
Kodhus technical writer
by ramsich
Most used admin and dashboard html/css layouts explained

In this tutorial I’m going to show you how you can develop 4 of the responsive layouts(resize the examples to see the responsiveness) which cover almost all possible scenarios if you want to develop for dashboard interfaces and admin interfaces meaning if you need a header, side bar navigation and a footer. Whenever you wanted to create responsive layout, first start with the mobile version, and style the elements based on that. Then for tablet version and desktop version, use media queries and modify styles of elements respectively to look the way you want them in tablet and desktop. Also the sidebar is fixed to the left of the viewport and it’s height is always the height of viewport. Let’s start with the easiest one.

Layout 1

If you take a look at the layout image at the top of this tutorial, you can see that we have a header on top, a footer and the side navigation bar. In this specific case, you will put your logo to the left of the header. Please click “on Edit on CODEPEN” to be able to see the full view. The embeded version will show you the mobile version.
Following is list of Techniques that has been used.

Media queries

For the side menu, we set the width to 100%, position to absolute and the display to none; Because in mobile version we initially don’t want to show it. The trigger button in the top right corner changes it’s display to block and hence visible. Then for the table version and for desktop version we use media queries to change it to the look that we want. Take a look at the code.

.rs-sidebar-header {
    background-color: #333333;
    color: white;
    z-index: 2;
    position: absolute;
    display: none;
    with: 100%;
    height: calc(100vh - 44px);
    border-right: 1px solid #e8edee;

}

@media only screen and (min-width: 768px) {
    .rs-sidebar-header {
        display: block;
        float: left;
        width: 90px;
    }
}

@media only screen and (min-width: 1170px) {
    .rs-sidebar-header {
        display: block;
        float: left;
        width: 250px;
    }
}

CSS calc

We have used css3 calc function for setting the height of side bar. The reason is that the unit for viewport height is “vh” and the unit for the height of the footer that we need to subtract is “px”. Calc is used as in follow:

.rs-sidebar-header {
    ... 
    height: calc(100vh - 44px);
    ...

}

Pseudo elements

To make the trigger button for when you view the layout in mobile, we used the following css for .mobile-nav element.

.mobile-nav {
    float: right;
    padding: 0 40px 0 0;
    display: block;
    height: 12px;
    color: transparent;
    position: relative;
    width: 30px;
    height: 34px;

}
.mobile-nav span, .mobile-nav span:before, .mobile-nav span:after {
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #333;
    display: inline-block;
    cursor: pointer;
}
.mobile-nav span {
    position: absolute;
    top: 50%;
}
.mobile-nav span:before {
    content: '';
    top: -6px;
}
.mobile-nav span:after {
    content: '';
    top: 6px;
}
@media only screen and (min-width: 768px) {
    .mobile-nav {
        display: none;
    }
}

See the Pen Responsive layout 1 by ramsich (@ramsich) on CodePen.

Layout 2

In this layout, instead of having a full width footer, we move the footer to the main content section. we need to make sure the footer changes size, based on the side bar’s size in different views for mobile tablet and desktop.

.rs-footer {
    width: 100%;
    min-height: 44px;
    position: absolute;
    background-color: #fcfcfc;
    border-top: 1px solid #e8edee;
    bottom: 0;
}

@media only screen and (min-width: 768px) {
    .rs-footer {
        width: calc(100% - 90px);
    }
}

@media only screen and (min-width: 1170px) {
    .rs-footer {
        width: calc(100% - 250);
    }
}

Take a look at the pen.

See the Pen Layout2 by ramsich (@ramsich) on CodePen.

Layout 3

In this layout, we will put the footer in the side bar. This layout is pretty useful when you have a very short footer text information that you can fit in the width of the side bar. Html markup is as follow:

<div class="rs-header">
    <a href="javascript:void()" class="mobile-nav"><span></span></a>
    <div class="center-wrap-content">
        header
    </div>
</div>
<div class="rs-sidebar-header">
    <div class="center-wrap-content">side bar</div>
    <div class="rs-footer">
        <div class="center-wrap-content">footer</div>
    </div>
</div>
<div class="main-content">
    Main content
</div>
<div class="rs-footer dup-footer">
    <div class="center-wrap-content">footer</div>
</div>

Following is the pen.

See the Pen Layout 3 by ramsich (@ramsich) on CodePen.

Layout 4

This layout is for when you want to put your logo in the side bar rather than in the header. It’s actually very common these days to use this layout. Lets checkout the html:

<div class="rs-header-sidebar">
    <a href="javascript:void()" class="mobile-nav"><span></span></a>
    <div class="center-wrap-content">
        header
    </div>
</div>
<div class="rs-sidebar">
    <div class="center-wrap-content">side bar</div>
</div>
<div class="main-content"> Main content</div>
<div class="rs-footer">
    <div class="center-wrap-content">footer</div>
</div>

Following is the pen:

See the Pen Layout 4 by ramsich (@ramsich) on CodePen.

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>