DEV Community

Cover image for MOD-CSS Breakpoints - examples & tutorial
Dev Geos
Dev Geos

Posted on

MOD-CSS Breakpoints - examples & tutorial

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.

mod-css row column with breakpoint

mod-css anime breakpoint

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 row column with breakpoint and gap

mod-css anime breakpoint with gap

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.

Documentation breakpoint

Top comments (0)