Little refresh for web pages of Grails 3.1.0

[Sandro Martini]

Hi all,
for new Grails 3.1.0 (or a later 3.1.x), what do you think on a little update of default web pages (generally speaking) ?

For example I'm thinking at something like this:
- update colors to those of new Grails web site, and maybe even larger fonts
- update Grails logo with the new logo (from Grails web site) ? Maybe the svg version ?
- update header and footer to spread all page width, with responsive content
- add another minimal css for smartphone, and maybe another for print
- in header, add a sample navigation toolbar with Grails logo inside (optional), and with links to Home and maybe other already-published resources
- use better HTML5 tags like header, nav, footer
- put content inside section HTML5 tag, as a sample ... one for status div, another for controllers, etc
- remove inline styles
- move "Skip to content…" in a div
- move some (important) parts from "Application Status" in footer, maybe publishing them only in  DEV environment
- etc ...

All this for sure in the Home Page of a generated webapp (and related layout).
Maybe (if wanted) even in template pages (but of course this has to be tested a lot). All without using other libraries (css / js).

I now there are many changes, but relatively simple, only some time (and a lot of tests) are needed ...
If wanted I can prototype something (starting from a preview of static files) and add to a new issue, to better track it.

Tell me what you think.

Thanks a lot,
Sandro

[Graeme Rocher]

Sounds great, pull requests / contributions would be greatly appreciated

--
You received this message because you are subscribed to the Google Groups "Grails Dev Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to grails-dev-disc...@googlegroups.com.
To post to this group, send email to grails-de...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/grails-dev-discuss/deab1f8c-27e6-4803-9fd2-4abb44a287e4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sandro Martini]

Ok, in a few days I'll create an issue and put (if possible) a zip with my tests on a sample Grails Home page static html file, or better a link to some collaborative tool so before making the pull request we all agree that the proposal looks good ... still I'm not fully satisfied for the result of my work in progress, and some feedback would be really useful.

Thanks for now, it's amazing to contribute to a great framework like Grails, even for my small contributions :-) .

Let's update.

Bye

You received this message because you are subscribed to a topic in the Google Groups "Grails Dev Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/grails-dev-discuss/c0It6caDQ5E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to grails-dev-disc...@googlegroups.com.

To post to this group, send email to grails-de...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/grails-dev-discuss/FBBA7FA8-5B48-4269-8FCB-93CE483DE470%40gmail.com.

[Ronny Løvtangen]

Great news!

It would be great to have the CSS more in line with principles from OOCSS/SMACSS. One problem with the current implementation is that the styling of scaffolded pages is too bound to the default sitemesh layout. It should ideally be self contained so that it can be used with custom layouts. Even better would be if the scaffolding related CSS could be moved to the scaffolding plugin. Same goes for the other scaffolding related assets, like e.g. database_edit.png.

The current main.css has some general styling of table elements, this should be moved to using class. I guess this is CSS related to scaffolding, so something like .scaffold-xxx {…}

What about breaking main.css into smaller chunks? One for scaffolding related CSS is obvious. And maybe one for default sitemesh layout related CSS. Not sure how much is left then, maybe the rest goes into a third file or maybe grouped even more if necessary. These files could the be included by main.css using asset-pipeline. Would make it a lot easier for users to keep some parts and leave out others.

Best Regards,

Ronny Løvtangen

To view this discussion on the web visit https://groups.google.com/d/msgid/grails-dev-discuss/CAH4gT7rKijCWyWEK5YTw5SyzjzwKt%3DngcE6YsXBWh4u0WkFj6Q%40mail.gmail.com.

[Sandro Martini]

Hi Ronny,
thanks for all suggestions :-) .
I fear that we don't have so much time before 3.1.0 final, so probably we should do this in different steps (to try to improve scaffold results without break something :-) ); moving some parts in scaffold plugin should be great even to provide updates in a simpler way.

Tomorrow I'll open the issue and add a link to this discussion and to some online HTML code sharing because before push changes we should agree on results on static pages (and generally speaking this requires many iterations and tests).

Let's update.
Thanks for now.

Bye,
Sandro

To view this discussion on the web visit https://groups.google.com/d/msgid/grails-dev-discuss/863C32C9-51A0-403A-8D17-B104F5B9338B%40lovtangen.com.

[Graeme Rocher]

We go GA at the end of January so whatever you can come up with will need to he done by then. Thanks!

