• Stars
    star
    142
  • Rank 257,063 (Top 6 %)
  • Language Less
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Primefaces admin theme based on Admin LTE and Bootstrap

Admin Theme

1. Introduction

This theme is a css file containing Admin LTE and Bootstrap as well as customized Primefaces components to make them look like AdminLTE and Bootstrap.

2. Usage

  1. Just add it to your application classpath:

    <dependency>
        <groupId>com.github.adminfaces</groupId>
        <artifactId>admin-theme</artifactId>
     ย   <version>1.0.0</version>
    <!--<classifier>dev</classifier> uncompressed theme.css-->
    </dependency>
  2. Add this context-param in your web.xml:

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>admin</param-value>
</context-param>
๐Ÿ’ก
If you use Admin Template there is no need to add admin-theme to your classpath neither the web.xml entry.

3. Architecture

The theme uses less as css pre-processor. Each PrimeFaces component has its own less file:

src/main/resources/less
โ”œโ”€โ”€ admin-lte
โ”‚    |
โ”‚    โ”œโ”€โ”€ bootstrap (1)
โ”‚    โ”‚
โ”‚    โ”œโ”€โ”€ skins (2)
โ”‚    โ”‚
โ”‚    โ””โ”€โ”€ admin lte less files
โ”‚
โ”œโ”€โ”€ primefaces-admin
โ”‚    |
โ”‚    โ”œโ”€ components (3)
โ”‚    โ”‚   |
โ”‚    โ”‚   โ”œโ”€โ”€ accordeon.less
โ”‚    โ”‚   โ”‚
โ”‚    โ”‚   โ”œโ”€โ”€ autocomplete.less
โ”‚    โ”‚   โ”‚
โ”‚    โ”‚   โ””โ”€โ”€ etc...
โ”‚    โ”‚
โ”‚    โ”œโ”€ theme.less (4)
โ”‚    โ”‚
     โ””โ”€ variables.less
  1. Bootstrap variables and mixins are used as reference in AdminLTE and admin theme less files

  2. Built in skins

  3. PrimeFaces components

  4. Components and Admin-LTE less files are included in theme.less

After compilation it will generate the theme.css with Admin-LTE, Bootstrap and Primefaces components.

โ„น๏ธ
Bootstrap.css (from src/META-INF/resources) is included in theme.less but can be removed via maven classifiers
โ„น๏ธ
Bootstrap less is not maintained in this project only itโ€™s mixins.

4. Theme classifiers

This project uses maven classifiers to offer multiple faces (pum intended) of Admin Theme. Below is the description of each classifier and how to use it.

4.1. Default (no classifier)

The default theme comes compressed, with Bootstrap (3.3.7) embedded and uses JSF resource handling for loading images and web fonts.

Maven usage
<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
</dependency>

4.2. Dev classifier

The dev classifier will bring a theme.css without minification.

Maven usage
<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>dev</classifier>
</dependency>

4.3. Without Bootstrap classifier

The without-bootstrap classifier will bring a theme.css without bootstrap embedded so itโ€™s up to the developer to provide Bootstrap within the application.

Maven usage
<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>without-bootstrap</classifier>
</dependency>

4.4. Without JSF classifier

The without-jsf classifier will bring a theme.css without JSF resource handling so the theme can be used on projects (derived from PrimeFaces) without JSF like Prime React, PrimeUI or PrimeNG.

Maven usage
<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>without-jsf</classifier>
</dependency>

4.5. No Fonts classifier

Since v1.0.0-RC16 web fonts such as glyphicons and Source Sans Pro were embedded inside the theme instead of being queried from a CDN.

This makes the theme work offline or in environments with limited access to the internet but on the other hand results in a larger jar file, ~1MB against ~200kb when fonts are not in the theme.

So if you want a thinner theme you can use the no-fonts classifier:

<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>no-fonts</classifier>
</dependency>

5. Avoiding theme caching

Whenever the theme is updated to a new version in the project users may have to clear their browser caches to get the changes of the new theme. Sometimes a theme update even introduces conflicts and only clearing browser cache fixes them.

To solve this issues you can use a theme classifier called no-cache:

pom.xml
<dependency>
    <groupId>com.github.adminfaces</groupId>
    <artifactId>admin-theme</artifactId>
    <version>1.0.0</version>
    <classifier>no-cache</classifier>
</dependency>

This classifier appends the theme version to the name of theme so you need to change the theme name in web.xml:

web.xml
<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>admin-1.0.0</param-value>
</context-param>
๐Ÿ’ก
There is also a no-cache-no-fonts classifier combining both approaches.

6. Development

To get your hands dirty with admin theme it is recommended to use Admin Designer in combination with Brackets or any tool that compile less files to css on save.

Using designer, which is backed by Wildfly Swarm, plus brackets will let you change the components less files and see the results instantly.

โ„น๏ธ
theme.less is already brackets aware so you just need to change any component less file, save it and see the results in Admin Designer.

9. Snapshot

Snapshots are published to maven central on each commit, to use it just declare the repository below on your pom.xml:

<repositories>
    <repository>
        <snapshots/>
        <id>snapshots</id>
        <name>libs-snapshot</name>
        <url>https://oss.sonatype.org/content/repositories/snapshots</url>
    </repository>
</repositories>

More Repositories

1

admin-template

JSF responsive admin template based on Bootstrap and AdminLTE
Java
199
star
2

admin-showcase

AdminFaces Showcase - https://adminfaces.github.io/admin-showcase/
HTML
81
star
3

admin-starter

https://adminfaces.github.io/admin-starter/
HTML
47
star
4

admin-starter-springboot

https://adminfaces.github.io/admin-starter
HTML
36
star
5

admin-designer

https://youtu.be/X1UEpN942s0
CSS
15
star
6

admin-persistence

Provides CRUD utilities for AdminFaces based applications.
Java
13
star
7

quarkus-admin-starter

AdminFaces starter application running on Quarkus
HTML
13
star
8

admin-starter-tomcat

Starter project configured to run on tomcat
HTML
11
star
9

quarkus-omnifaces

Quarkus OmniFaces extension
Java
10
star
10

admin-starter-persistence

Admin starter project with persistence layer
HTML
10
star
11

site

http://adminfaces.github.io/site
CSS
7
star
12

admin-starter-security

AdminFaces starter project using JavaEE 8 security API
HTML
7
star
13

admin-boot

SpringBoot AdminFacess integration via JoinFaces
Java
6
star
14

quarkus-admin-showcase

AdminFaces showcase for quarkus
HTML
6
star
15

admin-starter-springboot-security

HTML
6
star
16

admin-mobile

Admin showcase mobile application using webview
Java
5
star
17

admin-quarkus

Extension for Quarkus
Java
4
star
18

admin-showcase-tomcat

HTML
3
star
19

admin-addon

JBoss Forge Addon to generate CRUD pages (scaffolding from entities) using AdminFaces
Java
3
star
20

admin-starter-archetype

Maven archetype for AdminFaces Starter application.
HTML
2
star
21

generated-scaffold-app

Application generated with AdminFaces Scaffold
HTML
2
star
22

admin-starter-shiro

Admin Starter sample application using apache shiro for the security layer
HTML
1
star
23

admin-starter-tomcat-archetype

Archetype for AdminFaces starter tomcat application
HTML
1
star
24

docs

AdminFaces documentation
HTML
1
star
25

admin-starter-springboot-archetype

Maven archetype for AdminFaces Starter application using SpringBoot.
HTML
1
star