Respond dynamically.
ResponCSS is a fluid responsive CSS layout framework based on a dynamic set of columns. By adding or subtracting columns based on screen width, developers are able to take full advantage of a wide array of screen resolutions and free their web apps from the inflexibility (not to mention cross browser headaches) of pixel driven layouts.
As stated above the number of columns changes depending on screen. This table shows the default settings for ResponCSS.
| Screens | Class Prefix | Target | Layout width | Columns |
|---|---|---|---|---|
| Small | .s- | Smartphones and Portrait Tablets | 768px and below | 4 |
| Medium | .m- | Landscape Tablets | 769px to 979px | 8 |
| Large | .l- | Average Desktops | 980px to 1209px | 12 |
| Xtra Large | .xl- | Large Display Desktops | 1210px and up | 16 |
Current Screen Size:
Small : 4 Columns Medium : 8 Columns Large : 12 Columns Extra Large : 16 ColumnsContainers are designed to be high level parents in your layout. They can be assigned to span a different number of columns for each screen size.
Simply add the class ".center" to center a container.
If you know you want a container to span the same no across all screen sizes, you can use one of these shortcuts without assigning a size.
Want to push some containers around? That's what overs are for.
Block grids are designed to be used when you want a certain number of items per row. The blocks are floated left and will flow into a grid pattern. Block grids are available in 1 - 10 blocks per row.