To view this discussion on the web visit https://groups.google.com/d/msgid/grails-dev-discuss/CAH4gT7rBN9W3gPPzrvignV6dXdAVGSRNZ%3DE6ODDSoOttBaMkcQ%40mail.gmail.com.

[Sandro Martini]

Hi all,

We go GA at the end of January so whatever you can come up with will need to he done by then. Thanks!

ok, good to know :-) ... I don't think we'll be able to do all the stuff for 3.1.0, but probably something good yes :-) .

I just created the issue, it's: https://github.com/grails/grails-core/issues/9467

General info:
please if possible keep discussions here (in mailing list/forum) and put in the issue only things related to implementation/fixes.

Thanks to all.

Bye,
Sandro

[Owen Rubel]

This would definitely create a more general purpose view: one that can work for centralized and distributed architectures. That way if you build centralized and then later want to move the view to something like Node and angular, this makes for a far easier transition.

[Ronny Løvtangen]

Hi,

Just to get a grasp at what the different parts of the current main.css is, I tried to split things up into different files. Looks like almost everything is related to scaffolding.

Here’s what I did:

- Created a new Grails 3.1.0.M3 project

- Created a simple domain object and generated scaffolded views (/foo).

- Added a dynamic scaffolded view (foo2) and a simple almost empty page (/bar).

- Kept main.css, but created a similar main_modularized.css split up into smaller files.

- Changed application.css to require main_modularized instead of main.

The reason I kept main.css as is, is that it is then easy to switch back and forth between main.css and main_modularized.css and see that the page looks exactly the same (as order of some css styles has changed slightly).

I put it up on GitHub here: https://github.com/rlovtangen/profilerefresh/blob/master/grails-app/assets/stylesheets/main_modularized.css

First take ended up like this:

grails-app/assets/stylesheets/

├── application.css

├── errors.css

├── lib

│   ├── message-error.css

│   ├── page-layout.css

│   ├── scaffold-action.css

│   ├── scaffold-create-edit.css

│   ├── scaffold-list.css

│   ├── scaffold-navigate.css

│   ├── scaffold-paginate.css

│   └── scaffold.css

├── main.css

├── main_modularized.css

└── mobile.css

- message-error.css includes styles for error messages and success messages. Used both by scaffolded pages and on the general error page.

- page-layout.css includes styles related to the header, footer, site background, width and placement of main content area etc.

- scaffold.css just includes the other scaffold sub files.

- scaffold-action.css is the bottom button row on scaffolded pages (Edit, Delete, Create)

- scaffold-create-edit.css is the body of scaffolded create, edit and show pages

- scaffold-list.css is the body of scaffolded list (/index) page

- scaffold-navigate.css is the top button row on scaffolded pages (Foo List, New Foo)

- scaffold-paginate.css is the pagination links on scaffolded pages

In main_modularized.css there are a few styles left, related to general styling of elements like h1, links etc.

What I think is most problematic with the current css is the styling of table elements in scaffold-list.css, as they are intrusive to all other use of tables on a site that includes this css, not just scaffolded views. To have these styles scoped to a css class would be a good improvement IMO. This is also the case in scaffold-create-edit.css where elements like label, input, select, textarea etc are styled. The scaffolded related styles should not influence anything other than the scaffolded pages.

Run with ./gradlew bootRun

Best Regards,

Ronny

--
You received this message because you are subscribed to the Google Groups "Grails Dev Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to grails-dev-disc...@googlegroups.com.
To post to this group, send email to grails-de...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/grails-dev-discuss/127a5466-0752-4a6d-887f-116b113b5303%40googlegroups.com.

[Sandro Martini]

Hi Ronny,
thank you very much for the prototype, during next days I'll try to better align with your proposal (looks very interesting and useful to me) ... to have it implemented right we need to test a lot of combinations, so let's start :-) ...

Just a note, having all css splitted, we should be able to get all different bundles (for example from an AngularJS client) knowing the URL where that bundle is published, right ?
Sorry, because this is something that I don't find explained very well in documentation (could be my fault), as should be (at least for a simpler way to get published bundles URLs) ... for example for consuming them by static clients like single page AngularJS applications (hosted inside the Grails webapp, or maybe external).

I'll tell you something next week.
Thank you again for now.

Bye,
Sandro

To unsubscribe from this group and stop receiving emails from it, send an email to grails-dev-discuss+unsub...@googlegroups.com.