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

 

 

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.

 

 

 

PART 1) BASIC HTML LAYOUT

<!-- (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

<!-- (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

/* (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.

 

 

 

HTML CSS FORMS

<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

<!-- (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.

 

 

 

LINKS & REFERENCES

• Simple AJAX Login Page – Code Boxx
• Popup Dialog Box – Code Boxx
• Pure CSS Responsive Dropdown Menu – Code Boxx
• Pure CSS Hamburger Menu – Code Boxx

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.