Little style refresh for default web pages

[smartiniOnGitHub]

Hi all, I'm proposing here to do a little refresh (from a stylistic point of view) of Grails generated pages for 3.1.x. ; of course this is a not-so-trivial task, so to avoid breaking a lot of pages and visual behavior with many plugins (like Scaffold) I think we should split this issue in some steps/tasks (and maybe in more than 1 issue, and implement them in the Grails 3.1.x line), this is a sample plan:

• step 1: accept/agree on the proposal page (from many points of view it's subjective I know, but we should try to stay on a balance between modern page looking, functionalities, platforms supported, etc), based on a sample Home Page updated by hand.
• step 2: update Grails sources to implement new style ... do you prefer a custom branch or should I stay with my master ?
• step 3 (as suggested by Ronny): move default sitemesh layout related CSS in a dedicated css
• step 4 (as suggested by Ronny): move scaffold/related styles in a dedicated css style ... published by Grails or by the Scaffold Plugin ? (in the meantime maybe keep in Grails). For this of course we need many user tests to ensure behavior will be good the same.
• others steps to adjust things ...

In my tests I'm using the new Grails web site as a reference; all code is done without other frameworks/libraries, to keep it simple; stay on a basic adaptive design; make it simple to expand or to remove with another (like Bootstrap).

This is the online version for a revised Home page: http://codepen.io/anon/pen/YwPVdN I'll put in attach here a zip file containing all (static-only) files to be able to work offline: grails_pages_tweak_tests_for_3.1.0.zip

What do you think ? I hope to get some feedback, consensus is all here :-) .

The discussion thread is here: https://groups.google.com/d/msgid/grails-dev-discuss/deab1f8c-27e6-4803-9fd2-4abb44a287e4%40googlegroups.com?utm_medium=email&utm_source=footer please put discussion-related things in that thread, and only development-related things/issues/updates (here) in the GitHUB Grails Issue.

Thanks a lot, Sandro

[smartiniOnGitHub]

Hi all, small updates even today (2016-01-14):

• check/update styles with postcss autoprefixer, to ensure things are better on latest browsers (by default autoprefixer should use last 2 browsers); if useful to someone, I used latest postcss in the command-line version with latest Node.js LTS version, with following commands: cls && postcss --use autoprefixer _.css -d stylesheetstemp/ cls && postcss --use autoprefixer lib/.css -d stylesheets_temp/lib/ then check/inspect differences (for example with WinMerge), do a run-app, and finally and commit changes; note that even original main.css has been updated here
• ensure that all is good in latest Firefox, Chrome, IE Edge
• publish static pages (saved from Grails running webapp) here; add even a variant of the Bar page with header and footer not using header/footer tags but only div tags (all changed inside Chrome Developer Console)

Before the end of this week I'll be ready for pull request with Grails Profiles Repository. Anyway be free to contact me in case of problems/errors/improvements in styles and pages. note that some improvements will be done in a later release.

[rlovtangen]

Rather than committing the result of running autoprefixer, it is better to store the source without prefixes and run autoprefixer as part of the Grails project build with plugin asset-autoprefixer. This way the source won't be cluttered with prefixes that soon becomes outdated, and the users can decide themselves how to configure asset-autoprefixer if they want to override the defaults.

[smartiniOnGitHub]

@rlovtangen Hi Ronny, a flow more aligned with Grails is for sure better, I'll remove prefixes just committed. So now should I add the plugin asset-autoprefixer to the build step of profiles ? Or is it something that optional for users in generated webapps ? Thank you for all your help and support, I really appreciate it.

Next step, update main.css with new content/styles (from main_modulirized.css and other files), merge all scaffold*.css files in (new) scoffold.css, update other (already existing) css files, remove (temporary) lib folder. Am I missing something other here ?

I'll open an issue in the Scaffold Plugin and try to make some small changes with pull request during next weeks.

Later I'll do other enhancements on pages and styles (many already written in this issue, see previous comments), for next Grails-3.1.x releases, so we can test better resulting pages in the meantime, maybe with a new issue linked from this, to better track things.

