Top

Responsive Grid

Responsive Grid

Grid CSS is a lightweight (1.4KB) responsive layout utility optimized for mobile devices, tablets and desktops. Up to 12 columns are supported based on fluid and fixed modes. There are many 3rd party libraries to implement a layout like this but we’ve decided to come up with their own so that we can tune it for the components.

Usage is fairly simple, there are no components at all. A simple div with a ui-grid does the trick. For a simple 3 column layout;

 

Columns can be mixed as well.

To make the grid responsive, simple add ui-grid-responsive to the container.

While the Grid CSS can be used as standalone, we’ve also started integrating it with various components to take advantage of responsive features. One good example is DataGrid;

On a smaller screen, panels stack up.

Stay tuned for upcoming Layout features, if you haven’t heard yet, we are working on Premium Themes and Layouts to provide a set of responsive templates to kickstart your PrimeFaces applications in no time. First Theme and Layout set, SentinelBlue is coming out in August.

Share
5 Comments
  • Peter Hendriks
    28 July 2014 at 12:17

    Awesome! PF mobile was a little too limited for it does not support the datatable component. The thing I liked about mobile was the responsive design, which will now also come to PF regular!

    I will be using this feature in an online questionnaire system for dementia- and casemanagement research for Dutch healthcare researchers. Making it mobile will ensure more people will have access to the system thus providing more data.

    Thanks PF!

  • Subodh
    28 July 2014 at 12:42

    So you are planning to give responsive theme like we have in WordPress ?so same application will work in Computer and mobilewithout any issue? Its Something to give responsive design to one application for mobile user and desktop user?

  • John Schneider
    29 July 2014 at 00:06

    This is great!

    One suggestion though – the CSS class naming conventions aren’t intuitive and will require constant checking against the documentation when doing development.

    How about ui-grid-col-2 = 2 columns (not 6 as in current), ui-grid-col-3 = 3 columns (not 4 as in current), ui-grid-col-4 equal 4 columns (not 3 as in current).

  • djmj
    29 July 2014 at 00:48

    Great news 🙂

  • Stephan Rauh
    29 July 2014 at 01:06

    Good idea! I used to miss this feature badly in PrimeFaces. I just wonder why you didn’t use or adapted the bootstrap.css. I suppose many developers would prefer to use the class names they already know.

    Carry on the good work!