Responsive Test for Flexible.gs
This page demonstrates some of the responsive capabilities of the Flexible.gs grid system. Resize your browser window or view this page on different devices to see how the layout adapts.
Note: The styles on this page simulate `Flexible.gs` classes for demonstration. Your actual framework classes will be used on real projects.
1. Basic Column Stacking
These three columns are equal width on medium screens and up. They stack vertically on small screens.
Hypothetical `Flexible.gs` classes used: demo-col-md-4 (for medium screens) and implicitly demo-col-sm-12 or default full width for small screens.
2. Varying Widths & Breakpoints
Here, the layout changes more dynamically. On large screens, it's a 3-3-6 layout. On medium, it might be 6-6 (with the third stacking). On small, all stack.
Hypothetical `Flexible.gs` classes: demo-col-lg-3, demo-col-lg-6, demo-col-md-6.
3. Visibility Control
Some content might only be relevant for certain screen sizes. `Flexible.gs` should provide utility classes for this.
hidden-sm-down equivalent)visible-md-up equivalent)4. Responsive Images
Images should scale down fluidly within their containing elements to prevent breaking the layout.
Hypothetical `Flexible.gs` class: img-fluid (or your equivalent).
This image uses a class like img-fluid which typically applies max-width: 100%; height: auto;. It will not exceed the width of its parent column.
Test Complete!
These are just a few examples. A robust grid system like Flexible.gs would offer many more features like offsetting, ordering, alignment utilities, and more complex nesting possibilities.
Continue resizing your browser to see how these elements adapt. Also, check your site's own header and footer for their responsiveness!