PHPackages                             bag/admin-panel-skeleton - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. bag/admin-panel-skeleton

ActiveLibrary[Admin Panels](/categories/admin)

bag/admin-panel-skeleton
========================

Admin panel skeleton.

3.0.2(4y ago)066MITPHPPHP >=5.6.0

Since Dec 23Pushed 4y ago1 watchersCompare

[ Source](https://github.com/pudge330/AdminPanelSkeleton)[ Packagist](https://packagist.org/packages/bag/admin-panel-skeleton)[ RSS](/packages/bag-admin-panel-skeleton/feed)WikiDiscussions master Synced 3d ago

READMEChangelogDependenciesVersions (16)Used By (0)

AdminSkeleton
=============

[](#adminskeleton)

A admin panel skeleton template. Comes with 4 built-in menus and javascript to handle opening and closing of menus.

Getting Started
---------------

[](#getting-started)

### Using Composer

[](#using-composer)

```
$ composer require bag/admin-panel-skeleton
```

### Cloning the Repo

[](#cloning-the-repo)

To get started clone this repo somewhere in your project.

```
$ git clone https://github.com/pudge330/AdminPanelSkeleton.git
```

### Customizing the CSS

[](#customizing-the-css)

AdminSkeleton uses SASS, to customize the look and feel just override any of the settings found in `css/src/_setup.scss` and include the `main.scss` file found in the same directory.

```
// file: admin-skeleton.scss

// Make the header background color white
$skeleton-color-headerBackground: #fff;
// Make the menu toggles semi-transparent black
$skeleton-color-headerMenuActionFocusBackground: rgba(0, 0, 0, 0.2);

@import 'path-to-adminskeleton/css/src/main.scss';
```

Then build the final css.

```
$ sass admin-skeleton.scss:admin-skeleton.css
```

### Setting up Your HTML

[](#setting-up-your-html)

Include the skeleton's CSS file or include it in your build.

```

```

Include the javascript.

```

```

AdminSkeleton also includes require js copies of the javascript `skeleton-requirejs.js` and `skeleton-requirejs.min.js`

I plan to bundle a custom build of bglib into it to make it a single javascript file.

### Rendering in PHP

[](#rendering-in-php)

If you installed the admin panel skeleton via Composer you will just need to call the static render method on the `AdminPanelSkeleton` class.

```
use BAG\AdminPanelSkeleton\AdminPanelSkeleton;
$data = [
	// AdminSkeleton's configuration options
];
echo AdminPanelSkeleton::render($data);
```

If you installed the admin panel by either downloading a zip file or cloning the repo you need to render the `php/skeleton.html.php` template file manually or include the class file manually. You will also need to have a `$data` variable set in the current context with an associative array containing the templates configuration options.

```
/* Include the template directly */
$data = [
	// AdminSkeleton's configuration options
];
include 'path-to-adminskeleton/php/skeleton.html.php';

/* Include the class and use the built in render method */
require_once 'path-to-adminskeleton/src/AdminPanelSkeleton.php';
use BAG\AdminPanelSkeleton\AdminPanelSkeleton;
$data = [
	// AdminSkeleton's configuration options
];
echo AdminPanelSkeleton::render($data);
```

If the `$data` variable conflicts with one in your project you can wrap everything up in a function.

```
function renderAdminSkeleton($data) {
	include 'path-to-adminskeleton/php/skeleton.html.php';
}
renderAdminSkeleton([
	// AdminSkeleton's configuration options
]);

// or as a closure
$renderAdminSkeleton = function($data) {
	include 'path-to-adminskeleton/php/skeleton.html.php';
};
$renderAdminSkeleton([
	// AdminSkeleton's configuration options
]);
```

Template Configuration Options
------------------------------

[](#template-configuration-options)

NameTypeDescriptiontitleStringPage header titleversionStringSystem version string/HTML, bottom of main menumainMenuArray\* An array representing a menuheaderMenuArray\* An array representing a menumemberLabelStringA label for the header's dropdown menu, usually a membermemberImageStringA image for the header's dropdown menu, usually a member photo or avatarlockIconBoolWhether or not to show the lock icon when the main menu doesn't exists, useful for login pageshideEmptyHeaderBoolWhether or not to show output header if empty when truemainMenuStateBoolWhere or not the main page menu is open (true) or closed (false)appMenuStateBoolWhere or not the app page menu is open (true) or closed (false)headerMenuStateBoolWhere or not the header page menu is open (true) or closed (false)sideMenuStateBoolWhere or not the header page menu is open (true) or closed (false)mainMenuIconBoolMain menu svg iconmainMenuLockIconBoolMain menu lock svg iconappMenuIconBoolApp menu svg iconheaderMenuIconBoolHeader menu svg iconsideMenuIconBoolSide menu svg iconcontentArray+ Array containing content for various parts of the page### \* Menus

[](#-menus)

- name - the menu name
- links - the menu links
    - text
    - url
    - urlNewWindow
    - icon
    - image
    - active
    - specialContent
    - toggle
    - links
- toggleIcon - svg toggle icon

### + Content

[](#-content)

- page
- header
- headerMenu
- mainMenu
- sideMenu
- appMenu
- topToolbar
- bottomToolbar

Sass Variable Reference
-----------------------

[](#sass-variable-reference)

```
$skeleton-breakpoint-sm: 38em !default;
$skeleton-breakpoint-md: 46em !default;
$skeleton-headerSmHeight: 40px !default;
$skeleton-headerMdHeight: 50px !default;
$skeleton-pageMenuTiming: 0.4s !default;
$skeleton-color-headerBackground: #00AAE4 !default;
$skeleton-color-headerColor: #fff !default;
$skeleton-color-headerMenuActionColor: $skeleton-color-headerColor !default;
$skeleton-color-headerMenuActionFocusColor: null !default;
$skeleton-color-headerMenuActionFocusBackground: rgba(255, 255, 255, 0.3) !default;
$skeleton-color-headerMemberColor: $skeleton-color-headerColor !default; //--unused
$skeleton-color-headerMemberFocusColor: null !default; //--unused
$skeleton-color-headerBrandingColor: null !default;
$skeleton-color-headerLogoutHover: #FFCDD2 !default;
$skeleton-color-pageBackground: #fff !default;
$skeleton-color-pageColor: #222 !default;
//--fonts
$skeleton-font-base: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
$skeleton-font-heading:  "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
$skeleton-font-nav: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
$skeleton-font-map: (
	base: $skeleton-font-base
	,heading: $skeleton-font-heading
	,nav: $skeleton-font-nav
);

$skeleton-widget-adminNav-menuLinkColor: #000 !default;
$skeleton-widget-adminNav-menuLinkBackground: null !default;
$skeleton-widget-adminNav-menuLinkFocusColor: null !default;
$skeleton-widget-adminNav-menuLinkFocusBackground: #ccc !default;
$skeleton-widget-adminNav-menuLinkFocusBorder: #aaa !default;
```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~55 days

Recently: every ~27 days

Total

15

Last Release

1554d ago

Major Versions

1.1 → 2.02021-09-04

2.0.7 → 3.02021-10-28

### Community

Maintainers

![](https://www.gravatar.com/avatar/9447e6ad188caa043faba1baf3867756e0fc8b1492b59d2a5093471c4e9faefc?d=identicon)[b.garcia0429](/maintainers/b.garcia0429)

---

Top Contributors

[![pudge330](https://avatars.githubusercontent.com/u/15351039?v=4)](https://github.com/pudge330 "pudge330 (41 commits)")

---

Tags

Skeletonadmin

### Embed Badge

![Health badge](/badges/bag-admin-panel-skeleton/health.svg)

```
[![Health](https://phpackages.com/badges/bag-admin-panel-skeleton/health.svg)](https://phpackages.com/packages/bag-admin-panel-skeleton)
```

###  Alternatives

[symfonyid/admin-bundle

Provide Admin Generator with KISS Principle

141.6k](/packages/symfonyid-admin-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)