AdminLTE 3.0 Plans

[almasaeed2010]

Hello everyone,

As you may already know, Bootstrap v4 is coming soon. Thus, a major update for AdminLTE is due with the release of BS4. For the time being, we will only take suggestions for AdminLTE 3. In other words, v2 will get bug fixes and patches but won't get new features.

Quick glance at our plans for AdminLTE 3:

• Full utilization of Bower for package management
• SASS instead of LESS
• Customized Bootstrap via variables to significantly decrease the number of (override) lines of code in AdminLTE.css
• Front-end template using the easily customizable color-scheme of AdminLTE to create a sense of consistency and broaden AdminLTE's domain
• Color variables of AdminLTE will be removed and Bootstrap 4 color vars will replace them
  • That is to say, instead of @light-blue for example, we will use $brand-primary
• The box component will be replaced with the new BS4 cards
• The main header will use a custom navbar to avoid current issues with responsiveness
• The treeview in the sidebar will be rewritten to provide advanced features and options such as treeview search and expand only when a specific element gets clicked.
• App.js will be removed and ECMA6 will be used for each plugin to produce AdminLTE.js
  • Treeview.js for example will be its own plugin and app.js will only supply a demo use case
  • This gives developers the ability to create their own custom app.js and use only the relevant plugins
• I still prefer Grunt over Gulp so I will keep using it (this is debatable)
• The layout may make use of the new flexbox functionality that BS4 provides. Thus, reducing the number of calls to $(window).resize(...)

The product of these changes should make AdminLTE highly customizable and convert it into a framework level tool rather than just a template. Suggestions and contributions are highly recommended as always. If you know of new plugins, tools or ideas, please feel free to post them here.

[durasj]

"This gives developers the ability to create their own custom app.js and use only the relevant plugins" - perfect

"That is to say, instead of @light-blue for example, we will use $brand-primary" - but it would be nice if you could provide some precompiled .css files with old colors. You would save a lot of time for users who dont have experience with SASS.

[YasserHassan]

@jlamer I prefer to completely break free and move forward with Bootstrap 4 and AdminLTE 3 and leave behind the old versions of both. Better not to drag anything from the old versions as that will become a liability to support and encourage some developers to stay with the past notions. It's normal to break backwards compatibility with major version updates. Moving to AdminLTE 3 is not mandatory and who needs to use the old model can choose to stay with v2.x.

[durasj]

I completely agree, but I dont think precompiling few css files with old colors would be problem. I think we could overcome a lot of questions about how SASS works.

[YasserHassan]

It will start by the compiled CSS files, then requests will follow to provide their LESS sources to make modifications easy, then issues will rise concerning problems with certain CSS classes in this or that browser/version/device that need solving and support in the LESS files. And probably some developers who are comfortable with LESS will start copying classes from SASS to it increasing the need to support LESS. And before you know it, you'll find LESS sneaking in besides SASS and calling for attention and support. Why open the door at the first place?

[durasj]

I think you misunderstood me. What I was trying to say was that it would be nice if in dist there were also css files compiled with all color variables like $brand-primary etc. from version 2.

[almasaeed2010]

AdminLTE 3 will have its own colors. It would be more likely to use a new color scheme but it may reserve the old one in case we find it better.

Thanks!

[YasserHassan]

@jlamer this way I think we are referring to different sides of the same thing and there's no conflict.

@almasaeed2010 my understanding is that you will not carry the old CSS classes over to v3 but instead use those of Bootstrap 4 even if you decide to revert to the old, still you'll apply them using Bootstrap 4's approach, right?

[almasaeed2010]

That is correct.

[YasserHassan]

In my opinion that would be a good approach to to it.

[iaesaudi]

Try to use NiceScroll Plugin.

[YasserHassan]

It's worth considering suggestions in #539.

[OldTrain]

If you may consider adding RTL native support, currently I support RTL over AdminLTE by reference bootstrap.rtl and by swapping pull-right/pull-left.

Appreciated your awesome efforts.

[ivantcholakov]

https://github.com/nakupanda/bootstrap3-dialog Edit: The author cares about this project, I am sure that a Bootstrap 4 compatible version will be released.

[ManuelRauber]

I like the new framework idea of AdminLTE. Do you plan on dropping the jQuery dependency in a basic version of AdminLTE? By basic I mean a simple good looking template without 3rd party plugins (so BS4 with AdminLTE layout/design). Sure, if a 3rd party plugin depends on jQuery then the user will need to add jQuery.

[lesichkovm]

JQuery is a must as Bootstrap 4 depends on it to work.

[jeroennoten]