[smartiniOnGitHub]

Hi all, other updates (2016-01-17):

• reverted prefixes, so anyone that needs them is free to add (without having to remove them)
• add some little tweaks in input elements at lower resolutions
• add small tweak for tables (used in scaffold lists) at lower resolutions
• add the new scaffold.css file with all scaffold-related styles inside
• updated image paths (under stylesheets/lib but now up to 1 level)

As usual, updates static pages are in the usual place. Now I'll do the pull request.

Thanks to all for now.

[smartiniOnGitHub]

@alvarosanchez Hi Alvaro, after the merge of your changes here now I see that some small changes should be done even in gsp pages of scaffolding, I do changes here and do another pull request in main repository, is it ok for you ? Otherwise I can propose changes and let you implement them, no problem ...

[alvarosanchez]

@smartiniOnGitHub probably you mentioned the wrong user in your last comment :)

[smartiniOnGitHub]

@alvarosanchez Hi, I'm referring to this commit that yesterday I merged in my fork. Now I have some small changes for gsp pages of scaffolding to update with styles refresh, are you still working on them ? Anyway (and more important) are you the right person for this ? If not excuse me ... do you know to finish this part of the work who can I contact, Ronny or Graeme or Jeff ? Thanks a lot.

[alvarosanchez]

Ah, ok, now I understand.

I just moved the GSP templates that were in the scaffolding plugin. Whatever change you want to make, feel free to send a PR.

[smartiniOnGitHub]

ok, it was just to be sure that you wasn't working on them anymore ... after the merge of current PR (the main reason for this issue), and if possible before the end of this week I'll do another PR. Thanks for now.

[alvarosanchez]

:+1:

[smartiniOnGitHub]

Hi all, I just see this commit with updates to styles/layout/other related to web profiles, but is has nothing to do with my pull request ... what is happening ? Probably it's better than my proposal, but it's just to understand because in a community driven effort thing should at least be discussed or written in the issue, or am I missing something ? Regards, Sandro

[graemerocher]

@smartiniOnGitHub Since this PR doesn't address the look and feel of the UI and make it more professional from a design perspective we engaged a design professional to do that first with the hope that we could then overlay some of the changes from this PR ontop of the design changes in a future version of Grails.

It wasn't our intention to ignore the work of the community, but rather first address the design and then hopefully benefit from changes in here and evolve this discussion to include the changes here in Grails 3.2.

We would be very grateful if you could review the implementation of the new version and then tweak and evolve the CSS based on that and look forward to your feedback and moving this PR forward. Does that make sense?

[smartiniOnGitHub]

@graemerocher Hi Graeme, ok no problem, after a quick look committed work seems to give a better UI than mine (and more general, based on Bootstrap, for sure better), so my only complaint is that after so many hours spent on this it would be good to know it ... next time we can better coordinate our efforts, ok :-) .

During the week-end I can align with it and start to take a deeper look and do more tests, and maybe do another PR; to avoid confusion is it possible (you or me ?) to drop my existing PR ?

Next week I can put here some comment to unsure that proposed changes (in css and layout/view pages, and even in Scaffold template pages) are desired.

Sorry just one thing, existing images (and the favicon) still are based on old Grails logo, would it be possible to ask the design professional to update even them with updated Grails logo, for more visual consistency ?

Thank you for the help, support and patience.

[osscontributor]

@smartiniOnGitHub Thanks for the feedback and thanks for the help. This PR has not been closed. There is still some work to be done to figure out how integrate some of the benefits represented here. I think there is stuff here that we will be a great help.

Sorry just one thing, existing images (and the favicon) still are based on old Grails logo, would it be possible to ask the design professional to update even them with updated Grails logo, for more visual consistency ?

Are you interested in doing that?

[smartiniOnGitHub]

@jeffbrown Hi Jeff, thanks for the clarification and the support even from you :-) .

