Isis Visual Update

[dgrammatiko]

Attempt to modernize the admin template Isis

Joomla 3.x was released on Thursday, 27 September 2012. Thats 2 years already now! Although through these months many visual cues were added to the Isis template the look and feel is almost identical. This update tries to modernize it but, at least in my eyes, without alienating it.

What’s different:

Buttons, gone the gradients, primary follows the main color of the links and now have some nice transitions
navbar, header are now unified in solid color
chosen has its own less file and now uses IcoMoon font
Calendar has a new css
Login has a new layout override for bigger button and an hr above that button

There is an easter egg: first and second font selector (document wide) is Ubuntu Thin and Ubuntu which if the users got it in theirs computers is gonna be used. Get it here: http://font.ubuntu.com/about/

I prepared a short screen cast moving around to demonstrate it, you can watch it here: https://www.dropbox.com/s/oz4q6gq4yb6zio5/isis-demo.mp4?dl=0

And some photos:

Comments and tests are welcome as usual

[n9iels]

first, thanks for add that last commit :-) please use generatecss.php to add these changes also to the css file, the last commit is not yet active.

I like it, but some things could be changed in my opinion.

Control panel
The links on left are very blue, the old color #555 looks better because it is less overwhelming. But my dad says the blue one are better :-)

Article manager
Same note for the filter box as the login page.
The dropdown menu in the article list (next to the featured button) has still some shadow effect

Global Configuration
Maybe you can remove the very little blue border between the select buttons like this:

General notes
After change the Nav Bar Colour parameter, the nav bar has some shadow effect. I don't if that is the expected result? Personal I like to see a difference between the navbar and the header

Maybe you can add outline:none; for the buttons and cursor:pointer; to the select boxes? personal I don't like the outline around buttons.

For the inputs that a input-append, I think it looks better when the blue borders around that button are the same boder-colour as the field #ccc

[n9iels]

I think that is better. The border for the buttons at the input-append doesn't change. You're not agree with that? (Just wondering).
Also curious what other people think of these changes :-)

[dgrammatiko]

I haven’t done all the suggestions because I had to comment out a lot of lines (put the back) So it’s easier to track the changes… But I will!

[n9iels]

ah okay! I'm sorry, I was just curious 😇

[dgrammatiko]

@n9iels Your list is quite big, I think I squashed a lot, but lets see what other people think.

[n9iels]

Yes I know, sorry for that. I think it is better now.
I'am also curious!

[infograf768]

Honestly, I do not see any improvement or modernization in these changes. The light blue colour on white background is imho less readable.

[dgrammatiko]

@ingograf768 let me just say that the buttons on ios devices are styled the same as links, android is also very flat and osx Yosemite will follow the same route. These buttons on the other hand are the same as the ones found in medium.com a project from twitter (BS). Of course anything that's about styling is down to personal preferences, so really no hard feelings, but I think gradients are so last year. Maybe a full color flat button will be better fit here?

[infograf768]

My concern is readability, not fashion. I do not specially care about gradients, which were also a matter of fashion.

[brianteeman]

Cant say i am a fan of the new toolbar button styling. Particularly the flicker when you hover over a button.
Also the No button is sometimes red and sometimes blue

This comment was created with the J!Tracker Application at http://issues.joomla.org/.

[dgrammatiko]

@brianteeman Yes button groups are inconsistent. Maybe I’ll try a version less radical for all buttons…

[javigomez]

Thanks @dgt41 for the work. I'm really pleased to see contributions like this. I just contacted Kyle to get his thoughts on the change https://twitter.com/JAVI_GOMEZ/status/511441007733653504

for 3.5 the plan is to have all the output based on JLayouts I think that will be the perfect moment for doing an update in Isis

cc: @phproberto

[betweenbrain]

I would suggest considering implementing these changes as a new template, possibly using Bootstrap v3, as opposed to changing the existing one.

[infograf768]

@betweenbrain
+1
and keep Isis as is as default.

[Bakual]