@lesichkovm not for all features..

[durasj]

@JeroenNoten @lesichkovm exactly ... AFAIK only javascript plugins need jQuery - see http://getbootstrap.com/javascript/ ... layout stuff can be nowadays accomplished without JS with CSS3

[ManuelRauber]

More background for my "no jQuery dependency" idea: If you use AdminLTE (or Bootstrap) with AngularJS, you don't need (or want :)) the jQuery versions of the plugins, since you are either write a plugin yourself using AngularJS or you adapt the jQuery-versions (by wrapping them into a AngularJS directive, but then I would add jQuery to the project).

Most of the time I just need the template without any functions from the JS plugins (neither from Bootstrap nor from AdminLTE). That's why I asked, if something like "removing jQuery" is in the backlog. :)

[lesichkovm]

No external dependency on JavaScript at all is a great idea, if it can be accomplished, of course.

[iaesaudi]

Another plugin for scrolling: https://github.com/malihu/malihu-custom-scrollbar-plugin/tree/3.x

[YasserHassan]

Enhancement: Add sidebars status cookies (without persistence)

Many developers addressed sidebar persistence, obviously it's a common need. While it should be handled on the server and will be implemented differently according to the language/framework used, still the first step is executed on the client by setting a cookie upon sidebar status change. That cookie will be used later on the server script (if found) to display the sidebar correctly.

I suggest to make setting the sidebars status cookies (both left and right) a part of the template core features with a standard cookie names, preferably configurable with a default values. The developers will then need to handle the server-side part of it using their chosen technology. That way we address a common need and avoid making each developer repeat the same step by adding it once to the core functionality.

[iaesaudi]

Agree with @YasserHassan .

[ivantcholakov]

Maybe within the browser storage instead of cookies?

[ManuelRauber]

Highly agree with @ivantcholakov. For me it sounds like an access to the local storage to read/write the sidebar status. That can be done within a few lines of code. And for me it does not seem like a core functionality, since it can be added easily.

[YasserHassan]

@ivantcholakov it's another way. We need to evaluate both. Maybe implement both with on/off switches and leave it to the developer to decide which to use. I'm sure a lot of developer are ready to contribute to it including myself.

@ManuelRauber the ease of adding a feature is not the measure of a core function but rather how common it is and whether it's client-side. Any developer who chooses to use the collapsible sidebars would expect their status to persist over page loads. By taking a part of the implementation and making it ready out of the box in a well-implemented, tested, and documented way with server-side samples, we could save some frustration. Notice that it might be easy for you but not for everyone such as those who ask about it every now and then.

[crper]

I'm curious why the author does not release v3-alpha branch allows you developers to submit their desired function or component ... waiting for the official version BS4 procedures, functions, and merge the various submissions fixes some issues functionality.; this is not better ... if BS4 and other official version came out before you start alpha version, from v3-alpha to the official version, is estimated to be a long time .... I feel like this is not very good

[YasserHassan]

@crperlin I prefer to settle on the main direction and conceptual points and giving them enough thought first before making the code available. Otherwise, the community would start pulling the project in different directions on a technical level via code contributions without a clear direction.

[crper]

@YasserHassan Use Xmind to write programs using the process structure, determine the direction ??? such as this ??

[YasserHassan]

@crperlin I'm not sure I've got your point. However my idea is to let the concept mature first before making the code available. I prefer discussions that reach conclusions that are then complied to a set of points.

[crper]

@YasserHassan yes , But the lines are not frequent author, not engage in online discussions

[ManuelRauber]

@YasserHassan I see your point with having the persistence implemented in the core functionality. But I still don't see this as a server-side implementation, since the sidebar "shown/hidden" is a client state. What do you think about implementing this with client-side localstorage and providing a plugin with server-side persistence, rusing simple RESTful urls, leaving it to the developer implementing the server-side. Some samples could show how to implement the server using insert favorite language here.

[almasaeed2010]

Thanks for the suggestions guys! I will consider all of them when development of v3.0 starts.

Keep it up :+1:

[YasserHassan]

@ManuelRauber the sidebar state server-side part is required for the initial page load. For example, if you collapse the sidebar after page load, it will show expanded first then animate to collapse with every page load. You need to set the state (class) to the correct status before sending the page to the server to show right initially. The client-side function should be capturing user's expand/collapse action and setting cookie only. Refer to #315 for this.

Considering the above, in my opinion, local storage is not the right way to do it unless you need to do extra work to sent its value with each request to the server (in turn could be stored in a session), something a cookie would do directly and implicitly.

[YasserHassan]

