The importance of media queries to define breakpoints is no longer to be demonstrated in the creation of responsive/adaptative UI.
If most CSS frameworks are limited in this, this is not the case MOD-CSS which fit good with any CSS property; The combinations are endless.
In this series of tutorials, you can take advantage of it in creating your user interfaces.
Using CSS Media Queries for Responsive Apps
MOD-CSS encourages mobile-first design, so display on mobile is what you need to think first, and then plan for display on larger screens.
Basic example - One row, two responsive columns
In this basic example, each column in the flexgrid hold on a row when you're on mobile.
On larger screen (md? = 768px and above), the column's width i
ncreases to 50%. This will make them both fit on one row.
Second example - one columns take 70% of row's width with gap
In this example, on lg breakpoint (lg? = 992px and above) second column takes 70% of width and the first column resized to 30%.
The row set gap of 2% between them
MOD-CSS
MOD-CSS is a lightweight CSS framework that allows you to quickly create flexible UI without using to traditional way of CSS.
It can be used in conjunction with Bootstrap, Bulma .. Tailwind without hindering their use.
Top comments (0)