Just as an information: The roadmap (http://developer.joomla.org/cms/roadmap.html) already has a new admin template in it. It currently is planned for 3.10, but the roadmap is not set in stone.

I agree with Matt and Jean-Marie that it would make more sense to create a new template (and thus follow the roadmap) than trying to patch the current one and possibly break something else along the way.

[asika32764]

If we decided to create a new isis for Bootstrap3, please consider this adapter:
http://about.asika.tw/bootstrap3-adapter/ that make us B/C for Bootstrap2 and won't break 3rd extensions.

This is an isis for BS3 implement template:
https://github.com/asika32764/joomla-bootstrap3-isis-template

[n9iels]

I also agree for a new template. Bootstrap 3 implementation is very good plan. Also because bootstrap 2 is end of life.
But the road map says that for Joomla! 3.7 they wanna build something so you can choose your bootstrap version.
Is this something we have to take into consideration? Maybe on that time (i hope so) everything is build with Bootstrap 3. But it is possible there is a new version of Bootstrap at that moment.

[dgrammatiko]

@asika32764 can you include http://bootswatch.com in your isis bs3?
@phproberto Jlayouts will be covering 100% of joomla core before 3.5?

[dgrammatiko]

@Bakual But 3.10 states Oct 2015 and 3.4 is already 3-4 months behind schedule. That makes 3.10 a 2016 release (at least) and I am not really happy to use Isis interface for another 2 years. Of course I can always install my own template, but I guess for the majority of users/admins the look of Isis is already OLD. Maybe one of the next attempts for core decoupling are the templates?

[asika32764]

@dgt41 I'm not sure Bootswatch is compatible to isis or not. But if they're working together well, it seems a good idea.

[Bakual]

@dgt41 The roadmap already takes into account the delayed 3.4. It's only one day behind so far 😄
But it's true that 3.10 may well delayed. But as said the roadmap isn't set in stone. If there is a new template created before 3.10, it may be merged into core with 3.5 or 3.6 without problems.
So don't fix yourself on a given release, we can shift that if needed.

But the road map says that for Joomla! 3.7 they wanna build something so you can choose your bootstrap version.

The idea behind this is a compatibility layer. The simplest thing would probably be to have an own set of CSS classes ("Joomla CSS framework light") which can be easily be extended/matched to Bootstrap or Foundation classes using LESS/SASS.
However even if that is the simplest approach, it still is a whole lot of work to create that and most important document it. Angie Radtke has some ideas here but she would need a lot of help.

I agree that this work should be done prior to a new admin template, and the new template should be based on this work.

[asika32764]

I agree that if we have a Joomla CSS framework that can solve problems about integrating many frameworks. But it seems a big and hard work? And should we learn and convert to a new css syntax?

[dgrammatiko]

@asika32764 I vote also on new css syntax, but that means breaking B/C, which cannot happen before 4.0. So for V3.x the solution must incorporate some css overrides likes the one your adapter provides!

[asika32764]

I vote also on new css syntax, but that will mean breaking B/C, which cannot happen before 4.0.

Yes I agree. My adapter is still not in stable, and just support css(not support BS3 JS). But it's working well on my several Joomla projects and sites.

I will trying to add an option to toggle BS3 in current isis template if I have time. That we can test it is good idea to combine BS2 & 3 or not.

[dgrammatiko]

One last comment here before closing this: Why don’t we parse the output and replace the deprecated and changed classes from BS2 to the current of BS3? http://www.bootply.com/bootstrap-3-migration-guide#migration
Normally this requires a plugin which complicates things in templates, but there is a PR #4074 that will enables us to do that in a more transparent way, on the template folder overriding the renderer, so transparent to the user.
I realize that this is not the optimal solution here, but is feasible right now, if people are willing to help to get the code ready!

[n9iels]

Can that replace all the bootstrap 3 classes included classes for tables like used in article manager and other view in views etc.

[n9iels]

@Bakual is there a Github repo or something like that for that layer atm?

[dgrammatiko]

@n9iels We can parse/replace anything we want, but I think we only need the basics as stated in the migration link on my previous post.

[dgrammatiko]

@Bakual

The simplest thing would probably be to have an own set of CSS classes ("Joomla CSS framework light”)

I sincerely hope that Seth @nternetinspired will Lead on this!

[nternetinspired]

Honestly, I'd be wary to make any changes that will deviate the current template any further from it's main dependency, Bootstrap 2.x. FWIW, I also dislike the gradients employed by BS2, but I believe the crucial issues run far deeper and I'd prefer to concentrate efforts to tackle the underlying issues.

Though the effort you have taken is very much appreciated, I fear that you may be, as the old saying goes, “flogging a dead horse”.

Creating divergent dependencies, which the project then must assume the responsibility for maintaining, has caused many of the problems we have already experienced since integrating Bootstrap and I'd rather not see the project go any further down that rabbit hole.

In short, I think the best solution to those wanting Bootstrap 3 / Foundation 5 (or any other css) based admin templates is to create a new admin template and to include such libraries as external dependencies, and as you know there are already plans to do this. Getting all admin outputs to use JLayouts is the magic ingredient here, and once we have that creating admin templates will be a realistic possibility again.

[Bakual]

is there a Github repo or something like that for that layer atm?

@n9iels I think currently there is no work yet done for that. There is a frontend working group which goal is currently to make all output overrideable. The repo for that is https://github.com/joomla-projects/cms-naked.
I guess after that work is done, that layer or a new template will be the next target of the group. But I don't know that. I know @angieradtke has some ideas already.
If you want help with that, make sure to contact @phproberto and get into the working group 👍