On the update of images, I can try to take a look at spare time (it's another time consuming task) ... but note that if I remember well some base resource (svg source) is missing to fully generate/update them (in grails-core repository, in the media folder); unless some of them are no more useful (but at least one updated png image would be useful anytime svg is not usable for many reasons).

Do you think it would be good for icons/favicons to start from (latest, already updated image grails-icon-flat-color.svg) and generate all others images and favicons accordingly (white, black, and maybe a transparent version) with the flat style ? Last, in the logos folder the problem is that even svg files are old in that folder so I can try to update svg sources with updated colors and regenerate (non-flat) derived images, and post some update if a good result is achieved, ok ?

[osscontributor]

Do you think it would be good for icons/favicons to start from (latest, already updated image grails-icon-flat-color.svg) and generate all others images and favicons accordingly (white, black, and maybe a transparent version) with the flat style ?

I think so.

Last, in the logos folder the problem is that even svg files are old in that folder so I can try to update svg sources with updated colors and regenerate (non-flat) derived images, and post some update if a good result is achieved, ok ?

If that is expertise that you have and you would like to do that, go for it. If that isn't your area of expertise and/or if you just don't want to do that, of course that is fine too. Just let me know.

Thanks again for all of your help.

[smartiniOnGitHub]

@jeffbrown I've done this kind of work many times over years, I have been working for years in the Computer Graphics Industry, so I know theory and practice, but I'm not a graphic/web designer. Anyway, ok for flat icons/favicons, and do some test on non-flat logos (updating related svg before). Let's update in a few days. Bye

[rlovtangen]

The new layout is linking directly to https://grails.org/css/style.css. Is that intentional? I'm not sure anyone wants to depend on a stylesheets linked in from grails.org in their production environment, but without it the scaffolded views is not usable, see attached screenshot)

[rlovtangen]

Also, since the new design is inspired by grails.org, what about also using the same header color (#343437) as grails.org? I was hoping to get rid of the green headers ;) Apart from that, the new design looks much nicer! Will the designer also redesign the scaffolded views?

[rlovtangen]

The main reason scaffolded views is unusable without style.css from grails.org is that the following style is missing:

.grails-icon img {
    width: 40px;
}

Without it, the Grails logo in upper left corner is rendered as 1000x500 px

[jameskleeh]

@rlovtangen Pulling the stylesheet from grails.org is intentional, mainly because this isn't meant for production. These are default index/scaffolded pages that aren't designed to be deployed to production.

If the header color is off, a contribution to fix it would be appreciated. Note that these styles were applied to the web and angular profiles.

[rlovtangen]

@Schlogen Agree that the index page is not meant for production, but I would assume there's a lot of scaffolded pages in production. At least we have. Mostly admin pages.

[jameskleeh]

@rlovtangen Those admin pages have the grails logo on them? I think the vast majority of individuals would at least style the scaffolded pages to match their company/project.

[chery-qualset-hcd-ca-gov]

I would like my framework (grails) to be as useful as it can be straight out of the box. This, to me, would include putting my own logo.gif on top of grails's logo.gif and not have to change or add styles or include styles that will never be used (.grails-icon img).

MHO.

[rlovtangen]

@Schlogen actually, yes, but they are mostly used by developers. We create separate layout and css for the rest of the application.

[smartiniOnGitHub]

@graemerocher I just see that profiles now has a release of 3.2.0.BUILD-SNAPSHOT, so this issue will be moved too to Grails-3.2.0 (and we have much more time) ? If yes, should I try the same to do some work to update icons/logos for 3.1.0 or even this is moved to 3.2.0 ?

[jameskleeh]

@rlovtangen We have heard your suggestion and the grails styling and bootstrap are now local to the application. This change was made in the 3.1.x branch.

[rlovtangen]

@Schlogen Great! Since https://grails.org/css/style.css was not versioned in any way, I guess there could be issues over time. Could I also suggest using non-minified versions of grails.css and bootstrap js and css? Easier to read and reason about. Asset-pipeline will take care of minification.

[rlovtangen]

@Schlogen PR for header colors here: https://github.com/grails/grails-profile-repository/pull/54 :)