uPortal Flexible Grid System

[Christian Murphy]

Hey all,

There is a new layout scheme for uPortal in the works.

The new system is a flexible grid system, aptly based off CSS display Flex.

CSS Flex allows for fine grained control how how elements appear in one dimension (x or y), and gives course grain control over the appearance in the other dimension (y or x).

For uPortal's use case we want to show a variable number portlets (based off roles and user preferences), and for these portlets to appear in even rows and columns without unexpected gaps.

For a soft requirement, it would be best if the system can intelligently reflow for sizes not usually covered by the boostrap grid, both extra extra large and extra extra small screen sizes.

It would also be nice to have smooth transitions between columns sizes, without jarring portlet size jumps.

Here the current prototype (source is attached)

It gives portlets a constant size (20rem), and requests that the flex give an even amount of space between portlets in a row (still allowing for a custom page gutter to be set).

The flex layout will pack as many portlets into a row as possible, portlets that do not fit are pushed to the next row.

If the screen size shrinks below 20rem, each portlet will automatically switch to 100% screen width, to avoid overflow scroll or content clipping.

A pull request adding a flexible layout scheme to uPortal will be incoming soon.

Thoughts and suggestions toward improving the defaults for flexible layout are welcome!

Best Regards,

Christian Murphy

[COUSQUER Christian]

Heya Christian,

 

Personnally, IMHO, CSS grid fits better than Flex to uPortal.

 

I’ve fix Jen Simmons bug (http://labs.jensimmons.com/ ) in 12 variations of card example D by adding a section to each article (inner wapper) so that the layout isn’t any more broken. Have a look.

 

:wink:

Best Regards

Christian

 

 

De : uport...@apereo.org [mailto:uport...@apereo.org] De la part de Christian Murphy
Envoyé : mardi 12 décembre 2017 18:44
À : uPortal Developers <uport...@apereo.org>
Objet : [uportal-dev] uPortal Flexible Grid System

 

Hey all,

 

There is a new layout scheme for uPortal in the works.

The new system is a flexible grid system, aptly based off CSS display Flex.

 

CSS Flex allows for fine grained control how how elements appear in one dimension (x or y), and gives course grain control over the appearance in the other dimension (y or x).

For uPortal's use case we want to show a variable number portlets (based off roles and user preferences), and for these portlets to appear in even rows and columns without unexpected gaps.

For a soft requirement, it would be best if the system can intelligently reflow for sizes not usually covered by the boostrap grid, both extra extra large and extra extra small screen sizes.

It would also be nice to have smooth transitions between columns sizes, without jarring portlet size jumps.

 

Here the current prototype (source is attached)

 

 

 

It gives portlets a constant size (20rem), and requests that the flex give an even amount of space between portlets in a row (still allowing for a custom page gutter to be set).

The flex layout will pack as many portlets into a row as possible, portlets that do not fit are pushed to the next row.

If the screen size shrinks below 20rem, each portlet will automatically switch to 100% screen width, to avoid overflow scroll or content clipping.

 

A pull request adding a flexible layout scheme to uPortal will be incoming soon.

Thoughts and suggestions toward improving the defaults for flexible layout are welcome!

 

Best Regards,

 

Christian Murphy

--
You received this message because you are subscribed to the Google Groups "uPortal Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to uportal-dev...@apereo.org.
Visit this group at https://groups.google.com/a/apereo.org/group/uportal-dev/.

[Christian Murphy]

I agree CSS Grid is nice, and uPortal should also have a CSS Grid based layout.

IMHO, CSS grid fits better than Flex to uPortal

 

CSS Grid does not replace CSS Flex, both have their uses.

CSS Tricks has a good write-up this: https://css-tricks.com/css-grid-replace-flexbox/

The specific request for a new layout

we want to show a variable number portlets (based off roles and user preferences), and for these portlets to appear in even rows and columns without unexpected gaps.

Adding elements to grid can lead the layout to a state like

where the final column has a two box vertical gap relative to the rest of the layout.

Whereas flex adds elements by row, which prevents multilevel vertical gaps, and flex space between prevents uneven horizontal gaps in the final row.

Both look okay, I feel flex better fulfills the gap avoidance use case.

As mentioned before, CSS Grid is nice, I agree it should also be a layout option, soon.

Best Regards,

Christian Murphy

[COUSQUER Christian]

Heya Christian,

 

Sorry Christian. I misspoke (I made a French “shortcuts of language” and “went too fast in my words” :-D ).

 

I agree with all the things you note. In fact, the only fear I had with CSS Flex was that it presupposes that most portlets have about the same height of content. And –perhaps Am I wrong- I have a little doubt that this is the case for most of our cases.

 

With CSS Flex, it will the highest portlet in height that will determine the height of each row depending on the windows width. And I really do not know if it's something very predictable. J

 

But I agree with you when you write to me: J

> CSS Grid does not replace CSS Flex, both have their uses.

And

> As mentioned before, CSS Grid is nice, I agree it should also be a layout option, soon.

Yes soon.

 

Sorry again Christian

Best

-Christian

 

De : uport...@apereo.org [mailto:uport...@apereo.org] De la part de Christian Murphy
Envoyé : mercredi 13 décembre 2017 06:30
À : uPortal Developers <uport...@apereo.org>
Cc : christian...@gmail.com; COUSQUER Christian <Christian...@admp6.jussieu.fr>
Objet : Re: [uportal-dev] uPortal Flexible Grid System

[Julien Gribonvald]

From my little experience in using Flex, it's great but sometimes I would prefered to use also grid layout as somethings are missing and are on grid layout, but as it wasn't implemented everywhere we are waiting... And since last year I don't use anymore bootstrap grid layout.
So I'm agree that mixing the use of both CSS Flex and Grid layout will be really great in uPortal. And we should retain - it's from CSS Tricks link that you pointed - "grid items can be flex parents".

Best Regards ,
Julien

--
Julien Gribonvald

[Julien Gribonvald]

If you want my point of view, it's from my experience with column in uPortal, most of users and me too are frustated that columns go one bolow the other when the screen size reduce. And I think grid layout could provide a new comportment. I would prefered that portlets where ordered in the same order they appear in the "line", because in desktop we place at the first line important things...

Julien

--
Julien Gribonvald

[COUSQUER Christian]

Yes Julien

Agreed.

 

Il y a toujours cet écart entre le ressenti utilisateur et la manière dont un navigateur rend du contenu. Le DOM a sa logique qui ne correspond pas à la logique utilisateur.

 

There is always this gap between the user feeling and the way a browser renders content. The DOM has its logic that does not correspond to the user logic.

 

-Christian

 

De : uport...@apereo.org [mailto:uport...@apereo.org] De la part de Julien Gribonvald
Envoyé : mercredi 13 décembre 2017 10:09
À : uport...@apereo.org

[Christian Murphy]

The first draft of the less code to provide a uPortal portlet layout based of flex grid is available at https://github.com/Jasig/uPortal/pull/1074

It should be noted that this PR is focused on providing a new set of layouts for showing portlets in the main content area.

Using flex and css grid for overall page layout is outside the scope of the proposed PR, but is still something that should continue to be discussed.

Best Regards,

Christian Murphy