cancel
Showing results for 
Search instead for 
Did you mean: 

Participate in contests and sweepstakes

Responsive grid and Screen Simulator Components

The following solution includes two components that are meant to compliment each other and simplify responsive app creation.  One component, Screen Simulator,  is simply a reference. It was created to mimic various screen sizes and allow the creator to determine layout easily without having to continually update, save and refresh the browser to view the changes. 

The other is a fluid grid component that is meant to be added to the app in design and serves as a reference to the designer.  The X values that are set utilizing the grid 'stick' even after the fluid grid component is removed from the screen because the calculations occur dynamically as the screen size changes - this happens OnChange of the slider within the screen.

The final attachment, Sample App, is added here as a reference. Simply flip the toggle to see the grid, set the X and Width values for the button in the inputs and watch the button size adjust accordingly as you resize the screen.
Lastly, an additional feature within the sample app include responsive text examples. 

 

Link to community apps gallery.

Screen Sim - Large screen, vertical layoutScreen Sim - Large screen, vertical layoutScreen Sim - Large screen, horizontal layoutScreen Sim - Large screen, horizontal layoutFluid grid in sample appFluid grid in sample appFluid grid in sample appFluid grid in sample app