responsive-layout

Drop in replacement for Vertical Horizontal Layout to make responsive web applications

View larger

Close

View larger

Close

View larger

Close

View larger

Close

Responsive Layout

Vaadin is great! Responsive webpages are great... Wait a minute!! lets put them together! ### Features

• Easily move from Vertical or Horizontal Layouts (uses same api)
• Removes Vertical Horizontal Soup from your code
• Performance Boost very lightweight layout
• Looks great on every device
• Easy layout customization not stuck to anything predefined

Documentation

• ResponsiveLayout
• ResponsiveRow
• ResponsiveColumn

Examples

• Basic
• Nesting
• Sample Menu

Grid Concept

• The Grid System

What do you think of ResponsiveLayout?

• Please feel free to comment with your thoughts
• Report any issues you come across

Thanks!

Sample code

ResponsiveRow row = responsiveLayout.addRow()
                .withAlignment(Alignment.MIDDLE_CENTER)
                .withMargin(true);

 ResponsiveColumn column = row.addColumn()
                .withDisplayRules(12, 3, 12, 12)
                .withVisibilityRules(false, true, true, true)
                .withComponent(/*button etc*/);

ResponsiveLayout responsiveLayout = new ResponsiveLayout();
ResponsiveRow row = new ResponsiveRow();

ResponsiveColumn column1 = new ResponsiveColumn();
column1.addRule(DisplaySize.XS,12)
column1.addRule(DisplaySize.MD,6)

Column column2 = new Column();
column2.addRule(DisplaySize.XS,12)
column2.addRule(DisplaySize.MD,6)

row.addColumn(column1);
row.addColumn(column2);

responsiveLayout.addRow(row);

```
private ResponsiveLayout rl = new ResponsiveLayout().withDefaultRules(12, 12, 6, 6).withFlexible();
private ResponsiveRow row = rl.addRow().withGrow(true).withSpacing(true);
private ResponsiveRow row2 = rl.addRow().withGrow(true).withSpacing(true);
...
rl.setSpacing();
```

Links

• Issue Tracker
• Source Code
• Examples
• Documentation
• Author Homepage

Compatibility