Very Simple Pure HTML CSS Admin Panel (Free Download)

Welcome to a sharing of an admin panel template with pure HTML and CSS. Looking to “kick start” your project with a template? Only to find crazy complicated or paid templates all over the Internet? Well, here’s a sharing of my simple version, zero third-party frameworks involved. Read on!

ⓘ I have included a zip file with all the source code, so you don’t have to copy-paste everything.

 

 

TABLE OF CONTENTS

Download & Notes How It Works Extra Components
Useful Bits & Links The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • admin.html and admin.css contains the “main template”.
  • 1-forms.html and 2-zebra.html are optional “plugins”.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

HOW IT WORKS

All right, let us now walk through how the admin panel works in more detail.

 

PART 1) BASIC HTML LAYOUT

admin.html
<!-- (A) SIDEBAR -->
<div id="pgside"></div>
 
<!-- (B) MAIN -->
<main id="pgmain"></main>

Brace yourselves, this simple admin template consists of a “very complicated” 2 columns layout.

  1. <div id="pgside"> A left sidebar.
  2. <main id="pgmain"> Main contents on the right.

 

 

PART 2) SIDEBAR MENU ITEMS

admin.html
<!-- (A1) BRANDING OR USER -->
<!-- LINK TO DASHBOARD OR LOGOUT -->
<div id="pguser">
  <img src="potato.png"/>
  <i class="txt">MY ADMIN</i>
</div>
 
<!-- (A2) MENU ITEMS -->
<a href="#" class="current">
  <i class="ico">&#9733;</i>
  <i class="txt">Section A</i>
</a>
<a href="#">
  <i class="ico">&#9728;</i>
  <i class="txt">Section B</i>
</a>
<a href="#">
  <i class="ico">&#9737;</i>
  <i class="txt">Section C</i>
</a>
  • (A1) <div id="pguser"> The very first item of the sidebar. This can be your branding or current user.
  • (A2) The menu items.
    • Use <a class="current"> to highlight the current section.
    • <i class="ico"> The icon. This is using the plain old HTML symbol, but feel free to use Font Awesome, Google Material Icons, or whatever of your own choice.
    • <i class="txt"> Menu item text.

 

PART 3) RESPONSIVE DESIGN

admin.css
/* (B1) SIDEBAR ITSELF */
#pgside {
  width: 200px;
  transition: width 0.2s;
}
 
/* (B5) SMALL SCREEN TRANSFORMATION */
@media screen and (max-width:768px) {
  #pgside { width: 70px; }
  ...
  #pgside i.ico {
    font-size: 1.5em;
    margin-right: 0;
  }
  #pgside i.txt { display: none; }
}

Actually, that’s about it for the simple admin panel. Just a small note on how the CSS deals with “small screen transformation”.

  • The sidebar will be “shrunk”.
  • The menu item text will be hidden.
  • The menu item icons will be expanded.

 

 

EXTRA COMPONENTS

That covers the “base admin template”, here are a couple more extras “components” that may be useful in your project.

 

HTML CSS FORMS

1-forms.html
<form class="form">
  <label for="demoA">Field A</label>
  <input type="text" id="demoA"/>
 
  <label for="demoB">Field B</label>
  <textarea id="demoB"></textarea>
 
  <label for="demoC">Field C</label>
  <select id="demoC">
    <option>Option A</option>
  </select>
 
  <input type="submit" value="Go"/>
</form>

Just some “better than the default” form styles in this one. Of course, this is responsive and scales itself to fit.

 

ZEBRA TABLES & LIST

2-zebra.html
<!-- (A) ZEBRA TABLE -->
<table class="zebra">
  <tr>
    <td>Cell</td> <td>Cell</td> <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td> <td>Cell</td> <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td> <td>Cell</td> <td>Cell</td>
  </tr>
</table>
 
<!-- (B) ZEBRA LIST -->
<ul class="zebra">
  <li>Row</li> <li>Row</li>
  <li>Row</li> <li>Row</li>
</ul>

Lastly, zebra stripe tables and lists.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

There’s a ton of “widgets” on this blog… Or just get my compiled widgets eBook. That will help to cover the cost of running this blog a little bit.

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Very Simple Pure HTML CSS Admin Panel (Free Download)”

Leave a Comment

Your email address will not be published.