Discover the potential of Cascade Framework.
With Cascade Framework's versatile grid system, you can achieve exactly what you have in mind. This comprehensive grid system offers support for various layouts such as 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and many more combinations. Moreover, you have the flexibility to create unique layouts like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.
In Cascade framework, a grid element is either one of specific HTML elements like section, main, article, header, footer, aside, nav (polyfilled with HTMLshiv for old IE) or a div element with a 'col' class (usable in old IE without polyfill).
To define the width of a grid element, simply add a class formatted as 'width-XofY', where Y can range from 2 to 24 and X is any value less than Y.
For example, valid classes in Cascade Framework include 'width-1of2' (50% width), 'width-3of4' (25% width), 'width-2of5' (40% width), 'width-13of16' (81.25% width), and more. Additionally, utilize 'width-fit' and 'width-fill' classes to adjust content fitting and filling within the 100% width.
If the responsiveness module is enabled, all grid elements automatically reset to 100% on mobile devices. Customize layouts for different screens using classes like 'mobile-width-3of16', 'phone-width-3of7', or 'tablet-width-2of4'. Utilize 'desktop-hidden', 'mobile-hidden', 'phone-hidden', or 'tablet-hidden' classes to selectively hide content on specific screen sizes.
Please note that the current version of Cascade Framework is purely CSS based. While default breakpoints are provided, they can be replaced with custom breakpoints in the source code if needed.
Explore more at and / .