Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rdebusscher/gridlayout
JSF Component for easy usage of CSS grids
https://github.com/rdebusscher/gridlayout
Last synced: about 2 months ago
JSON representation
JSF Component for easy usage of CSS grids
- Host: GitHub
- URL: https://github.com/rdebusscher/gridlayout
- Owner: rdebusscher
- License: apache-2.0
- Created: 2015-01-19T07:54:11.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-01-19T08:39:00.000Z (almost 10 years ago)
- Last Synced: 2023-04-03T18:53:33.510Z (almost 2 years ago)
- Language: Java
- Size: 137 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gridLayout
JSF Component for easy usage of CSS grids
## Introduction
gridLayout helps you to layout content in your JSF page using a CSS grid efficiently. It results in the classic DIV structure used in CSS grids.
```xml
Col1
Col2
Col2
```
The component isn't tied to any JSF implementation (Mojarra and MyFaces), component library (PrimeFaces, etc ...) or Grid system (Twitter Bootsrap, PrimeFaces CSS Grid, etc ...)
## Configuration
* Download the code from this repository.
* Build the maven project and add the dependency to your application.
```xml
be.rubus.web
gridLayout
1.0
```
* Define the namespace on top of your xhtml page like : ``xmlns:c4j="http://www.rubus.be/component"``
* Use the component, `` ``. See the example further on.
## Component configuration
|Attribute | Description |
|----------|-------------|
|columns | Required. Number of columns in the grid layout.|
|rowClass | CSS Class which is used on the DIV row.|
|columnClasses | Comma separated list of CSS classes which will be used on the column DIVs |
## Good to know
* Released under the Apache V2 License.
* Compiled with Java 1.5.
* Dependent on JSF 2.0 (Java EE 6), works with any JSF 2.X version.
## Examples
### Basic example
Uses the PrimeFaces CSS grid system and other PrimeFaces components.
```xml
```
Results in a 2 column layout, which takes only the half of the screen width. CommandButton is aligned under the input fields.
### CSS column classes reused
When each column should have the same CSS class assigned, only one definition is needed. (example uses Bootstrap CSS grid)
```xml
```
Other variations are possible. For example, when you specify only 2 CSS classes in the attribute `columnClasses` but `3`in the attribute `columns`, then the last column will use the same CSS class as the first one.
### Add custom CSS classes
It is possible to specify more then 1 css class for a column. These can also be some custom defined CSS classes.
```xml
...
```
The above example will align the labels to the right (In case the alignRight CSS class is defined like `text-align: right;` )