@almasaeed2010 thank you for your effort. I suggest having a special label for V3 issues to take each V3 idea to its own thread while differentiating them from V2 to avoid mixing them all in this issue.

[durasj]

@ManuelRauber @YasserHassan I dont see reason why I should store sidebar state on my server. Imagine someone is using 3 devices: smartphone, tablet and desktop. So he opens site first time on desktop and he has a plenty of space so he keeps sidebar open. Now, if he decided to open it in tablet or smartphone, he would have sidebar opened so he has to close it and on dekstop open it again. I dont think thats very good UX. Yes, you could store something like HTTP_USER_AGENT but it can change very often when new versions are installed and why all that extra work? Cookies are not an ideal option - they can be deleted by some cleaning/security/whatever software and you cant set them to "forever". I am sure localStorage is the way to go.

[YasserHassan]

@jlamer you don't store sidebar state on the server, you only process it there. I'm also for storing the state on the client, the multiple clients point you mentioned is another reason. There are pros and cons to both cookies and local storage so implementation depends on each situation and the developer's best judgement.

[crper]

@almasaeed2010 I recommend "PJAX = pushState+Ajax" to achieve click the sidebar on the right page load effect;. And to avoid the whole station to achieve partial refresh refresh

PJAX project : https://github.com/defunkt/jquery-pjax;

I hope thie feture can add V3

[gerardo-junior]

First I use quite this thema think very good, I want to help in version 3. besides the setting bower we give the option to use cdnjs desvolvedor ? to perform the grunt

[prashantidealittechno]

Is their any plan to add RTL in admin LTE 3.0?

[Ricky-G]

Is there any plan on including the material design styles as an option

[ivantcholakov]

Sticky Footer - Non JavaScript Implementation

I would like the current sticky footer to be replaced with a non-javascript implementation. Pure CSS might do the job better, removing page blinking. Also, the pure CSS solution should avoid flexbox, in order to work on more devices and browsers.

[ManuelRauber]

Why avoid flexbox? http://caniuse.com/#feat=flexbox

Sticky-Footer with flexbox is really super easy to do. :)

[almasaeed2010]

@ManuelRauber We are trying to support all major browsers including IE9-10 which don't support flexbox.

[ivantcholakov]

In 2014 I did a sticky footer with flexbox and I was reported that it failed on IE10 and on a relatively new Samsung mobile device. I don't know how the situation with flexbox is now, I just don't want to take chances.

Edit: I know, with flexbox is super-easy, but I think it is early for that.

[YasserHassan]

I suggest evaluating the support of IE9 and 10, even 11. Microsoft is quietly replacing IE by its new Edge browser which is the default browser of the new Windows 10. One of the major reasons for supporting older IE versions was the wide use of Windows XP and that reason is no longer valid that XP has reached its end of life.

Some companies decided to fully drop IE support in favor of investing the time wasted in getting the projects to work right on it in favor of implementing new features and taking advantages of the new technologies.

It's hard to imagine deciding the future of a new project while dragging the weight of old problematic technologies that their own owner is trying to get rid of quietly.

I am not saying to fully drop the support of IE as that will not be realistic before a couple of years but to adopt a standards-compliant, modern-browser-first approach to implementation with partial support for IE. This would mean that some features will be partially or fully unavailable on older IE versions in favor of benefiting from all the new technologies and breaking the project free of dead weights so it can proceed faster.

[crper]

@YasserHassan Microsoft announced 10 months after no longer provide support for legacy strong push IE11 IE browser , xp user has very few times .. We should instead accompany a small number of users in the end Sike

[YasserHassan]

@crperlin if I understand you correctly, Microsoft itself will not support IE 9 and 10 in the near future, correct?

What I see is that their goal is to kill the whole IE line and replace it by Microsoft Edge which is a completely new browser. It has already started on both PC and mobile with Windows 10.

[ivantcholakov]

A sticky footer example without flexbox: http://codepen.io/jamiemlaw/pen/Bnscp

[Cryszon]

I just came across some disucussion about Bower development slowing down and thought I'd share it here. Here's another interesting comment.

Personally I've never had a reason to use Bower over NPM, but it's nice to have options and I hope Bower teams gets their stuff sorted out. I just thought I'd at least bring up a discussion whether a dependency to Bower is absolutely neccessary for this project especially for a new major release.

[ivantcholakov]

• Add the Web Font Loader, https://github.com/typekit/webfontloader
• Prepare and keep all the used fonts on the local server; avoid CDNs, especially in the admin side. Edit: Example: https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=greek,cyrillic,cyrillic-ext,greek-ext,latin-ext,latin,vietnamese