Directory

← Back

responsive-layout

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

Author

Rating

Popularity

100+

Responsive Layout

Vaadin is great! Responsive webpages are great... Wait a minute!! lets put them together! alt text ### 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

Examples

Grid Concept

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();
```

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

More fluent apis and some missing refactoring

Released
2017-11-14
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.0+ in 1.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

responsive-layout - Vaadin Add-on Directory

Drop in replacement for Vertical Horizontal Layout to make responsive web applications responsive-layout - Vaadin Add-on Directory
Responsive Layout =================== Vaadin is great! Responsive webpages are great... **Wait a minute!! lets put them together!** ![alt text](http://i.imgur.com/vDNZM1D.gif) ### 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](https://github.com/JarekToro/responsive-layout/wiki/API-%7C-ResponsiveLayout) - [ResponsiveRow](https://github.com/JarekToro/responsive-layout/wiki/API-%7C-ResponsiveRow) - [ResponsiveColumn](https://github.com/JarekToro/responsive-layout/wiki/API-%7C-ResponsiveColumn) # Examples - [Basic](https://github.com/JarekToro/responsive-layout/wiki/Basic) - [Nesting](https://github.com/JarekToro/responsive-layout/wiki/Nesting) - [Sample Menu](https://github.com/JarekToro/responsive-layout/wiki/Sample-Menu) # Grid Concept - [The Grid System](https://github.com/JarekToro/responsive-layout/wiki/The-Grid-System) # What do you think of ResponsiveLayout? - Please feel free to comment with your thoughts - Report any issues you come across Thanks!
Online