Grid Css Documentation? (how to use ui-g? ui-md? ui-lg?)

[modestino]

Hi.

Where can i find Grid CSS COMPLETE documentation?

E.g.: What is the difference between 'ui-grid' and 'ui-g' css class?

How to use 'ui-g', 'ui-md-*' and 'ui-lg-*'?

Thanks.

[cagatay.civici]

ui-grid is the old one and ui-g is the new one.

I'd suggest reviewing the showcase and user guide;

http://www.primefaces.org/showcase/ui/panel/grid.xhtml

[modestino]

Hi optimus.prime!

First, thank you for your time.

I have read the content of http://www.primefaces.org/showcase/ui/panel/grid.xhtml and the user guide few times,
but they do not explain the details of using 'ui-g* ui-md-* ui-lg-*'.

But, I am getting there.

Now, I have another doubt about the same thing: how to use 'ui-g*' with p:panelGrid ?
Seems like panelGrid uses ui-grid and ui-grid-row which seems incompatible with 'ui-g*'.

E.g.:
<p:panelGrid columns="4" styleClass="ui-g" columnClasses="ui-g-12 ui-md-1 ui-lg-1,
ui-g-12 ui-md-11 ui-lg-5,
ui-g-12 ui-md-1 ui-lg-1,
ui-g-12 ui-md-11 ui-lg-5"
layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel for="input" value="Input"/>
<p:inputText id="input"/>

<p:outputLabel for="area" value="Textarea"/>
<p:inputTextarea id="area"/>
</p:panelGrid>

Thanks again.

[mert.sincan]

The classes of Grid css aren't supported by p:panelGrid for now. Therefore, you can create a github issue; https://github.com/primefaces/primefaces/issues

[quobject]

You may find looking at the css code useful:

https://github.com/primefaces/primeng/b ... d/grid.css

[HugoTavares]

+1 here.

Honestly, Primefaces doc is poor to say the least.

I'd be personally ashamed if I were to deliver something production-ready, even though being free, without clear pointers and "howtos" which are lacking in your documentation. Take the "getting started" article... for starters.

Sorry, I'm thinking of moving out of Primefaces due to your miserable documentation.
Really hope you improve that.

[kukeltje]

The documentation (pdf, showcase, source, forum) is not that bad.

From the PrimeFaces 6.2 documentation of the Grid CSS

Responsive
Responsive layout is achieved by applying additional classes to the columns whereas ui-g-* define the default behavior. Four screen sizes are supported with different breakpoints.

Code: Select all

Prefix       Devices               Media Query                     Example
ui-sm-*      Phones                max-width: 40em (640px)         ui-sm-6, ui-sm-4
ui-md-*      Tablets               min-width: 40.063em (641px)     ui-md-2, ui-sm-8
ui-lg-*      Desktops              min-width: 64.063em (1025px)    ui-lg-6, ui-sm-12
ui-xl-*      Big screen monitors   min-width: 90.063em (1441px)    ui-xl-2, ui-sm-10

Most of the time, ui-md-* styles are used with default ui-g-* classes, to customize small or large
screens apply ui-sm, ui-lg and ui-xl can be utilized.

So it is all there...

If you actually encounter things missing, feel free to report them. Just 'ranting' in not very helpful.

[matthijs]

Is there a way to push or pull columns? I have a right side column that i'd like to pull to the top on smaller screens

[kukeltje]

There is some generic css reordering possible afaik, I've seen a Q/A on stackoverflow about this. Please check there. PrimeFaces grid css does not have an 'ordering' option.