Book Image

PrimeFaces Cookbook

Book Image

PrimeFaces Cookbook

Overview of this book

Table of Contents (20 chapters)
PrimeFaces Cookbook Second Edition
Credits
Foreword
Foreword
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Responsive layout with Grid CSS


Grid CSS is a lightweight stylesheet bundled with PrimeFaces that offers responsive layout utilities for mobile devices and desktops. In this recipe, we will create a responsive user interface with custom styling and also demonstrate them in a nested version.

How to do it…

A simple definition of a responsive grid is created with the help of HTML div components and CSS classes as follows:

<div class="ui-grid ui-grid-responsive">
  <div class="ui-grid-row">
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1</div>
    <div class="ui-grid-col-1">1&lt...